TIL - 05/17 CORS

CORS 개념

CORS는 Cross-Origin Resource Sharing의 줄임말이다. 도메인 주소가 다른 서버에 http request를 전송해 리소스에 접근할 수 있도록 하는 매커니즘을 말한다. 다른 출처(도메인, 프로토콜 혹은 포트)를 가진 리소스를 요청할 때, 웹 프로그램은 cross-origin http request를 실행한다.

예를 들어, naver.com에서 api.google.com으로 http request를 보내면 CORS가 된다. top level domain, 심지어 포트번호만 틀려도 CORS이다.

ex)

• naver.com이 api.naver.com으로 request를 보내면 CORS로 간주된다
• localhost:5000 이 localhost:8000으로 request를 보내면 CORS로 간주된다

만일 내가 서비스하고 있지 않은 사이트에서 http request를 통해 리소스에 접근이 가능하다면, 보안상의 문제가 발생할 수 있다. 따라서 최신 웹 브라우저들은 보안상의 이유로 자신이 속한 도메인내에서만 서버 요청을 허용하고, 다른 도메인의 서버 요청을 차단한다.

CORS 표준 (The CORS standard)

위 문제를 해결하기 위해 일반화된 CORS 표준이 제안되었다. CORS 표준은 브라우저와 서버에 그들의 권한을 가진 원격 URL을 요청할 수 있는 방법을 제공하는 HTTP 헤더를 정의해준다. 이 헤더에서는 내 origin에 대한 정보, 어떤 http method (GET, POST, PUT, DELETE 등)을 사용해 request를 보낼 것이고 어떤 헤더들을 포함할 것인지를 담는다. 외부 브라우저는 이 헤더를 보고 리소스에 대한 접근을 허용여부를 판단한다.

CORS의 종류

CORS의 종류는 다음 4가지가 있다

• Simple Request
• Preflight Request
• Credential Request
• Non-Credential Request

그 중 Simple Request와 Preflight Request에 대해 알아보자.

• Simple Request : 굳이 CORS로 막을 필요가 없는 simple한 http request다. 이 조건을 충족하려면 다음과 같은 사항을 만족해야 한다

  1. GET, HEAD, POST중 한 가지 method를 사용해야 한다
  2. POST일 경우 Context-type은 다음 조건 중 하나를 만족해야 한다
     • application/x-www=form-urlencoded
     • multipart / from-data
     • text/plain
     • Custom Header를 전송하지 않아야 함

• Preflight Request (사전 요청) : 사전 요청을 보내서 서버가 해당 엔드포인트에 CORS request를 해도 되는지 허락을 받고 난 후에 request를 보내는 방법이다. OPTION 메소드를 사용한다. OPTION 메소드는 웹 서버에서 지원되는 메소드의 종류를 확인할 경우 사용된다. 과정은 다음과 같다

[Request]
OPTIONS /
Host: service.example.com
Origin: http://www.example.com

1. 클라이언트가 OPTIONS request를 보낸다. Origin 헤더에 클라이언트의 도메인 주소값을 넣어준다.

[Respose]
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: PUT, DELETE

2. 요청을 받은 서버는 Access-Controll-Allow-Origin 헤더에 CORS request를 보내도 되는 도메인과 허용되는 http method의 목록을 response한다.