CORS (Cross-Origin Resource Sharing)
- 다른 출처(Origin)의 리소스를 공유하기 위한 보안 메커니즘
- 웹 브라우저에서 실행되는 보안 정책
- 동일 출처 정책(Same-Origin Policy)의 제한을 안전하게 완화하는 방법
목적
- 동일 출처 정책(Same-Origin Policy)을 우회하면서도 안전한 교차 출처 요청을 가능하게 합니다.
- 웹 애플리케이션의 기능성을 확장하고 다양한 도메인 간 리소스 공유를 허용합니다.
작동 원리
- 브라우저는 교차 출처 요청 시 Origin 헤더를 포함시킵니다.
- 서버는 Access-Control-Allow-Origin 헤더로 허용된 출처를 지정합니다.
요청 유형
- 단순 요청 (Simple Request):
- GET, HEAD, POST 메서드만 사용
- 허용된 헤더만 사용
- Content-Type이 다음으로 제한:
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
- 프리플라이트 요청(Preflight Request):
- OPTIONS 메서드를 사용한 사전 검사
- 실제 요청 전에 서버의 허가를 확인
- 안전하지 않은 요청에 대한 보호
CORS 시나리오
단순 요청
예비 요청
1 2 3 4 5 6 7 8 9 10 11 12 13 14 151. 예비 요청 (OPTIONS) Origin: https://frontend.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: Content-Type 2. 서버 응답 Access-Control-Allow-Origin: https://frontend.com Access-Control-Allow-Methods: GET, POST, PUT Access-Control-Allow-Headers: Content-Type 3. 실제 요청 [요청 내용] 4. 서버 응답 [응답 내용]
주요 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 |
| Access-Control-Max-Age | 예비 요청 캐시 시간 | Access-Control-Max-Age: 3600 |
| Access-Control-Allow-Credentials | 인증 정보 허용 | Access-Control-Allow-Credentials: true |
보안 고려사항
CORS는 보안 메커니즘이 아니라 브라우저의 제한을 완화하는 방법
- 기본 보안 원칙
- 필요한 출처만 허용
- 와일드카드(*) 사용 제한
- 중요한 API의 경우 더 엄격한 제한
- 인증 관련
- Credentials 설정 시 와일드카드 사용 불가
- 안전한 출처 검증
- 토큰 기반 인증 권장
일반적인 CORS 에러
| 에러 유형 | 원인 | 해결 방법 |
|---|---|---|
| 허용되지 않은 출처 | 서버의 Allow-Origin 미설정 | 적절한 출처 허용 |
| 메서드 미허용 | Allow-Methods 미설정 | 필요한 메서드 허용 |
| 헤더 미허용 | Allow-Headers 미설정 | 필요한 헤더 허용 |
| 인증 관련 | Credentials 설정 문제 | 인증 관련 설정 확인 |
CORS 오류 해결 방법
- 서버 측 설정
- 적절한 CORS 헤더 설정
- 허용할 출처 명시
- 필요한 메서드와 헤더 허용
- 인증 관련 설정 조정
- 프록시 사용
- 개발 환경에서 프록시 서버 설정
- API 게이트웨이 활용
- 리버스 프록시 구성—