[Web] CORS(Cross-Origin Resource Sharing)

개념

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.

출처란?

도메인(호스트), 프로토콜, 포트가 다를 때 출처가 다르다고 말하며, 이때 교차 출처 HTTP 요청을 실행한다. 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

해결(허용) 방법

XMLHttpRequest와 Fetch API는 동일 출처 정책을 따른다. 즉, 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

전제

https://foo.example 의 웹 컨텐츠가  https://bar.other 도메인의 컨텐츠를 호출하길 원한다. (foo → bar)

방법 1(단순 요청)

Simple requests (출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS)

클라이언트와 서버간에 간단한 통신을 하고, CORS 헤더를 사용하여 권한을 처리한다.

가장 간단한 접근 제어 프로토콜은 Origin 헤더와 Access-Control-Allow-Origin 을 사용하는 것이다. 이 경우 서버는 Access-Control-Allow-Origin: *, 으로 응답해야 하며, 이는 모든 도메인에서 접근할 수 있음을 의미한다.

https://bar.other  리소스 소유자가   오직 https://foo.example 의 요청만 리소스에 대한 접근을 허용하려는 경우 다음을 전송한다. Access-Control-Allow-Origin: https://foo.example

그러면 이제 https://foo.example 이외의 도메인은 corss-site 방식으로 리소스에 접근할 수 없다. 리소스에 대한 접근을 허용하려면, Access-Control-Allow-Origin 헤더에는 요청의 Origin 헤더에서 전송된 값이 포함되어야 한다.

방법 2(프리플라이트 요청)

preflighted requests (출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS)

먼저 OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인한다. (미리 전송하여 확인하는 방법)

• OPTIONS 요청을 보내면 응답에 Allow 헤더가 포함되어 오는데 이를 통해 서버에서 허용되는 메소드를 확인할 수 있다.

Access-Control-Request-Method 헤더는 preflight request의 일부로, 실제 요청을 전송할 때 POST 메서드로 전송된다는 것을 알려준다. 
Access-Control-Request-Headers 헤더는 실제 요청을 전송 할 때 X-PINGOTHER 와 Content-Type 사용자 정의 헤더와 함께 전송된다는 것을 서버에 알려줍니다. 이제 서버는 이러한 상황에서 요청을 수락할지 결정할 수 있다.

preflight request가 완료되면 실제 요청을 전송한다.

방법 3(인증정보를 포함한 요청)

credentialed requests (출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS)

 credentialed requests는 HTTP cookies 와 HTTP Authentication 정보를 인식한다.

요청에는 http://bar.other의 컨텐츠를 대상으로 하는 쿠키가 포함되어 있다. 하지만 Access-Control-Allow-Credentials: true 로 응답하지 않으면, 응답은 무시되고 웹 컨텐츠는 제공되지 않는다.

credentialed request 에 응답할 때 서버는 Access-Control-Allow-Origin 헤더 "*" 와일드카드를 사용하는 대신에 반드시 에 값을 지정해야 한다.

위 요청은 Access-Control-Allow-Origin 헤더가 "*" 와일드 카드가 아니라 "http://foo.example" 본래 주소이기 때문에 자격증명 인식 컨텐츠는 웹 호출 컨텐츠로 리턴된다.

 

참고

• developer.mozilla.org/ko/docs/Web/HTTP/CORS
• developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy