CORS

CORS(Corss-Origin Resource Sharing, 교차 출처 리소스 공유)는 한 사이트에서 실행 중인 웹 애플리케이션이 다른 사이트의 자원에 접근 할 수 있는 권한을 부여하도록 브라우저에게 알려주는 정책이다.

example-a.com 사이트가 있다고 가정해보자. 사용자는 웹 브라우저를 이용해서 example-a.com 사이트에 접근했다. 그런데 example-a.com은 image-gen.com으로 부터 생성된 이미지를 서비스 하고 있다. 이 경우 웹 브라우저는 image-gen.com의 이미지의 접근을 거부한다.

웹 브라우저는 인터넷에 공개된 웹 사이트에 접근을 하는데, 기본적으로 어떤 웹 사이트든 접근을 할 수 있다. 완전히 열린 환경이기 때문에 사용자의 중요 정보(access token, cookie등)이 중간자에 의해서 노출 되거나 다른 사이트로 전송이 되는 등의 여러 보안 취약점이 존재한다.

이러한 문제를 해결하기 위해서 웹 브라우저는 기본적으로 "same-origin-policy" 정책을 사용한다. 웹 브라우저가 어떤 사이트에 접근한 경우, 원본(Origin) 자원(CSS, javascript, 이미지)만을 가져올 수 있또록 한 것이다. 만약 다른 사이트로 부터 자원을 가져오려고 할 경우 웹 브라우저는 요청을 취소시킨다.

이 방법은 많은 보안 문제를 해결 할 수 있지만, 수많은 사이트의 컨텐츠들이 상호 연결되는 웹에 그대로 적용하기에는 너무 불편한 정책이다. 그래서 다른 사이트로 부터 자원을 허용 하도록 하는 정책을 만들었는데 이를 CORS 라고 한다. 아래는 CORS의 예제다.

웹 브라우저는 domain-a.com에 요청을 보내고 있다. domain-a.com의 자원인 layout.css와 image.png는 same-origin-policy에 따라서 언제든지 읽어올 수 있다. 하지만 domain-a.com의 javascript가 XMLHttpRequest를 사용하여 domain-b.com/data.json을 요청하고 있다. domain-b.com은 다른 사이트의 자원이므로 CORS 정책에 의해서 허용할지, 거부할지가 결정된다. 기본적으로 다른 사이트의 자원은 거부가 되며, 허용하지 않기 위해서는 CORS 정책을 설정해야 한다.

1. domain-a.com 은 domain-b.com의 자원을 클라이언트에 제공하려고 한다.
2. domain-a.com 의 서비스 관리자는 domain-b.com의 자원을 허용하도록 CORS 정책을 설정한다.
3. 이제 domain-a.com에 접근한 웹브라우저는 CORS 정책에 따라서 domain-b.com의 자원에 접근 할 수 있다.

CORS 정책 적용 방법

클라이언트와 서버간에 CORS 헤더를 주고 받는 것으로 권한을 처리 할 수 있다.

클라이언트(웹 브라우저)가 Origin 헤더를 이용해서 서버에게 foo.example의 자원에 접근해도 되는지를 묻는다. 서버는 Access-Control-Allow-Origin 헤더에 CORS 정책을 담아서 보낸다. 만약 Access-Control-Allow-Origin: *로 응답 했다면, foo.example.com의 모든 자원을 허용함을 의미한다. 

클라이언트의 요청은 아래와 같다.

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

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

1. 클라이언트가 bar.example 사이트에 접근했다.
2. 그런데 foo.example의의 자원을 요청해야 한다.
3. 클라이언트는 foo.example의 자원이 신뢰 할 수 있는지 알 수 없다.
4. 그래서 Server에게 Origin이 foo.example인 자원을 신뢰 할 수 있니 ? 라고 물어 본다.
5. Server는 foo.example의 모든(*) 자원을 신뢰 할 수 있으니 안심하고 사용하라라고 응답한다.

참고

• 교차 출처 리소스 공유 (CORS)