CORS

CORS는 브라우저에서 다른 오리진의 리소스 요청을 허용할지 말지를 HTTP 헤더를 기반으로 결정하는 보안 메커니즘입니다.

 

리소스 예시: 이미지, CSS, JS, 비디오, API 응답 등

 

오리진(Origin)

오리진은 다음 3가지 요소를 합쳐서 정의됩니다:

Origin = Protocol + Hostname + Port
예: https://shopping.naver.com:443

다음 중 하나라도 다르면 다른 오리진으로 간주합니다.

 

SOP (Same-Origin Policy)

 

동일 오리진 정책은 브라우저의 기본 보안 정책으로,
스크립트가 다른 오리진의 리소스에 접근하지 못하도록 제한합니다.

목적

• 악성 스크립트가 사용자의 권한으로 임의로 다른 사이트의 데이터에 접근하는 것 방지
• 쿠키, 세션, 로컬 스토리지 등 민감 정보 보호

예외

• 이미지, 스크립트, 스타일시트 등 일부 정적 리소스는 SOP의 영향을 받지 않음

CORS가 필요한 이유

 

SOP는 보안을 위해 매우 엄격하지만,
현실적으로 다양한 도메인 간 API 호출이 필요한 경우가 많기 때문에
이러한 요구를 수용하기 위해 브라우저에 한해 예외적으로 허용하는 메커니즘이 CORS입니다.

 

CORS 요청 흐름

 

1. 단순 요청 (Simple Request)

• 예: GET, HEAD, POST (단, POST는 Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain일 때만 해당)
• 브라우저는 자동으로 Origin 헤더를 추가해서 요청 전송
• 서버가 응답에 Access-Control-Allow-Origin을 포함하고 있어야 함

2. 사전 요청 (Preflight Request)

• 조건: PUT, DELETE, PATCH 등 안전하지 않은 메서드이거나,
  커스텀 헤더(Authorization, Content-Type: application/json) 사용 시

1. 브라우저가 OPTIONS 메서드로 사전 요청
2. 서버가 이를 허용 (Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Origin 포함)
3. 브라우저가 본 요청을 전송

주요 HTTP 헤더

헤더	설명
Origin	요청을 보낸 출처 (브라우저가 자동 설정)
Access-Control-Allow-Origin	허용할 오리진을 명시 (*은 모든 오리진 허용)
Access-Control-Allow-Methods	허용할 HTTP 메서드 (예: GET, POST, PUT 등)
Access-Control-Allow-Headers	허용할 커스텀 헤더 (예: Authorization 등)
Access-Control-Allow-Credentials	쿠키 및 인증정보 허용 여부 (true/false)
Access-Control-Max-Age	Preflight 요청 결과의 캐시 유지 시간 (초 단위)

 

주의사항

• Access-Control-Allow-Origin은 와일드카드(*)를 사용하면 쿠키 전송은 불가능
  → 쿠키 사용 시 반드시 명시된 도메인 + Access-Control-Allow-Credentials: true 설정 필요
• CORS는 브라우저에서만 적용되는 보안 정책입니다
  (예: 서버 간 통신에는 적용되지 않음)

요약	설명
SOP	브라우저의 동일 출처 정책, 기본적으로 다른 오리진 접근 불가
CORS	SOP의 예외 규칙. 특정 조건 하에 다른 오리진 허용
작동 방식	브라우저가 요청 시 Origin 헤더 포함 → 서버가 허용 여부 결정
보안 목적	악의적인 스크립트로부터 사용자의 민감한 리소스 보호