CORS(Cross-origin resource sharing)
CORS는 브라우저의 보안 정책 중 하나로, 다른 출처의 리소스를 요청하는 경우에 발생할 수 있는 문제를 제어하는 메커니즘입니다.
기본적으로 브라우저는 SOP(Same-Origin Policy)를 따르고 있습니다.
SOP는 동일 출처 정책(Same-Origin Policy)으로 하나의 출처에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘입니다.
출처(Origin): 도메인, 프로토콜, 포트가 통일한 경우에만 동일한 출처로 간주됩니다.
CORS가 발생하는 상황
CORS 오류는 브라우저 정책 위반 즉, 브라우저에서 클라이언트가 다른 출처로 요청을 보내는 상황에서 발생합니다.
- 도메인이 다른 경우 : http://cors.com에서 http://cors.test.com으로 요청을 보내는 경우
- 포트번호가 다른 경우 : http://cors.com:8080 에서 http://cors.com:3000으로 요청을 보낼 때에도 다른 출처로 간주됩니다.
- 프로토콜이 다른 경우 : http://cors.com 에서 https://cors.com으로 요청할 때에도 CORS가 발생합니다.
CORS의 동작 시나리오
Preflight request
Preflight 요청 방식은 웹 브라우저가 요청을 하기 전에 서버에 사전 확인을 요청하는 과정을 말합니다. 브라우저는 OPTIONS 메소드를 사용하여 서버에 미리 요청을 보내고, 서버로부터 해당 요청을 허용할 것인지에 대한 응답을 받을 수 있습니다.
Preflight요청이 발생하는 경우는 다음과 같습니다.
HTTP 메서드: GET, POST, HEAD 이외의 메서드(PUT, DELETE 등)를 사용할 때.
비표준 헤더: 요청에 사용자 정의 헤더 또는 허용된 기본 헤더 이외의 헤더를 포함할 때.
Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain 이외의 미디어 타입을 사용하여 데이터를 전송할 때.
Preflight request 요청 과정
- OPTIONS 요청
브라우저는 서버에 OPTIONS 요청을 보내고, 이 요청에 포함된 헤더를 통해 서버에 본 요청이 허용될 수 있는지 확인합니다.
- 주요 헤더 :
Origin: 요청이 어디서 왔는지(도메인).
Access-Control-Request-Method: 클라이언트가 실제로 사용할 HTTP 메소드.
Access-Control-Request-Headers: 클라이언트가 보낼 커스텀 헤더 목록.
- 서버 응답
서버는 Preflight 요청에 대해 응답하며, 허용되는 메소드와 헤더, 그리고 클라이언트가 접근 가능한지 여부를 알립니다.
- 주요 응답 헤더:
Access-Control-Allow-Origin: 허용된 출처
Access-Control-Allow-Methods: 허용된 HTTP 메소드 목록
Access-Control-Allow-Headers: 허용된 헤더 목록
- 본 요청 실행
서버가 Preflight 요청을 성공적으로 처리하면, 브라우저는 실제 요청(본 요청)을 서버에 보냅니다.
Simple request
Simple request(간단 요청)은 사전 검사(Preflight)를 필요로 하지 않는 요청을 말합니다. 즉, 브라우저가 서버에 요청을 보내기 전에 OPTIONS 메소드로 사전 확인 요청을 보내지 않고 바로 리소스 요청을 처리할 수 있는 요청입니다.
Simple request가 되려면 아래 조건들을 만족해야 합니다.
- HTTP 메소드 :
GET,POST또는HEAD중 하나여야 합니다. - 헤더 : 허용되는 헤더만 포함해야 하며, 다음과 같습니다.
Accept
Accept-Language
Content-Language
Content-Type
Cont-Type인 경우에는application/x-www-form-urlencoded,multipart/form-data,text/plain중 하나여야 합니다. - 본문 타입 : POST 요청의 경우
Content-Type이 제한된 미디어 타입만 사용할 수 있습니다.
Credentialed Request
Credentialed Request은 자격 증명을 포함하는 요청을 의미합니다. 자격 증명은 쿠키, HTTP 인증 헤더, 클라이언트 인증서와 같은 데이터를 포함하고, 이를 통해 서버와 클라이언트 간에 사용자 인증이나 세션 관리가 가능합니다.
일반적으로, 크로스 도메인 요청에서는 브라우저가 자격 증명을 포함하지 않지만 Credentialed Request를 통해 이를 허용할 수 있습니다. 이를 위해서는 클라이언트와 서버 양쪽에서 적절한 설정이 필요합니다.
Credentialed Request의 특징
- 자격 증명 포함 : 요청에 쿠키 또는 인증 정보를 포함해 서버에 인증된 데이터를 보낼 수 있습니다.
- 서버 응답 제한 : 서버는
Access-Control-Allow-Origin헤더에서*를 사용할 수 없으며, 특정 출처만을 정확히 명시해야 합니다. - 브라우저의 안전한 처리 : 브라우저는 자격 증명이 포함된 요청을 처리할 때, 반드시 보안에 유의하여 서버가 자격 증명을 허용하는지 확인합니다.
Credentialed Request의 요청 과정
- 클라이언트 요청
브라우저에서
credentials: 'include'설정을 통해 자격 증명을 포함한 요청을 서버에 보내며, 이 요청에는 쿠키, HTTP 인증 정보 등이 포함될 수 있습니다. - 서버 응답
서버는 요청을 수신한 후, 자격 증명을 허용하는지 여부를 판단하고, 허용할 경우 응답에
Access-Control-Allow-Credentails : true헤더를 포함시킵니다. 동시에Access-Control-Allow-Origin에 명시된 출처와 요청의Origin이 일치해야합니다. - 브라우저 처리
브라우저는 서버의 응답을 확인하고, CORS 관련 헤더가 올바르게 설정되어 있으면 응답을 처리하고 클라이언트에 데이터를 반환힙니다. 반약 자격 증명 관련 헤더가 없거나,
Access-Control-Allow-Origin에*가 설정되어 있으면 브라우저는 응답을 차단합니다.
CORS가 발생하는 이유
CORS 오류는 브라우저가 보안을 위해 동일 출처 정책을 강제하기 때문에 발생합니다. 이를 통해 크로스 사이트 스크립팅(XSS)이나 크로스 사이트 요청 위조(CSRF) 같은 보안 위협을 방지할 수 있습니다.
브라우저는 서버의 응답에 Access-Control-Allow-Origin 헤더가 포함되지 않으면, 다른 출처에서 온 요청을 차단합니다. 이 정책에 따라, 허용되지 않은 출처에서 리소스에 접근하려는 경우에 CORS 오류가 발생합니다.
CORS 해결 방법
CORS는 브라우저 보안 정책이기 때문에 서버에서 외부 페이지로 리소스 요청을 보낼 경우에는 CORS 오류가 발생하지 않습니다.
외부의 요청에 대한 CORS를 허용하기 위해서는 HTTP응답 헤더에 Access-Control-Allow-Origin을 설정해야 합니다.
