CORS란

CORS 정책 위반 에러는 웹 개발을 하면 누구나 한번쯤은 겪는다. 

CORS란?

CORS는 Cross-Origin Resource Sharing의 약자이며, 직역 했을 경우 교차 출처 리소스 공유라고 합니다. 

웹 브라우저에서 다른 도메인 간에 리소스를 공유할 수 있는 메커니즘을 말합니다.

 

브라우저에서는 보안상의 이유로 브라우저에서 다른 도메인에서 제공되는 리소스에 접근할 수 없도록 제한하고 있습니다. SOP(동일 출처 정책)를 우회하여 다른 도메인에서 제공되는 리소스에 대한 접근을 허용할 수 있도록 하는 방법입니다.

 

여기서 SOP(Same-Origin Policy)란 ?

SOP는 같은 출처에서만 리소스를 공유할 수 있는 규칙을 가진 메커니즘입니다. SOP는 XMLHttpRequest를 통한 다른 출처 차단, 쿠키, 로컬 스토리지 등에 대한 접근 제한, 프레임 간에 통신에 대한 보안 강화 등을 통해 위협을 방지합니다.

 

출처 MDN

XMLHttpRequest 또는 Fetch와 같은 API에서  CORS를 사용하여 http 요청의 위험을 완화합니다.

 

동작 시나리오

Preflight Request

브라우저는 요청을 보낼때 한번에 바로 보내지않고, 먼저 예비 요청을 보내 서버와 잘 통신되는지 확인한 후 본 요청을 보낸다. 

예비 요청의 역할은 본 요청을 보내기 전에 브라우저 스스로 안전한 요청인지 확인.

 

예비 요청은 http 메소드가 아닌 options라는 요청이 사용된다.

 

Simple Request

단순 요청은 말그대로 예비 요청(Prefilght)을 생략하고 바로 서버에 직행으로 본 요청을 보낸 후, 서버가 이에 대한 응답의 헤더에 Access-Control-Allow-Origin 헤더를 보내주면 브라우저가 CORS정책 위반 여부를 검사하는 방식이다.

 

단순 요청은 다음 조건을 모두 충족하는 요청

1. 요청의 메소드는 GET, HEAD, POST 중 하나여야 한다
2. .Accept, Accept-Language, Content-Language, Content-Type, Range 헤더일 경우 에만 적용된다.
3. Content-Type 헤더가 application/x-www-form-urlencoded, multipart/form-data, text/plain중 하나여야한다. 아닐 경우 예비 요청으로 동작된다.

 

Credentialed Request

 다른 출처 간 통신에서 좀 더 보안을 강화하고 싶을 때 사용하는 방법.

 

기본적으로 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다. 이때 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션이다.

이 옵션은 총 3가지 값을 사용할 수 있다.

• same-origin (기본값) : 같은 출처 간 요청에만 인증 정보를 담는다.
• include : 모든 요청에 인증 정보를 담는다.
• omit : 모든 요청에 인증 정보를 담지 않는다.

Credentialed Request 특징

• Access-Control-Allow-Origin에는 *을 사용할 수 없고 명시적인 URL을 넣어줘야 합니다.
• 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 있어야 합니다.

자세한 내용은 MDN 문서 참고.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Cross-Origin Resource Sharing (CORS) - HTTP | MDN