HTTP 보안: CORS (Cross-Origin Resource Sharing)

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 는 웹 보안 메커니즘 중 하나로, 다른 출처(origin)에서 온 요청을 허용하거나 제한하는 방식을 정의합니다.

기본적으로 웹 브라우저는 동일 출처 정책(Same-Origin Policy) 을 적용하여, 한 도메인에서 로드된 웹 페이지(JavaScript 코드)가 다른 도메인의 리소스에 직접 접근하지 못하도록 차단합니다.

그러나, 현대 웹 애플리케이션에서는 서로 다른 서버(API 서버, 인증 서버, CDN 등)와 데이터를 주고받는 경우가 많아 이러한 제한이 불편할 수 있습니다.
CORS는 이러한 데이터 공유를 안전하게 허용할 수 있도록 도와주는 HTTP 프로토콜 기능입니다.

---

1. CORS의 필요성

✅ 1) 동일 출처 정책(Same-Origin Policy, SOP)이란?

웹 보안에서 동일 출처 정책(SOP) 은 악의적인 스크립트가 사용자 정보를 탈취하는 것을 방지하기 위해 도입된 보안 원칙입니다.
출처(Origin) 란 프로토콜(Protocol), 도메인(Domain), 포트(Port) 의 조합을 의미하며, 이 세 가지 중 하나라도 다르면 다른 출처로 간주됩니다.

📌 예제 (출처 비교 예시)

요청 URL	출처(Origin)	동일 출처 여부
https://example.com	https://example.com	✅ 동일 출처
https://api.example.com	https://example.com	❌ 다른 출처
http://example.com	https://example.com	❌ 다른 출처 (프로토콜 다름)
https://example.com:3000	https://example.com	❌ 다른 출처 (포트 다름)

🔴 SOP로 인해 기본적으로 다른 출처의 리소스 요청은 차단됨.
🟢 CORS를 통해 특정 출처에 한하여 데이터를 공유할 수 있도록 허용 가능.

---

2. CORS 작동 원리

✅ 1) HTTP 헤더를 이용한 CORS 설정

CORS는 서버가 응답 헤더를 설정하여 특정 출처에서의 요청을 허용할지 결정하는 방식으로 동작합니다.
클라이언트(웹 브라우저)가 서버에 요청을 보낼 때, 서버가 CORS 관련 응답 헤더를 포함하면 브라우저가 요청을 허용하고,
그렇지 않으면 CORS 오류를 발생시키며 차단합니다.

📌 주요 CORS 관련 HTTP 응답 헤더

헤더	설명
Access-Control-Allow-Origin	요청을 허용할 출처 지정 (* 사용 시 모든 출처 허용)
Access-Control-Allow-Methods	허용할 HTTP 메서드(GET, POST, PUT 등) 지정
Access-Control-Allow-Headers	클라이언트가 요청 시 사용할 수 있는 헤더 지정
Access-Control-Allow-Credentials	쿠키, 인증 정보 포함 여부(true 설정 시 허용)

---

3. CORS 예제

✅ 1) CORS가 설정되지 않은 경우

프론트엔드(React, Vue, Angular)에서 API 요청 시도

fetch("https://api.example.org/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("CORS 오류 발생:", error));

서버 응답 (CORS 미설정 시)

HTTP/1.1 403 Forbidden
Content-Type: text/plain
CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

📌 결과:
🔴 브라우저는 동일 출처 정책(SOP)에 의해 요청을 차단하고, CORS 오류를 발생시킴.

---

✅ 2) 서버에서 CORS 허용 (단일 출처 허용)

서버 응답에서 CORS 허용 헤더 추가

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

📌 설명:

• Access-Control-Allow-Origin: https://example.com → https://example.com에서 온 요청만 허용.
• Access-Control-Allow-Methods: GET, POST → GET과 POST 메서드만 허용.
• Access-Control-Allow-Headers: Content-Type → 클라이언트가 Content-Type 헤더 포함 가능.

🟢 결과:

• https://example.com에서 API 요청 시 성공.
• https://another-site.com에서 요청하면 여전히 차단됨.

---

✅ 3) 모든 출처에서 요청 허용 (* 사용)

서버 응답에서 모든 출처 허용 (* 사용)

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE

📌 설명:

• Access-Control-Allow-Origin: * → 모든 출처에서 API 요청 가능.
• 보안상 민감한 데이터(사용자 정보, 인증 정보)를 다루는 API에서는 사용 금지!

---

4. Preflight Request (사전 요청)

✅ 1) Preflight 요청이란?

CORS 정책에서 브라우저는 특정 조건의 요청에 대해 본 요청을 보내기 전에 사전 요청(OPTIONS 요청)을 보냄.
이를 통해 서버가 해당 요청을 허용할지 미리 확인하고, 허용되지 않는다면 본 요청을 차단합니다.

📌 Preflight 요청 예시 (브라우저 자동 전송)

OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Authorization, Content-Type

📌 Preflight 응답 예시 (서버 응답)

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Authorization, Content-Type

🟢 결과:

• 서버가 OPTIONS 요청을 허용하면 브라우저는 본 요청(GET, POST 등)을 보냄.
• 그렇지 않으면 브라우저가 CORS 오류를 발생시키고 요청을 차단.

---

5. CORS 설정 시 주의사항

✅ 1) 민감한 데이터(API Key, 사용자 정보) 보호
✔ Access-Control-Allow-Origin: * 설정 시 민감한 API 데이터가 노출될 가능성이 있음.
✔ 특정 출처만 허용하도록 설정하는 것이 안전함.

✅ 2) Credential 포함 요청 허용 (withCredentials: true)
✔ 인증이 필요한 요청(쿠키, 토큰 포함)에는 Access-Control-Allow-Credentials: true 필요.

Access-Control-Allow-Credentials: true

✔ 하지만, 이 경우 Access-Control-Allow-Origin: * 설정을 사용할 수 없음.

✅ 3) API Gateway 또는 Reverse Proxy 활용
✔ CORS 문제를 해결하기 위해 Nginx, Apache, API Gateway에서 설정 가능.

location /api/ {
  add_header 'Access-Control-Allow-Origin' 'https://example.com';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}

---

6. 결론

✔ CORS는 보안과 기능성을 조화롭게 유지하기 위한 중요한 HTTP 보안 메커니즘입니다.
✔ 잘못된 CORS 설정은 보안 취약점을 유발할 수 있으므로, 반드시 필요한 출처와 메서드만 허용해야 합니다.
✔ Preflight 요청의 원리를 이해하고 서버 설정을 적절히 구성하면, 원활한 API 통신과 보안을 동시에 유지할 수 있습니다.

💡 올바른 CORS 설정을 통해 안전하고 확장성 높은 웹 애플리케이션을 구축하세요! 🚀