Curious TechieDev Toolbox
전체 가이드/웹 표준9 min read

CORS 및 동일 출처 정책(SOP)의 동작 원리

교차 출처 리소스 공유(CORS) 완벽 해설: 브라우저 프리플라이트 OPTIONS 요청, 응답 헤더 및 보안 취약점 방지.

핵심 요약 (Key Takeaways)
  • 동일 출처 정책(SOP)은 프로토콜, 호스트, 포트가 다른 출처의 리소스 응답을 읽지 못하도록 브라우저가 차단하는 보안 규칙입니다.
  • CORS는 백엔드 서버가 특정 외부 출처의 요청을 명시적으로 허용할 수 있게 해주는 표준 규격입니다.
  • 복잡한 요청 전송 시 브라우저는 먼저 OPTIONS 프리플라이트 요청을 전송하여 허용 여부를 사전 확인합니다.
  • 쿠키나 인증 헤더가 포함된 요청에서는 와일드카드 Access-Control-Allow-Origin: * 설정이 엄격히 금지됩니다.
  • CORS는 전적으로 클라이언트 웹 브라우저가 검증하고 강제하는 보안 메커니즘입니다.

1. 동일 출처 정책(SOP)이란 무엇인가?

동일 출처 정책(Same-Origin Policy / SOP)은 잠재적으로 악의적인 스크립트로부터 사용자를 격리하는 브라우저의 기본 보안 원칙입니다. SOP에 따라 https://bank.com에서 동작하는 자바스크립트는 https://malicious.com의 쿠키나 응답 데이터를 가로챌 수 없습니다.

두 URL은 프로토콜(Scheme), 호스트(도메인), 포트 번호가 모두 일치할 때만 동일 출처로 판정됩니다:

https://api.example.com:443 vs https://example.com:443교차 출처 (서브도메인 불일치)
http://example.com:80 vs https://example.com:443교차 출처 (프로토콜 불일치: HTTP vs HTTPS)
https://example.com/app vs https://example.com/api동일 출처 (경로 차이는 동일 출처로 허용)

2. CORS가 안전한 교차 출처 접근을 허용하는 방식

CORS (교차 출처 리소스 공유)는 웹 서버가 HTTP 응답 헤더를 통해 특정 외부 출처에 대해 데이터 접근 권한을 명시적으로 위임할 수 있도록 하는 완화 메커니즘입니다:

  • Access-Control-Allow-Origin: 접근을 허용할 출처 명시 (예: https://app.curious-techie.com).
  • Access-Control-Allow-Methods: 허용할 HTTP 메서드 목록 (예: GET, POST, PUT, DELETE).
  • Access-Control-Allow-Headers: 클라이언트 요청 시 허용할 헤더 목록 (예: Content-Type, Authorization).
  • Access-Control-Max-Age: 브라우저가 사전 요청(OPTIONS) 결과를 캐시할 유효 시간(초).

3. 사전 요청(Preflight OPTIONS)과 캐싱 전략

JSON 데이터 전송(Content-Type: application/json)이나 인증 토큰 헤더(Authorization: Bearer) 등 단순 요청 범주를 벗어나는 경우, 브라우저는 실제 요청을 보내기 전 HTTP OPTIONS 프리플라이트 요청을 서버로 먼저 전송하여 안전성을 사전 검증합니다.

4. 인증 정보(Cookie)와 와일드카드(*) 설정의 함정

도메인 간 인증 세션을 공유할 때 가장 빈번하게 발생하는 보안 결함:

웹 표준 위반 조합: Access-Control-Allow-Origin: * + Access-Control-Allow-Credentials: true

쿠키나 인증 정보를 포함하도록 설정한 상태에서 와일드카드 *를 지정하면 브라우저는 응답 데이터의 노출을 강력히 차단합니다. 서버는 검증된 구체적인 요청 출처를 헤더에 직접 에코해야 합니다.