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
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
77 | [펌] TAEYO.NET - JavaScript OOP 스트레칭 | 황제낙엽 | 2009.04.02 | 27 |
76 | Rhino scopes and contexts 에 대한 문서 | 황제낙엽 | 2008.07.18 | 27 |
75 | Fetch API (CORS 극복을 위한 노력) | 황제낙엽 | 2021.12.05 | 26 |
74 | 유용한 자바스크립트 예제 몇가지 (Tree 및...) | 황제낙엽 | 2005.10.20 | 26 |
73 | 링크모음 | 황제낙엽 | 2011.03.25 | 25 |
72 | YUI Logger(Yahoo) 를 동적으로 로드하는 북마크릿 | 황제낙엽 | 2010.10.03 | 25 |
71 | 생성자 체인과 상속 | 황제낙엽 | 2008.08.08 | 24 |
70 | Date객체 - 날짜구하기 | 황제낙엽 | 2008.02.19 | 24 |
» | CORS(Cross-Origin Resource Sharing) - 2 | 황제낙엽 | 2017.03.07 | 24 |
68 | 연산자 this | 황제낙엽 | 2014.12.30 | 23 |
67 | URI 인코딩을 해야 하는 문자들 | 황제낙엽 | 2009.09.02 | 23 |
66 | [펌] 아사페릴의 사생활 - __proto__ 와 construct 와 prototype | 황제낙엽 | 2009.04.02 | 23 |
65 | String xml 파싱 | 황제낙엽 | 2008.11.03 | 23 |
64 | XML+JS 연동 다중셀렉트박스 (1) - <font color="brown">(MS Explorer 전용)</brown> | 황제낙엽 | 2005.12.02 | 23 |
63 | 파이어폭스로 스크립트 디버깅하기 | 황제낙엽 | 2009.01.14 | 22 |
62 | 동적인 언어를 동적으로 호출하기 | 황제낙엽 | 2008.07.14 | 22 |
61 | [펌] TAEYO.NET - JavaScript OOP 코어객체와 prototype를 사용한 객체확장 | 황제낙엽 | 2009.04.02 | 21 |
60 | Object 와 Prototype | 황제낙엽 | 2008.08.08 | 21 |
59 | [펌]자바스크립트에서 객체 생성 방법 | 황제낙엽 | 2008.08.07 | 21 |
58 | 감추기, 보이기 화면 예제 | 황제낙엽 | 2008.04.14 | 21 |