CORS (Cross Origin Resource Sharing)

SOP Same Origin Policy

• 원래 같은 출처끼리만 정보 공유를 허용하는 정책
• 서버단에서 일어나는 것이 아니라 브라우저단에서 실행되는 정책 : 즉 서버는 Origin과 상관 없이 정상적인 요청이면 200 OK와 함께 응답. 브라우저가 유효성을 식별하게 됨
• 예외 처리 → CORS (Cross Origin Resource Sharing)

 

CORS (Cross Origin Resource Sharing)

기본적으로 웹 클라이언트 어플리케이션이 다른 출처에 리소스를 요청할 때는 HTTP 프로토콜을 사용하여 요청을 보내는데, 이 때 브라우저는 요청 헤더에 Origin이라는 필드에 출처를 함께 담아 보낸다.

 

서버는 정보를 응답하면서 이 리소스에 접근하는 것이 허용된 출처를 Access-Control-Allow-Origin 필드의 값으로 보내주고, 브라우저가 자신의 Origin과 서버의 Access-Control-Allow-Origin 값을 비교해서 응답의 유효성을 평가한다.

 

 

같은 출처인지 파악하는 방법

• scheme
• host
• port
• 3개가 같은지 확인한다.

http://a.com:8000 과 특정 도메인이 같은 출처인지 파악해보자

//같은 출처가 아니다. scheme이 다르다.
https://a.com:8000

//같은 출처이다.
http://a.com:8000?id=hello

//같은 출처가 아니다. host가 다르다.
https://ab.com:8000

//같은 출처가 아니다. port가 다르다.
http://a.com:7392

 

 

CORS의 동작 방법

1. Preflight Request
   1. 실제 데이터 전송 전에 먼저 외부 접속을 허용하는지 체크를 하기 위해 브라우저 단에서 전송을 미리 해봄
2. Simple Request
   1. 실제 데이터 전송과 Origin Check를 동시에 수행. 근데 조건이 있음
      1. 메소드가 GET, POST, HEAD 여야함
      2. Header로 사용할 수 있는 친구들이 정해져 있음
      3. Content-Type이 정해져 있음
3. Credentialed Request
   1. 요청 + 알파로 인증 정보 요청 까지
   2. same-origin, include, omit

 

CORS 발생 시 해결 방법

• 서버에서 해결하기
  • 응답을 보낼 때, Access-Control-Allow-Origin 헤더 값에 알맞는 값을 세팅한다.
  • 프레임워크 등에서 이를 세팅해주는 미들웨어를 활용할 수 있다.
• 클라이언트(브라우저)에서 해결하기
  • 웹 브라우저 실행 옵션이나 플러그인을 설정으로 동일 출처 정책을 우회한다.
  • jsonp 방식으로 json 데이터 가져오기
    • 자바스크립트 파일이나 css 파일은 동일 출처 정책에 영향을 받지 않고 가져올 수 있다.
    • 이를 이용하여 자바스크립트 파일을 가져와서 이를 json 형식으로 파싱해 데이터를 사용할 수 있다.