CORS

CORS

Origin

  • URL의 protocol, domain name, port을 합쳐 origin 이라고 함.
  • 즉, https://localhost:8080/about과 https://localhost:8080/users?id=5는 같은 origin을 가짐.
  • 반대로 protocol, domain name, port가 하나라도 다른 경우 cross origin 이라고 함.

SOP (Same Origin Policy)

  • 동일한 origin에서만 resource를 가질 수 있다는 정책.
  • 이 정책이 없다면 웹 어플리케이션은 공격(XSS, CSRF)에 취약해짐.
  • Origin 비교는 브라우저가 수행하고, 같은 origin이 아닌 경우 CORS 에러를 생성.

CORS (Cross-Origin Resource Sharing)

  • 다른 origin 으로부터의 리소스도 제한적으로 공유받을 수 있게 하는 정책.
  • SOP를 회피 가능하고, 이미지, 비디오, 링크 등은 기본적으로 CORS 정책을 지원.
  • Fetch API등은 기본적으로 SOP 정책을 지원하기 때문에, CORS 정책을 따르도록 설정해야 함.
  • 서버에서 CORS 정책을 설정하는 방법
    1. 클라이언트가 HTTP 요청의 헤더에 자신의 origin을 실어서 서버에 보냄.
    2. 서버는 요청에 대한 응답의 헤더에 Access-Control-Allow-Origin 필드를 추가하고, 응답에 접근이 가능한 origin을 실어서 보냄.
    3. 클라이언트가 요청한 origin과 응답으로 받은 Access-Control-Allow-Origin이 동일하다면 CORS 정책에 따라 사용 가능한 리소스가 됨.
    4. 3번에서 두 origin이 다른 경우 CORS 에러를 생성.

Preflight

  • CORS 정책을 지원하는 최신 브라우저는 Ajax 혹은 API 요청 등을 보낼 때 예비(preflight) 요청을 보냄.
  • 클라이언트는 OPTIONS라는 HTTP method를 통해 요청을 보내고, 이를 통해 서버와의 통신에 대한 정보를 확인.

CORS 문제가 생겼을 때 해결법

  1. 크롬 확장 프로그램을 통해 응답의 헤더에 자동으로 Access-Control-Allow-Origin: *를 추가.
  2. 프록시 서버를 통해 대리 요청을 진행.
  3. 응답을 보내는 서버에서 직접 Access-Control-Allow-Origin 부분을 설정.

References

  1. https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
  2. https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F