한 자원이 자신이 호스팅되는 출처(Origin Server)와 다른 출처의 자원을 요청하게 될 때, Cross-origin HTTP 요청이 발생한다. 한 가지 예로, http://domain-a.com에 있는 HTML 문서에서 <img> src 속성을 통해 http://domain-b.com/image.jpg 이미지를 요청하는 경우를 들 수 있다. 오늘날 많은 웹 페이지들은 CSS 스타일쉬트, 이미지 파일, 스크립트와 같은 자원들을 별도의 출처로부터 읽어온다.
브라우저들은 보안 이슈 때문에 스크립트에서 발생시키는 Cross-origin HTTP 요청을 제한한다. 그 예로, XMLHttpRequest 는 동일 출처 정책(Same-origin Policy)을 준수하기 때문에, XMLHttpRequest는 동일 출처에만 HTTP 요청을 보낼 수 있었다. 그래서, 웹 개발자들은 더 나은 웹 어플리케이션을 위해 브라우저 제조사들에게 XMLHttpRequest가 Cross-domain 요청을 할 수 있도록 요구했다.
W3C Web Applications Working Group 은 이에 새로운 Cross-Origin Resource Sharing (CORS) 모델을 제안한다. CORS를 사용하면, 안전한 Cross-domain 데이터 전송이 가능한 Cross-domain 접근 제어를 할 수 있다. 현대 브라우저는 CORS를 XMLHttpRequest 같은 API Container 형태로 사용하여 Cross-origin HTTP 요청의 위험을 줄이고 있다.
1: GET /resources/public-data/ HTTP/1.1
2: Host: bar.other
3: User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1. 9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
4: Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
5: Accept-Language: en-us,en;q=0.5
6: Accept-Encoding: gzip,deflate
7: Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
8: Connection: keep-alive
9: Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
10: Origin: http://foo.example
13: HTTP/1.1 200 OK
14: Date: Mon, 01 Dec 2008 00:23:53 GMT
15: Server: Apache/2.0.61
16: Access-Control-Allow-Origin: *
17: Keep-Alive: timeout=2, max=100
18: Connection: Keep-Alive
19: Transfer-Encoding: chunked
20: Content-Type: application/xml
21:
22: [XML Data]
라인 1 - 10은 Firefox 3.5에서 보낸 HTTP 요청 헤더이다. 라인 10의 Origin 헤더를 통해 도메인 "http://foo.example" 상의 웹문서로부터 이 HTTP 요청이 왔음을 알 수 있다.
라인 13 - 22는 도메인 "http://bar.other"에서 전달한 HTTP 응답을 보여준다. HTTP 응답에서 서버는 Access-Control-Allow-Origin: 헤더를 전달하고 있다. Origin: 헤더와 Access-Control-Allow-Origin: 헤더의 사용은 가장 단순한 HTTP 접근제어 방식이다. 위 예제의 "Access-Control-Allow-Origin: *"는 해당 자원은 어떤 도메인에서도 Cross-site 방식으로 접근 가능함을 의미한다. 만약, "http://bar.other" 자원 소유주가 해당 자원을 "http://foo.example"에서 전달되는 Cross-site 접근만을 허용하려면 아래와 같이 응답하면 된다:
Access-Control-Allow-Origin: http://foo.example
