CORS: 브라우저 보안을 위한 메커니즘
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

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.combank.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");

```