영상 후기 - [10분 테코톡] 🌳 나봄의 CORS

SOP(Same Origin Policy)

• 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식

 

• Protocal, Host, Port 모두 같아야 같은 출처라고 판단
• 하나라도 다르면 다른 출처라고 판단
• 번외) 익스플로러는 port가 출처를 판단하지 않는다. port가 달라도 같은 출처라고 인식

 

http://localhost와 같은 출처인 url은?

1. https://localhost (X)

• https라서

2. http://localhost:80 (O) 

• http 기본포트가 80이다.

3. http://127.0.0.1 (X)

• localhost는 맞지만 브라우저 입장에서는 이거를 String value를 서로 비교를 한다. 그래서 String value가 localhost와 127.0.01이 서로 다르기 때문에 브라우저입장에서는 서로 다른출처라고 판단한다.

4. http://localhost/api/cors (O)

• /api/cors 는 추가적으로 붙은 로케이션이다.

 

 

SOP를 사용을 해야 보안에 도움이 되는 이유?

1. 선량한 사용자가 페이스북 로그인 이후 사용(페이스북에서 인증 토큰을 받아온다)
2. 해커가 사용자에게 흥미진진한 내용과 링크를 메일을 통해 보낸다.
3. 해커는 사용자의 인증토큰을 통해 페이스북에 강제로 포스트를 게시하라고 명령
4. 만약 송금이나 민감한 정보 등들이 일어나면 큰문제가 일어난다. 그래서 SOP가 중요하다.
5. SOP가 SOP에 위반이 된다며 요청을 못받아들이게 한다.

 

다른 출처의 리소스가 필요하다면 어떻게 해야하는지?

• CORS를 이용

 

CORS란?(Cross-Origin Resource Sharing)

• 다른 출처의 자원을 공유
• 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

 

CORS 접근제어 시나리오

• 단순 요청(Simple Request)
• 프리플라이트 요청(Preflight Request)
• 인증정보 포함 요청(Credentialed Request)

 

프리플라이트 요청(Preflight Request)

• 사전 확인작업
• 본 요청을 보내기 전에 일단 서버에게 물어보는 것
• OPTIONS 메서드를 통해 도메인의 리소스에 요청이 가능한 지 확인 작업
• 요청이 가능하다면 실제 요청(Actual Request)을 보낸다.

Preflight Response 특징

• 응답 코드는 200대여야 한다.
• 응답 바디는 비어있는 것이 좋다.

 

 

Simple Request

• Preflight 요청 없이 바로 요청을 날린다.
• 다음 조건을 모두 만족해야 한다.
  • GET, POST, HEAD 메서드
  • Content-Type
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain
  • 헤더는 Accept, Accept-Language, Content-Language, Content-Type 만 허용된다.

 

왜 Preflight가 필요할까?

• CORS를 모르는 서버를 위해서다.

 

 

Credentialed Request

• 인증 관련 헤더를 포함할 때 사용하는 요청이다.
• 클라이언트측
• credentials : include
• 서버측
• Access-Control-Allow-Credentials : true(Access-Control-Allow-Origin: *은 안된다.)