[HTTP 보안]CORS

[HTTP 보안]CORS

 

CORS(Cross-Origin Resource Sharing)

**CORS(Cross-Origin Resource Sharing)**는 웹 브라우저에서 한 출처(origin)의 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 제어하는 메커니즘입니다. 기본적으로 브라우저는 **Same-Origin Policy(SOP)**라는 보안 정책을 따르는데, SOP는 다른 출처 간의 리소스 요청을 제한합니다. CORS는 이 제한을 완화할 수 있도록 설계된 표준입니다.

---

CORS가 필요한 이유

웹 애플리케이션은 종종 다른 출처의 API나 리소스(이미지, 글꼴, 데이터 등)에 접근해야 합니다. 예를 들어:

• 클라이언트가 http://example.com에서 실행 중인데, 서버가 https://api.example.com에 있는 경우 SOP가 요청을 차단합니다.
• 이를 해결하기 위해 CORS를 사용하여 서버가 클라이언트의 요청을 허용하도록 설정합니다.

---

작동 원리

CORS는 HTTP 헤더를 통해 동작하며, 요청의 출처와 서버가 허용하는 출처를 비교하여 요청을 승인하거나 거부합니다.

1. CORS 요청의 종류

• 단순 요청(Simple Request)
  • GET, POST, HEAD 메서드를 사용하며, 특정 헤더만 포함된 요청.
  • 브라우저는 요청을 즉시 보냅니다.
• 사전 요청(Preflight Request)
  • 요청이 복잡하거나, 추가 헤더 또는 메서드(PUT, DELETE 등)를 포함하는 경우, 브라우저는 먼저 OPTIONS 메서드로 서버에 요청을 보내 허용 여부를 확인합니다.
  • 서버가 허용하면 실제 요청이 전송됩니다.

---

2. CORS와 관련된 주요 HTTP 헤더

• 클라이언트 요청 헤더
  • Origin: 요청을 보낸 출처를 명시.
    • 예: Origin: https://example.com
• 서버 응답 헤더
  • Access-Control-Allow-Origin: 요청을 허용하는 출처를 명시.
    • 예: Access-Control-Allow-Origin: https://example.com
    • *를 사용하면 모든 출처 허용.
  • Access-Control-Allow-Methods: 허용되는 HTTP 메서드를 명시.
    • 예: Access-Control-Allow-Methods: GET, POST, PUT
  • Access-Control-Allow-Headers: 클라이언트가 사용할 수 있는 헤더를 명시.
    • 예: Access-Control-Allow-Headers: Content-Type, Authorization
  • Access-Control-Allow-Credentials: 자격 증명(쿠키 등)의 포함을 허용할지 여부를 설정.
    • 예: Access-Control-Allow-Credentials: true
  • Access-Control-Max-Age: 사전 요청 결과를 캐시할 시간(초 단위).
    • 예: Access-Control-Max-Age: 86400 (24시간)

---

CORS 요청 처리 흐름

1. 클라이언트가 요청 보냄
   • 클라이언트는 리소스를 요청하며 Origin 헤더를 포함.
   • 브라우저는 요청이 동일 출처인지 확인.
2. 서버가 CORS 정책 확인
   • 서버는 요청의 출처와 설정된 CORS 정책을 비교.
   • 요청이 허용되면 관련 CORS 헤더를 포함하여 응답.
3. 브라우저가 응답 검증
   • 브라우저는 서버 응답의 CORS 헤더를 확인.
   • 정책에 부합하면 응답을 처리, 그렇지 않으면 요청 차단.

---

CORS의 주요 사용 사례

1. API 요청
   • 다른 도메인에 있는 REST API 호출.
     예: 클라이언트 앱(https://frontend.com)이 백엔드 API(https://api.backend.com)와 통신.
2. CDN(Content Delivery Network)
   • 외부 서버에서 이미지, 글꼴, 동영상 등 리소스를 로드.
3. 클라우드 서비스와 통신
   • 웹 애플리케이션이 외부 클라우드 스토리지(AWS S3 등)에서 데이터를 가져오는 경우.

---

CORS 설정 예제

서버 설정 (Node.js Express)

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://example.com', // 허용할 출처
  methods: ['GET', 'POST'], // 허용할 메서드
  credentials: true // 쿠키 허용 여부
}));

app.get('/data', (req, res) => {
  res.json({ message: 'CORS is working!' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

서버 응답 헤더

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Credentials: true

 

---

CORS의 장단점

장점

• SOP의 한계를 극복하며 보안을 유지.
• 다른 도메인 간 안전한 리소스 공유 가능.
• 설정을 통해 세부적으로 접근 제어 가능.

단점

• 잘못된 설정은 보안 취약점(불필요한 도메인 허용 등)을 초래.
• 사전 요청(Preflight Request)은 네트워크 성능에 영향을 줄 수 있음.

---

결론

CORS는 웹 애플리케이션이 서로 다른 출처에서 안전하게 데이터를 교환할 수 있도록 설계된 강력한 보안 메커니즘입니다. 서버 측에서 적절한 설정이 필요하며, SOP의 제한을 완화하면서도 보안을 유지할 수 있도록 브라우저와 협력하여 작동합니다.