CORS: 인터넷 보안을 위한 브라우저의 경비병
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *백엔드 개발자**
- 난이도: 중간*
- *주요 대상자:** CORS 설정을 직접 처리하는 백엔드 개발자
- *난이도 해석:** 기술적 개념(예: Same-Origin Policy, Access-Control 헤더)과 실무 적용 사항(예: 허용 목록 설정)을 포함한 중간 수준 설명
핵심 요약
- CORS는 브라우저가 다른 도메인의 데이터를 읽을 때 보안을 강화하기 위한 메커니즘
Access-Control-Allow-Origin
헤더로 허용되는 원소를 지정해야 함- Same-Origin Policy(SOP)는 기본적으로 다른 도메인의 응답을 JavaScript가 읽지 못하게 함
Origin
헤더를 통해 요청 출처를 식별하고, 서버에서 허용 여부를 판단- 보안 취약점 방지를 위해
Access-Control-Allow-Origin: *
사용은 위험 - 허용 목록(Whitelist)을 명시적으로 설정해야 함
섹션별 세부 요약
1. CORS의 필요성 및 Same-Origin Policy
- SOP는 브라우저가 다른 도메인의 데이터를 읽는 것을 기본적으로 차단
- 예:
cutecatphotos.com
이bank.com
의 데이터를 읽는 것을 방지 - Origin은
Scheme
,Host
,Port
3가지 요소로 구성 - 예:
https://example.com:3000
- SOP는 데이터 전송은 허용하지만 응답 읽기는 차단
fetch()
또는XMLHttpRequest
사용 시 서버가 CORS 헤더를 명시해야 함
2. CORS 요청 흐름: Simple Request vs Preflight Request
- Simple Request
GET
,POST
,HEAD
메서드와 기본 헤더(예:Content-Type: text/plain
) 사용- 1. 브라우저가
Origin
헤더 추가 - 2. 서버가
Access-Control-Allow-Origin
헤더로 허용 여부 판단 - 3. 헤더 일치 시 JavaScript가 응답 읽기 허용
- Preflight Request
OPTIONS
메서드로 요청을 사전 검사- 1. 브라우저가
OPTIONS
요청과Access-Control-Request-Method
,Access-Control-Request-Headers
전송 - 2. 서버가
Access-Control-Allow-Methods
,Access-Control-Allow-Headers
로 허용 범위 명시 - 3. 허용 시 실제 요청 실행
3. 보안 취약점 및 해결 방안
Access-Control-Allow-Origin: *
사용은 보안 위험- 예:
req.headers.origin
을 그대로 사용한 경우 - 해결: 허용 목록(Whitelist)을 명시적으로 설정(
const whitelist = ["https://trusted.com"]
) Vary: Origin
헤더 추가 필수- 캐시(CDN)가 각 원소별 응답을 저장하도록 지정
res.setHeader("Vary", "Origin");
Access-Control-Max-Age
설정으로 Preflight 요청 최적화res.setHeader("Access-Control-Max-Age", "86400");
(24시간 동안 캐시)
4. 흔한 오해와 실무 팁
- CORS는 로그인 여부나 API 키를 검증하지 않음
- 서버에서 인증과 권한 관리가 필수
- CORS는 브라우저 기능이며 서버 보안에만 의존할 수 없음
curl
또는Postman
은 CORS를 무시하고 요청 가능- 실무 팁:
- 허용 목록은 보안 설정 파일에서 하드코딩
Access-Control-Allow-Credentials: true
사용 시 반드시 정확한 원소 지정- 테스트:
curl
또는Postman
으로 CORS 설정 검증
결론
- CORS 보안을 위해 반드시
Access-Control-Allow-Origin
허용 목록을 명시적으로 설정 Access-Control-Allow-Origin: *
사용 금지- Preflight 요청 처리 시
OPTIONS
메서드 대응 로직 필수 Access-Control-Allow-Methods
,Access-Control-Allow-Headers
명시- 실무 적용 예시:
```javascript
if (whitelist.includes(req.headers.origin)) {
res.setHeader("Access-Control-Allow-Origin", req.headers.origin);
res.setHeader("Access-Control-Allow-Credentials", "true");
}
res.setHeader("Vary", "Origin");
res.setHeader("Access-Control-Max-Age", "86400");
```