통신 CORS(Cross-Origin Resource Sharing) - 2

황제낙엽 2017.03.07 18:49 조회 수 : 339

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
 

 

번호 제목 글쓴이 날짜 조회 수
186 두 서버의 자원을 접근하는 클라이언트 프레임웍(Next.js)에서의 CORS오류 file 황제낙엽 2021.12.05 546
185 브라우저의 스크롤을 따라다니는 레이어 두번째 file 황제낙엽 2002.12.20 543
184 Jasmine 테스트 및 CI 구축 가이드 황제낙엽 2016.11.16 542
183 소스 보기 막기 황제낙엽 2005.11.18 542
182 체크박스에 체크된 항목 개수 구하기 황제낙엽 2023.06.10 540
181 Page Refresh/Reload 황제낙엽 2007.08.24 539
180 팝업창을 다시 띄우지 않는 소스 황제낙엽 2005.07.16 535
179 Reference Count (순환참조) 황제낙엽 2011.11.24 534
178 XMLHttpRequest.timeout 황제낙엽 2018.11.03 530
177 자바스크립트 내장 함수 활용하기 황제낙엽 2005.04.25 523
176 문자열에서 역슬래시(backslash) 문자와 유니코드(Unicode)에 대한 고찰 file 황제낙엽 2021.06.03 521
175 XP 에서 input type=text 와 input type=password 의 사이즈가 틀리게 보일때 황제낙엽 2004.08.04 519
174 code compressor & decompressor 황제낙엽 2015.01.02 509
173 CryptoJS 를 이용한 암호화 황제낙엽 2023.02.15 507
172 감추기, 보이기 화면 예제 황제낙엽 2008.04.14 506
171 자바스크립트에서 이벤트 처리에 대한 일련의 흐름 황제낙엽 2008.09.18 503
170 무지개링크 (rainbowlink) file 황제낙엽 2005.07.16 503
169 이미지 로드 코드 황제낙엽 2009.06.27 502
168 (Bard) FileReader 로 여러개의 파일을 read 하는 법 file 황제낙엽 2023.08.23 501
167 Understanding User-Agent Strings 황제낙엽 2011.02.22 499