CORS / Preflight 란 무엇인가?

CORS에 대한 이해 🌐

CORS (Cross-Origin Resource Sharing)란 웹 브라우저가 사용하는 보안 방식 중 하나로, 다른 도메인에서 자원을 공유할 수 있도록 허용하는 규약입니다.

 

이전에는 동일 출처 정책(Same Origin Policy)이 적용되어 한 도메인에서 로드한 문서나 스크립트에서 다른 도메인의 자원을 요청할 경우, 보안상의 이유로 브라우저에서 차단되었습니다. 하지만, CORS는 서로 다른 도메인 간의 자원 공유를 허용하여 이러한 문제를 해결할 수 있게 됐습니다.

 

CORS의 구체적인 동작 방식은 HTTP 헤더를 통해 이루어집니다. 웹 애플리케이션에서 다른 도메인의 자원을 요청할 때, 브라우저는 먼저 해당 도메인의 서버에 preflight 요청을 보냅니다. 서버는 이 요청에 대한 응답으로 Access-Control-Allow-Origin과 같은 헤더를 보내주어 요청이 허용되는지 여부를 판단합니다.

 

하지만, CORS는 보안적인 이유에서 브라우저에서만 동작하며, 서버 측에서는 따로 처리해주어야 합니다. 이를 위해 서버에서는 다양한 설정을 해주어야 하며, 이를 잘못 구성하면 보안상의 문제가 발생할 수 있습니다.

따라서, 웹 개발자는 CORS에 대한 이해와 적절한 설정이 필요합니다.

 

 

CORS 처리 방법

CORS 요청/응답 프로토콜은 아래와 같습니다.

1. 브라우저에서 다른 도메인에 요청을 보낼 때 preflight 요청을 보냅니다. 이 요청은 OPTIONS 메서드로 보내지며, Access-Control-Request-* 헤더를 포함합니다.
2. 서버는 preflight 요청에 대한 응답으로 Access-Control-Allow-* 헤더를 포함한 응답을 보냅니다.
3. 브라우저는 preflight 요청에 대한 응답을 받으면, 실제 요청을 보냅니다. 이때는 실제 요청 메서드와 함께 Access-Control-Request-* 헤더를 포함합니다.
4. 서버는 실제 요청에 대한 응답으로 Access-Control-Allow-* 헤더를 포함한 응답을 보냅니다.

Access-Control-Allow-Origin 헤더는 다른 도메인에서의 요청을 허용할 도메인을 설정합니다. Access-Control-Allow-Credentials 헤더는 쿠키와 같은 인증 정보를 전송할 수 있는지 여부를 설정합니다. Access-Control-Expose-Headers 헤더는 브라우저에서 접근 가능한 헤더를 설정합니다.

이러한 헤더들은 서버 측에서 설정하여야 하며, 이를 통해 CORS 요청을 처리할 수 있습니다.

Preflight 요청이 발생하는 조건

요청 메서드	GET, POST, HEAD
요청 헤더	Accept, Accept-Language, Content-Language, Content-Type (일부 제외)
요청 컨텐츠	application/x-www-form-urlencoded, multipart/form-data, text/plain (Content-Type이 해당 포맷으로 설정된 경우)
응답 헤더	Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma
응답 컨텐츠	모든 타입

위와 같이 위 조건이 모두 만족하지 않는 다면, Preflight 요청을 통해 현재 호스트가 해당 서버 리소스에 접근할 수 있는지 요청한 후, 요청이 승인된 경우 실제 데이터를 전송하여 요청한다.

 

반대로, 위 조건이 만족하는 경우 Preflight 가 아닌, Simple Request 방식으로 서버에 요청한다.