본문 바로가기
프론트엔드

[HTTP 보안]CORS

by 느바 2024. 12. 29.
반응형

[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 헤더

  • 클라이언트 요청 헤더
  • 서버 응답 헤더
    • 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 요청
  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의 제한을 완화하면서도 보안을 유지할 수 있도록 브라우저와 협력하여 작동합니다.

 

반응형

'프론트엔드' 카테고리의 다른 글

웹페이지 성능 최적화  (0) 2024.12.31
ChatGPT 사용법과 활용예시  (1) 2024.12.29
[HTTP 보안]sanitize  (0) 2024.12.29
[HTTP 기본]curl  (1) 2024.12.28
[HTTP 추가 프로토콜]WebSocket  (4) 2024.12.28