비실이의 개발 성장기

[Web & HTTP] CORS / SOP 학습 본문

기타 Web 관련 공부

[Web & HTTP] CORS / SOP 학습

DubbingLee 2020. 7. 1. 19:34

# 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://localhosthttps://localhostProtocol 이 다르므로 다른 출처가 됩니다.

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

      • https://foo.comhttps://www.foo.comHost 가 다르므로 다른 출처가 됩니다.

    • 동일 출처 예)

      • http://localhost:3000http://localhost:3000/imagePath 가 다르므로 동일 출처가 됩니다.

      • http://localhost:3000/mainhttp://localhost:3000?pageNo=1Query 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 예제 코드

 

 

 

 

# 참고문서

Comments