S3 CORS

CORS (Cross-Origin Resource Sharing, 크로스 오리진 리소스 공유)

1. CORS란?

CORS는 웹 브라우저의 보안 정책 중 하나로, 한 웹사이트에서 다른 도메인의 리소스를 요청할 때 발생하는 교차 출처 요청(Cross-Origin Request)을 제어하는 메커니즘이다.

즉, 출처(Origin)가 다른 리소스에 대한 접근을 허용할지 여부를 서버가 결정한다.

---

2. 오리진(Origin)의 개념

오리진(Origin)은 세 가지 요소로 구성된다.

• 프로토콜(Scheme): http, https
• 호스트(Host): example.com, sub.example.com
• 포트(Port): 80, 443, 3000 (포트를 명시하면 다를 수도 있음)

두 요청의 오리진이 같다고 판단되는 조건

✅ 프로토콜, 호스트, 포트가 모두 같아야 한다.

예제	오리진 동일 여부	설명
https://example.com:443/app1 vs https://example.com:443/app2	✅ 동일	체계(https), 호스트(example.com), 포트(443)가 모두 동일
https://example.com:443/app1 vs http://example.com:80/app2	❌ 다름	프로토콜(https vs http)이 다름
https://example.com:443/app1 vs https://sub.example.com:443/app2	❌ 다름	호스트(example.com vs sub.example.com)가 다름
https://example.com:443/app1 vs https://example.com:3000/app2	❌ 다름	포트(443 vs 3000)가 다름

---

3. CORS가 필요한 이유 (브라우저 보안 정책 - SOP)

웹 브라우저는 SOP(Same-Origin Policy, 동일 출처 정책)을 적용하여,

🚫 출처가 다른 도메인에서 온 요청을 기본적으로 차단한다.

✅ 하지만, 특정한 경우 교차 출처 요청이 필요할 수 있다.

예를 들어,

• https://example.com에서 https://api.example.com에 AJAX 요청
• https://my-frontend.com에서 https://external-api.com의 데이터를 가져오기
• 브라우저에서 AWS S3의 리소스를 요청

➡ 이때 CORS를 통해 허용된 출처에서만 접근을 허용하도록 설정할 수 있다.

---

4. CORS 작동 방식 (핵심 흐름)

1️⃣ 클라이언트(웹 브라우저)가 교차 출처 요청을 보냄.

2️⃣ 서버가 CORS 정책을 확인하고, 허용된 출처인지 판단.

3️⃣ ✅ 허용된 경우: 브라우저가 요청을 처리함.

🚫 허용되지 않은 경우: 브라우저가 요청을 차단함.

① 단순 요청 (Simple Request)

• GET 또는 POST 요청 (특정 조건 충족)
• 특별한 CORS 검증 없이 바로 요청 처리

✅ 요청 예시 (GET 요청)

GET /data HTTP/1.1
Host: api.example.com
Origin: https://frontend.com

✅ 서버 응답 (CORS 허용됨)

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.com

➡ 브라우저는 Access-Control-Allow-Origin 헤더를 확인하고 요청을 허용

---

② 프리플라이트 요청 (Preflight Request)

📌 안전하지 않은 요청(예: DELETE, PUT, 커스텀 헤더 포함)일 경우 브라우저가 미리 확인 요청을 보냄.

📌 OPTIONS 메서드를 사용하여 먼저 허용 여부를 확인한 후 본 요청을 진행

✅ 프리플라이트 요청 (OPTIONS 요청)

OPTIONS /data HTTP/1.1
Host: api.example.com
Origin: https://frontend.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: X-Custom-Header

✅ 서버 응답 (CORS 허용됨)

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, DELETE
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 86400

➡ 브라우저가 허용 응답을 확인하고, 이후 실제 요청을 진행

---

5. CORS와 AWS S3

AWS S3에 CORS 설정을 적용하면 특정 오리진에서 S3 버킷에 접근을 허용할 수 있다.

예를 들어, https://my-frontend.com에서 S3의 이미지 파일을 불러올 때 CORS가 필요할 수 있다.

✅ S3 CORS 설정 예시 (JSON)

[
  {
    "AllowedOrigins": ["https://my-frontend.com"],
    "AllowedMethods": ["GET", "POST", "PUT"],
    "AllowedHeaders": ["*"]
  }
]

➡ 이렇게 설정하면 https://my-frontend.com에서만 S3 리소스를 사용할 수 있음.

---

6. CORS는 보안 프로토콜인가?

🔴 아니다!

• CORS는 보안 기능이 아니라, 교차 출처 요청을 허용할지 서버가 결정하는 정책이다.
• 보안 기능이 아니라 웹 브라우저의 SOP(동일 출처 정책)를 우회할 수 있도록 하는 제어 메커니즘이다.
• 잘못 설정하면 보안 취약점이 발생할 수 있다!
  • 예: Access-Control-Allow-Origin: * (모든 출처 허용) → 보안 위험 🚨

---

7. CORS 설정 시 주의할 점

1️⃣ *"Access-Control-Allow-Origin: "을 무분별하게 사용하지 말 것

• API가 민감한 데이터를 포함할 경우 모든 오리진에서 접근 가능하게 하면 보안 위험 발생.
  2️⃣ 민감한 요청(예: 인증 정보 포함)은 Access-Control-Allow-Credentials: true 필요
  3️⃣ 프리플라이트 요청이 과도하게 발생하지 않도록 Access-Control-Max-Age 설정
  4️⃣ 불필요한 HTTP 메서드나 헤더 허용을 최소화할 것

---

정리

CORS 개념	설명
SOP (동일 출처 정책)	기본적으로 다른 오리진에서의 요청을 차단하는 웹 브라우저 보안 정책
CORS (교차 출처 리소스 공유)	SOP를 우회하여 특정 오리진의 요청을 허용하는 방법
오리진(Origin) 비교 방식	프로토콜(Scheme), 호스트(Host), 포트(Port)
CORS 요청 유형	단순 요청 (Simple Request), 프리플라이트 요청 (Preflight Request)
AWS S3 CORS 활용	특정 도메인에서 S3 리소스를 불러올 수 있도록 설정
보안 고려 사항	Access-Control-Allow-Origin: * 남발 금지, 민감한 요청은 Access-Control-Allow-Credentials: true 활용

---