[Web & HTTP] CORS / SOP 학습

# CORS 란?

• Cross Origin Resource Sharing(교차 출처 자원 공유) 의 약어

• 원본 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있도록 서버에서 관련 HTTP 헤더를 추가하여 브라우저에 알려주는 체제 입니다.

 

 

# SOP 란?

• Same Origin Policy(동일 출처 정책) 의 약어

• 원본 출처에서 실행 중인 웹 어플리케이션은 보안상의 이유로 동일한 출처의 리소스만 공유할 수 있다 라는 정책 입니다.

• SOP 정책 중, 다른 출처 리소스 요청을 허용하는 예외 항목이 있는데 그 중 하나가 CORS 정책을 지킨 리소스 요청 입니다.

 

 

# 출처(Origin) 란?

• URI 구조에 대해서 알아야 합니다.

  • http://localhost:3000/main?page=1#content

    • http://  는 Protocol

    • localhost 는 Host(Domain 으로 부르기도 합니다)

    • :3000 은 Port

    • /main 은 Path

    • ?page=1 은 Query String

    • #content 는 Fragment

 

• CORS / SOP 정책에서 말하는 다른 출처의 기준은 URI 에서 'Protocol, Host, Port' 가 다른 경우 입니다.

  • 다른 출처 예)

    • http://localhost 와 https://localhost 는 Protocol 이 다르므로 다른 출처가 됩니다.

    • http://localhost:3000 과 http://localhost:3001 은 Port 가 다르므로 다른 출처가 됩니다.

    • https://foo.com 과 https://www.foo.com 은 Host 가 다르므로 다른 출처가 됩니다.

  • 동일 출처 예)

    • http://localhost:3000 과 http://localhost:3000/image 는 Path 가 다르므로 동일 출처가 됩니다.

    • http://localhost:3000/main 과 http://localhost:3000?pageNo=1 은 Query String 이 다르므로 동일 출처가 됩니다.

 

 

# CORS 가 동작하는 3가지 방식

• Simple Request(단순 요청)

  • HTTP 요청 시, 아래 3가지 항목이 모두 충족되면 브라우저는 이를 Simple Request 로 판단하고 동작합니다.

    1. 요청 메소드가 GET, HEAD, POST 중 한가지

    2. 요청 헤더가 'Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width' 만 사용

    3. Content-Type 값은 'application/x-www-form-urlencoded, multipart/form-data, text/plain' 만 사용

  • Simple Request 에 대한 응답에는 다음 헤더가 포함되어야 합니다.

    • Access-Control-Allow-Origin

  • 위 사항이 적용되지 않은 경우, 브라우저는 에러를 발생시키고 응답은 무시합니다.

• Preflight Request(예비 요청)

  • Preflight Request 는 메인 요청을 하기 전, 브라우저가 서버에 예비 요청을 보내 통신을 위해 어떤 옵션이 적용되어 있는지 확인하는 동작 방식입니다.

  • 아래 조건이 충족되면 브라우저가 Preflight Request 를 보내며, 이는 프론트엔드 개발자가 요청 로직을 구현하는 것이 아닙니다.

    • Simple Request 와 Credentialed Request 를 제외한 나머지 경우

  • Preflight Request 에 대한 응답을 받으면 브라우저는 허용 정책들을 비교 후, 확인이 완료되면 메인 요청을 합니다.

  • 정책에 위반되는 경우, 브라우저는 에러를 발생시키고 메인 요청을 보내지 않습니다.

• Credentialed Request(인증 요청)

  • Credentialed Request 는 XMLHttpRequest 혹은 Fetch 에 인증 플래그를 설정해 요청하는 방식입니다.

  • 인증 플래그가 설정된 요청인 경우, 브라우저는 이를 Credentialed Request 로 판단하고 동작합니다.

  • Credentialed Request 에 대한 응답에는 아래 사항이 적용되어야 합니다.

    1. Access-Control-Allow-Origin: 와일드카드(*) 가 아닌 값

    2. Access-Control-Allow-Credentials: true

  • 위 사항이 적용되지 않은 경우, 브라우저는 에러를 발생시키고 응답은 무시합니다.

 

 

# CORS 예제 코드

• https://github.com/2dubbing/ex-cors

 

 

 

 

# 참고문서

• CORS - MDN web docs
• CORS는 왜 이렇게 우리를 힘들게 하는걸까? - Evan Moon
• The Web Origin Concept - RFC6454