[WEB] CORS(Cross Origin Resource Sharing) 개념

 

CORS(Cross Origin Resource Sharing)가 필요한 경우

Node.js dev 모드로 웹을 api 서버와 달리 개발할 때, 크롬 개발자도구 콘솔에서 에러를 뿜어낼 때가 있다.

CORS CORS CORS... 정체가 무엇일까?

그림1_CORS_에러_출처: https://fdezromero.com/cors-errors-in-ionic-apps/

 

CORS(Cross Origin Resource Sharing)는 Front, Back 개발자 모두 기본적으로 알아야하는 웹 지식 중 하나이다.

Web은 보안상 이슈의 이유로 동일 출처 정책(Same Origin Policy)을 사용해오고 있다. 즉, 클라이언트가 HTTP 요청시, 자신의 출처(도메인, 프로토콜, 포트)가 같아야 함을 의미한다.

하지만, 웹 개발의 복잡성이 더해지면서, SOP를 지켜가며 구현하기란 쉽지 않은 일이다. 수요가 있으면, 공급이 있듯, jsonp와 같은 우회적 방법이 있지만, W3C는 CORS라는 기술 표준을 제안하게 되었다. 이제 개발자는 추가적인 HTTP 헤더를 통해 다른 출처의 자원을 손쉽게 접근할 수 있게 되었다.

 

그림2_CORS_출처:  https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

위의 그림의 파란색 박스에서 볼 수 있듯이, 첫 번째로 클라이언트로부터 Web server로의 GET domain-a.com/layout.css, domain-a.com/image.png 요청들은 같은 Origin(domain-a.com)이기 때문에 정책으로부터 자유롭다.

하지만, 앞서 이야기했듯이 웹어플리케이션을 개발하면서 다양한 이유로 다른 도메인에 데이터를 요청하는 경우(빨간색 박스)가 생긴다.

예를 들어, api 서버는 다른 언어로 짜여진 서버(domain-b.com)를 사용하지만, ui 개발 시에는 node dev 서버(domain-a.com)로 개발할 때가 흔할 것으로 보인다. 이 경우, CORS를 통해 해결해야 한다.

 

---

Simple request(단순 요청)

해결하는 방법을 찾을 때, 쉽게 이해할 수 있는 방법부터 배우는 것도 좋은 접근이다.

따라서, 이 포스트에서는 Simple request를 다룰 계획이다.

 

아래의 조건(Conditon)을 충족하는 경우, Simple request를 통해 CORS 이슈를 해결할 수 있다.

- GET, POST, HEAD Method

- Custom header 불가

- Connection 또는 User-Agent 처럼 자동적으로 세팅되는 것 이외에 사용자가 직접 세팅할 수 있는 Header 종류

  -  Accept

  -  Accept-Language

  -  Content-Language

  -  Content-Type

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

그림3_CORS_단순요청_출처:  https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

//CODE1

const xhr = new XMLHttpRequest();
const url = 'https://bar.other/resources/public-data/';
   
xhr.open('GET', url);
xhr.onreadystatechange = someHandler;
xhr.send();

 

 

그림(3)과 위의 <<CODE1>>처럼 https://foo.example에서 https://bar.other로 요청한다. 서버에서 http 헤더에 Access-Control-Allow-Origin: *를 response에 추가하여 보내주면, 모든 Origin으로부터의 자원 요청을 허가하게 된다. 웹 개발자 도구에서 네트워크 메뉴 또는 와이어샤크를 통해 데이터 흐름을 보게 되면, 아래처럼 request와 response를 분석할 수 있다.

<<네트워크 결과>>
//GET request (client -> server)

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

//GET response (server -> client)
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…]

 

하지만 보안상 서버에서 foo.example만 허락하고 싶은 경우, 아래처럼 헤더를 세팅해서 보내줄 수 있다.

Access-Control-Allow-Origin: https://foo.example

 

 

---

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

교차 출처 리소스 공유 (CORS)

---

잘못된 정보가 있는 경우 피드백 부탁드립니다.