sitelink1 | http://blog.naver.com/ljpark6/220808864807 |
---|---|
sitelink2 | |
sitelink3 | |
sitelink4 | |
extra_vars4 | |
extra_vars5 | |
extra_vars6 |
한 자원이 자신이 호스팅되는 출처(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
댓글 0
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
177 | CORS(Cross-Origin Resource Sharing) - 3 | 황제낙엽 | 2017.03.07 | 45 |
» | CORS(Cross-Origin Resource Sharing) - 2 | 황제낙엽 | 2017.03.07 | 24 |
175 | CORS(Cross-Origin Resource Sharing) - 1 | 황제낙엽 | 2017.03.07 | 135 |
174 | Jasmine 테스트 및 CI 구축 가이드 | 황제낙엽 | 2016.11.16 | 254 |
173 | QUnit을 이용한 JavaScript 단위 테스트 | 황제낙엽 | 2016.11.16 | 36 |
172 | code compressor & decompressor | 황제낙엽 | 2015.01.02 | 181 |
171 | 멤버 연산자 | 황제낙엽 | 2014.12.30 | 47 |
170 | 연산자 this | 황제낙엽 | 2014.12.30 | 23 |
169 | typeof 와 instanceof의 차이, 타입 또는 클래스 구분하기 | 황제낙엽 | 2013.10.24 | 38 |
168 | 링크모음 | 황제낙엽 | 2011.03.25 | 25 |
167 | 개요 | 황제낙엽 | 2009.03.11 | 28 |
166 | XMLHttpRequest.setRequestHeader | 황제낙엽 | 2013.09.30 | 62 |
165 | HTTP Content-Type 정리 | 황제낙엽 | 2013.09.30 | 68 |
164 | getBoundingClientRect in FF3 | 황제낙엽 | 2013.01.11 | 36 |
163 | 연속해서 스트림 받기 (flush data from servlet to jsp with ajax) | 황제낙엽 | 2013.01.04 | 2428 |
162 | Stack (스택) 예제 프로그램 | 황제낙엽 | 2012.12.27 | 27 |
161 | 상속과 Super 로의 접근 | 황제낙엽 | 2012.09.18 | 64 |
160 | inherits() 를 이용한 상속 | 황제낙엽 | 2012.07.18 | 129 |
159 | Javascript delete | 황제낙엽 | 2012.06.11 | 20 |
158 | delete 연산자에 대한 고찰 | 황제낙엽 | 2012.06.11 | 42 |