Cross-Origin Resource Sharing : 교차 출처 리소스 공유

 

동일 출처 정책에 의해 다른 출처의 데이터와 소통할 수 없는 문제가 생긴다.

다만 우리는 항상 같은 출처의 데이터만 이용할 수는 없다.

내가 소통하는 실제 서버의 도메인 네임이 다를수도 있고, 혹은 아예 다른 서버와 소통하는 경우도 많을 것이다.

이때 필요한 것이 CORS이다.

 

CORS는 출처가 다른 경우에도 데이터의 교환을 하게 해준다.

이는 HTTP헤더를 추가함으로써 동작한다.

아래는 HTTP헤더를 통해서 CORS 동작이 작동되는 한 예시이다.

 

const xhr = new XMLHttpRequest();
const url = 'https://bar.other/resources/public-data/';

xhr.open('GET', url);
xhr.onreadystatechange = someHandler;
xhr.send();

 

위에서 https://bar.other 라는 출처의 컨텐츠를 호출하고 있다.

이 때 해당 컨텐츠를 호출하는 웹 컨텐츠가 https://foo.example 이라고 하자.

 

 

이때 브라우저의 요청 헤더는 다음과 같다.

GET /resources/public-data/ HTTP/1.1
Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example

 

해당 요청 헤더는 당연히 Origin을 통해 https://foo.example에서 요청이 들어오고 있음을 나타내고 있다.

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[…XML Data…]

 

서버는 이에 대한 응답으로 Access-Control-Allow-Origin 헤더를 다시 전송하게 된다.

이때 *은 모든 출처로부터의 요청을 허용한다는 의미로, 다른 출처를 가진 https://foo.example에서의 요청도 허용하게 되어서 동일 출처 정책을 우회할 수 있게 해주는 것이다.

 

만약 해당 헤더가 

Access-Control-Allow-Origin: https://foo.example

 

를 가지고 있다면 오직 https://foo.example에서만 요청을 성공적으로 할 수 있게 된다.