30. CORS 정책 설명
CORS(Cross-Origin Resource Sharing)는 브라우저에서 교차 출처 요청(cross-origin requests)을 안전하게 제어하기 위해 도입된 보안 정책입니다. 이 정책은 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 리소스에 접근하려고 할 때, 특정 조건을 충족해야만 요청이 허용되도록 합니다.
-
교차 출처 요청(Cross-Origin Request)
출처는 URL의 프로토콜, 도메인, 포트 번호를 포함합니다. 예:
https://example.com와 http://example.com은 다른 출처입니다.
https://example.com:3000과 https://example.com도 다른 출처입니다.
교차 출처 요청은 한 출처의 웹 애플리케이션이 다른 출처의 리소스(API, 데이터 등)에 접근하려고 할 때 발생합니다. -
CORS의 동작 원리
CORS는 서버가 요청을 허용할지 여부를 결정할 수 있도록 브라우저와 협력하여 작동합니다. 주요 구성 요소는 다음과 같습니다:
a. 요청 유형
단순 요청(Simple Request):
특정 조건을 만족하는 요청.
예: GET, POST (Content-Type이 기본값일 때), HEAD 메서드.
예비 요청(Preflight Request):
복잡한 요청(예: PUT, DELETE 메서드, 사용자 지정 헤더 등)의 경우 브라우저가 먼저 OPTIONS 메서드로 서버에 사전 확인(preflight) 요청을 보냅니다.
b. 서버의 응답
CORS는 서버의 응답 헤더를 통해 동작합니다. 중요한 헤더는 다음과 같습니다:
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-Allow-Origin 등의 헤더가 없는 경우, 요청을 차단하여 보안을 강화합니다.
이로 인해 CORS 에러(예: "No 'Access-Control-Allow-Origin' header is present")가 발생할 수 있습니다. -
CORS 정책의 목적
CORS는 다음을 방지하는 데 도움을 줍니다:
CSRF(Cross-Site Request Forgery)와 같은 보안 취약점.
악의적인 스크립트가 사용자의 브라우저에서 다른 출처로 민감한 데이터를 요청하거나 변조하는 것.
- CORS 문제 해결 방법
서버 설정 수정
서버에서 CORS 헤더를 올바르게 설정합니다. 예:
javascript
코드 복사
// Node.js 예제 (Express)
const cors = require('cors');
app.use(cors({
origin: 'https://example.com',
credentials: true
}));프록시 서버 사용
클라이언트와 서버 사이에 프록시를 설정하여 요청을 우회합니다.
브라우저 플러그인 사용
개발 중에만 임시로 CORS를 무시하는 플러그인을 사용할 수 있습니다(비추천).
- 주의 사항
CORS는 보안 강화를 위해 설계되었으며, 모든 요청에 대해 Access-Control-Allow-Origin: * 설정은 보안을 약화시킬 수 있으므로 신중히 사용해야 합니다.
