[Browser Security] CORS

* CORS : Cross-Origin Resource Sharing

 

웹브라우저의 기본 정책은 '도메인이 다르면 요청을 주고 받을 수 없다'이다. 이를 동일 출처 정책(SOP)이라고 한다. 

 

유저가 브라우저에 주소값을 입력하면 서버로 요청이 보내지고, 이후 서버에서는 HTML 페이지를 반환해 준다. 이 모든 과정이 같은 도메인에서 일어난다. 과거에는 웹사이트에서 다른 서버로 요청을 보내면 보안상 악의적인 행동(피싱 등)을 하는 것으로 간주되었다. 때문에 브라우저에서는 같은 도메인이 아니면 요청 자체를 막아버렸다. 

 

 

 

 

날씨 API를 이용하는 상황을 생각해보면 그림과 같다. 브라우저에서 웹서버로, 웹서버에서 날씨 API로 요청하는 이중 구조를 가지고 있다. 그냥 바로 브라우저에서 날씨 API를 직접 받아오면 훨씬 간편하지 않을까? 문제가 있다. 도메인이 달라 직접 접근할 수 없는 것이다. 웹의 사용도가 높아지면서, 기존의 보안 정책은 점점 더 불편하게 느껴지게 된다.

 

 

 

이때 등장한 것이 CORS이다. CORS란 웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스펙을 의미한다. 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식이다. 서로 다른 도메인의 리소스 요청을 주고받기 CORS헤더에 관련 정보를 넣어면 도메인이 달라도 정보를 받아올 수 있다.*

 

 

* CORS 동작 방식

 

간단한 요청 (Simple Requests)
- CORS 사전 요청을 발생시키지 않는 요청

- GET, HEAD, POST 중 한 가지 방식을 사용 (POST의 경우 정해진 Content type이 정해진 유형이여야 함)

- Custorm Header가 없음

 

사전 요청 (Preflight Requests)

 

 

- 본 요청을 보내기 전에 사전 요청을 보내 서버가 이에 응답이 가능한지 확인하는 방법

- GET, HEAD, POST 외의 요청 (POST가 정해진 유형의 Content type을 사용하지 않는 경우도 사전 요청 필요)

- 커스텀 헤더가 포함된 경우

 

* References : MDN (https://developer.mozilla.org/ko/docs/Web/HTTP/CORS), Taehoon (https://www.youtube.com/watch?v=yTzAjidyyqs), 우아한Tech (https://www.youtube.com/watch?v=_sLjXviYivM)