CORS(Cross Origin Resource Sharing)

 

• 웹 서버에게 보안 cross-domain 데이터 전송을 활성화하는 cross-domain 접근 제어권을 부여한다.
• 추가 HTTP헤더를 사용하여 한 origin에서 실행 중인 웹 어플리케이션이 다른 origin의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

 

출처: https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

---

배경

• 처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다.
• 보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한한다.
  • 예를 들면, XMLHttpRequest는 same-origin 정책을 따르기에 XMLHttpRequest을 사용하는 웹 애플리케이션은 자신과 동일한 도메인으로 HTTP 요청을 보내는 것만 가능했다.
  • 웹 애플리케이션을 개선시키기 위해, 개발자들은 브라우저 벤더사들에게 XMLHttpRequest가 cross-domain 요청을 할 수 있도록 요청했고 이에 따라 CORS가 생겼다.

---

과정

• CORS 요청 시에는 미리 OPTIONS 주소로 서버가 CORS를 허용하는지 물어본다.
• 이때 Access-Control-Request-Method로 실제로 보내고자 하는 메서드를 알리고,
• Access-Control-Request-Headers로 실제로 보내고자 하는 헤더들을 알린다.
• Allow 항목들은 Request에 대응되는 것으로, 서버가 허용하는 메서드와 헤더를 응답하는데 사용된다.
• Request랑 Allow가 일치하면 CORS 요청이 이루어진다.

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

요청 헤더의 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

[…XML Data…]

 

서버는 응답으로 Access-Control-Allow-Origin: * 이라 보낸(*은 모든 모든 도메인에 접근 가능)

Access-Control-Allow-Origin 헤더에는 요청한 origin 헤더가 요청한 값이 있어야 한다.  

---

출처

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

https://github.com/WeareSoft/tech-interview/blob/master/contents/network.md#cors%EB%9E%80