CORS란

Overview

  개발자는 아니지만 업무를 하다가 아래와 같은 에러 메시지를 직면했었다. Splunk의 dashboard에서 JavaScript를 이용해 다른 시스템과 연결해보는 작업을 하다가 만난 에러였는데 결국은 CORS policy에 의해서 접근이 막혔다라는 내용 정도만 확인할 수 있었다.

그래서 CORS의 약자를 검색해보니 Cross-Origin Resource Sharing (CORS)였다. 다른 origin (출처)의 자원을 공유한다는게 무슨말일까? 해당 개념에 대해 검색하면 항상 같이 나오는 Same Origin Policy (SOP)는 무엇일까? 

Same Origin Policy (SOP)란?

  SOP는 웹 어플리케이션의 보안 모델의 중요한 개념이다. 정책에 따라 웹 브라우저는 첫 웹 페이지에 포함된 스크립트가 두 번째 웹 페이지의 데이터에 액세스할 수 있게 허용하는 조건이 두 웹 페이지의 출처가 동일할 때이다. 동일한 출처라는 의미는 아래와 같다. 비교할 URL을 기준으로 "http://www.example.com/dir/page.html 비교한 결과는 아래와 같다. 즉, 동일 origin이란 Protocol, Host 그리고 Port가 같다는 것을 아래표를 보면 알 수 있다. 이 정책을 통해 같은 출처가 아닌 요청은 차단함으로 보안성을 높이는데^* 클라언트와 서버가 다른 origin을 같고 통신이 필요한 경우는 어떻게 할지에 대한 정의를 한 것이 CORS이다. 

* 보안성을 높이는 기본적인 시나리오 - 내가 접속한 facebook.com의 origin과 해커의 hacker.ck라는 origin이 다르기에 내 정보가 탈취되는 것을 막을 수 있게 되는(출처 하단작성) 

Cross-Origin Resource Sharing (CORS)란?

  앞서 이야기한 것처럼 인프라의 규모 (클라이언트, 서버)의 커지면서 동일한 origin에서만 요청을 처리하는 것이 불가능해지고 외부 라이브러리와 사용등의 use case에서 CORS의 정의는 필요하다. 하지만 이 정의는 클라이언트에서는 설정할 수 있는 부분이 없고 서버에서 별도의 정의를 해야한다. 서로 다른 출처의 자원을 공유하는 방법은 HTTP에 추가헤더를 사용하는데 3가지의 시나리오가 있다.

• Simple Request - Preflight 요청없이 바로 요청하는 방법
  1. 사용가능 Method: GET, POST, 그리고 HEAD
  2. 사용가능 Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain
  3. 사용가능 Header: Accept, Accept-Language, Content-Language, Content-Type
• Preflight Request - OPTIONS method를 통해서 요청이 가능한지 여부를 미리 확인 후 실제 요청을 보내는 방법. 200대 status code를 response에 받지 못하면 서버의 설정을 확인해야 함.
  1. Request Header: Origin, Access-Control-Request-Method, Access-Control-Request-Headers
  2. Response Header: Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Max-Age, Access-Control-Expose-Headers

Preflight 요청은 위와 같은 그림으로 진행이 되며 Header에 대한 정보를 조금더 자세히 알아보자. Preflight 요청은 Simple 요청처럼 서버에 바로 실제요청을 하지 않는다. 이 때, Access-Control-Request-Method (GET, POST, PUT, DELETE 중 하나를 선택)하고 Access-Control-Request-Headers에 OPTIONS라는 정보를 넣어 요청한다. 물론, 일종의 간보기용 요청이기 때문에 body의 정보는 비어있다. 이 때, 서버에서 Access-Control-Allow-Origin (어떤 출처가 허용되어 있는지), Access-Control-Expose-Headers (브라우저가 사용할 수 있는 헤더의 리스트), Access-Control-Max-Age (얼마나 오랫동안 preflight 요청이 캐싱가능한지) 등의 정보를 알려준다.

• Credential Request - 인증관련 헤더 정보를 요청할 때 사용하는 방법

 

Reference site: https://velog.io/@frankle97/CORS%EB%9E%80

https://en.wikipedia.org/wiki/Same-origin_policy

https://medium.com/@su_bak/cors%EB%9E%80-f7e1447e97d8

https://fomaios.tistory.com/entry/Network-CORS%EB%9E%80-feat-%EB%B3%B4%EC%95%88HTTP

https://sauravomar01.medium.com/cross-origin-resource-sharing-cors-and-preflight-request-f5d007b382ce