[Network] CORS: Same-Origin Policy, preflight, credentials

CORS, Cross-Origin Resource Sharing, Same-Origin Policy, preflight, OPTIONS request, Access-Control-Allow-Origin

정의

CORS (Cross-Origin Resource Sharing) 는 Same-Origin Policy (SOP) 의 완화 메커니즘. 브라우저가 origin 이 다른 리소스에 조건부로 접근 할 수 있게 한다.

Origin = scheme + host + port

URL	Origin
https://app.example.com/page	https://app.example.com
https://app.example.com:443	https://app.example.com (default port)
http://app.example.com	http://app.example.com (scheme 다름)
https://api.example.com	https://api.example.com (host 다름)

Simple Request vs Preflight

flowchart TD
    Q{요청이 Simple?}
    Q -->|예| S[즉시 보냄]
    Q -->|아니오| P[OPTIONS preflight 먼저]
    S --> CHECK1[응답의 ACAO 검증]
    P --> CHECK2[preflight 응답 검증]
    CHECK2 -->|허용| Send[실제 요청 전송]
    CHECK2 -->|거절| Block[브라우저 차단]

Simple Request 조건 (모두 만족):

• Method: GET, HEAD, POST
• 헤더: 안전한 헤더 + Content-Type: application/x-www-form-urlencoded | multipart/form-data | text/plain
• 이벤트 listener 없음 (XHR upload)
• ReadableStream body 없음

→ 위 조건 하나라도 어기면 preflight. JSON Content-Type: application/json 도 preflight 유발.

Preflight 흐름

sequenceDiagram
    autonumber
    participant B as Browser
    participant S as Server

    B->>S: OPTIONS /api/users<br/>Origin: https://app.example.com<br/>Access-Control-Request-Method: POST<br/>Access-Control-Request-Headers: content-type, authorization
    S-->>B: 204 No Content<br/>Access-Control-Allow-Origin: https://app.example.com<br/>Access-Control-Allow-Methods: GET, POST, DELETE<br/>Access-Control-Allow-Headers: content-type, authorization<br/>Access-Control-Max-Age: 86400
    Note over B: 캐시 (Max-Age)
    B->>S: POST /api/users<br/>Origin: https://app.example.com<br/>Content-Type: application/json<br/>{...}
    S-->>B: 201 Created<br/>Access-Control-Allow-Origin: https://app.example.com

Response 헤더 가이드

헤더	의미
Access-Control-Allow-Origin	허용된 origin (하나만 또는 *)
Access-Control-Allow-Methods	preflight 응답에서 허용 method
Access-Control-Allow-Headers	허용 헤더
Access-Control-Expose-Headers	JS 가 읽을 수 있는 응답 헤더
Access-Control-Max-Age	preflight 캐시 (초)
Access-Control-Allow-Credentials	true 면 cookie/Authorization 허용

Credentials (cookie / Authorization)

fetch('https://api.example.com/me', {
  credentials: 'include',   // cookie 보내기
});

이 경우 서버는 반드시:

Access-Control-Allow-Origin: https://app.example.com   ← * 불가능!
Access-Control-Allow-Credentials: true

흔한 함정

CORS vs CSRF

	CORS	CSRF
본질	cross-origin fetch 허용	cross-origin 의 위조 요청 방어
방향	브라우저 → 서버 허용	브라우저 → 서버 거절
토대	Same-Origin Policy 의 완화	Same-Origin Policy 의 우회 방어
도구	Response 헤더 (ACAO)	CSRF token, SameSite cookie

자세한 건 CSRF 참고.

서버 구현 예시 (Express)

import cors from 'cors';

app.use(cors({
  origin: ['https://app.example.com', 'https://staging.example.com'],
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  exposedHeaders: ['X-Total-Count'],
  maxAge: 86400,
}));

SOP 가 막는 것들

• fetch('https://other.com') 의 응답 읽기
• 다른 origin iframe 의 DOM 접근
• 다른 origin 의 cookie 읽기

SOP 가 막지 않는 것 (CSRF 의 토대):

• <form action="https://other.com"> 의 POST
• <img src="https://other.com/api"> (GET)
• <script src="https://other.com/api"> (실행됨)

관련 위키

• CSRF
• Session Cookie
• JWT
• HTTP/1.1