CSNetworkSecurity

네트워크 - CORS (Corss Site Resource Sharing)

SOP (Same Origin Policy)

다른 출처의 리소스를 사용 못하도록 제한하는 보안 방식

CORS (Cross Origin Resource Sharing)

하나의 Origin 에서 실행 중인 웹 애플리케이션이 다른 Origin 내 리소스를 사용하는 것을 의미한다.

  • 추가 HTTP 헤더를 이용해 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택된 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제
  • Request 내 Origin 헤더와 Response 내 Access-Control-Allow-Origin 헤더가 같으면 브라우저는 같은 출처로 인식한다.

해결 방법

서버에서 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보내는 방식으로 CORS 에러를 해결할 수 있습니다. 프론트엔드 개발자가 CORS 에러를 확인했다면, 서버에 Access-Control-Allow-Origin 등 CORS를 해결하기 위한 몇 가지 응답 헤더를 포함해 달라고 요청해야 합니다.

출처

  • URL의 Protocol, Host, Port 를 합친 것을 의미한다.

CORS 접근 제어 시나리오

  • Simple Request
  • Preflight Requst
  • Credential Request

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 Requst

  • Option 메서드를 이용해 다른 도메인의 리소스에 요청이 가능한지 확인
    • Request 내 Origin 과 응답의 Access-Control-Allow-Origin 을 브라우저가 비교해 판단한다.
  • 요청이 가능하면 실제 요청을 보낸다.

Request Header

  • Origin : 요청 출처
  • Access-Control-Request-Method : 실제 요청의 메서드
  • Access-Control-Request-Headers : 실제 요청의 추가 헤더

Response Header

  • Access-Control-Allow-Origin : 서버측 허가 출처
  • Access-Control-Allow-Methods : 서버 측 허가 메서드
  • Access-Control-Allow-Headers : 서버 측 허가 헤더
  • Access-Control-Max-Age : Preflight 응답 캐시 시간
Share