🌐 CORS 정책, 모든 백엔드 개발자가 꼭 알아야 할 것

Source: Dev.to

CORS란 무엇인가?

CORS는 한 출처(도메인)의 리소스가 다른 출처에 의해 어떻게 접근될 수 있는지를 제어하는 브라우저 보안 메커니즘입니다.

Important: CORS는 브라우저에 의해 강제 적용되지만, 설정은 백엔드에서 합니다.

가장 흔한 CORS 실수

Access-Control-Allow-Origin: *

이 헤더는 모든 웹사이트가 여러분의 API를 호출할 수 있게 합니다. API가 쿠키, 토큰, 세션 등을 사용한다면 이는 심각한 보안 위험이 됩니다.

안전한 CORS 설정을 위한 모범 사례

1️⃣ 신뢰할 수 있는 출처 허용 리스트 사용

알려진 도메인만 허용합니다:

const allowedOrigins = [
  'https://app.example.com',
  'https://admin.example.com'
];

2️⃣ 자격 증명과 함께 와일드카드 사용 금지

쿠키, 헤더에 포함된 JWT, 세션 등을 사용할 때는 정확한 출처를 지정해야 합니다:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://app.example.com

Access-Control-Allow-Credentials가 true일 경우 *는 허용되지 않습니다.

3️⃣ 허용할 HTTP 메서드 제한

API가 실제로 필요로 하는 메서드만 허용합니다:

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

불필요하게 PATCH나 OPTIONS와 같은 사용되지 않는 메서드를 노출하지 마세요.

4️⃣ 허용 헤더 제한

요청 헤더 중 허용할 항목을 명시합니다:

Access-Control-Allow-Headers: Content-Type, Authorization

5️⃣ 프리플라이트(OPTIONS) 요청을 올바르게 처리

브라우저는 특정 API 호출 전에 OPTIONS 요청을 보냅니다.

모범 사례:

• 빠르게 응답합니다(예: 204 No Content).
• 프리플라이트 응답에 인증을 요구하지 않습니다.
• 적절한 CORS 헤더를 반환합니다.

6️⃣ 환경별 CORS 규칙

이 접근법은 개발을 편리하게 하면서도 프로덕션에서는 보안을 유지합니다.

7️⃣ CORS를 보안 메커니즘으로 오인하지 말 것

CORS는 다음을 대체하지 않습니다:

• 인증
• 인가
• 속도 제한
• 입력 검증

공격자는 여전히 Postman이나 curl 같은 도구를 사용해 API를 직접 호출할 수 있습니다.

예시: 안전한 Node.js CORS 설정

const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors({
  origin: ['https://app.example.com'],
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true,
  maxAge: 86400 // seconds
}));

면접 팁

Q: CORS는 프론트엔드 보안 기능인가요, 백엔드 보안 기능인가요?
A: CORS는 브라우저에 의해 강제 적용되지만, 설정은 백엔드에서 제어합니다.

마무리 생각

훌륭한 백엔드 개발자는:

• 최소 권한 원칙에 맞는 CORS 설정을 사용합니다.
• 프로덕션에서는 와일드카드를 피합니다.
• 환경별 설정을 구분합니다.
• CORS가 실제 보안 제어를 대체할 수 없다는 것을 이해합니다.

올바른 CORS 설정은 전문 백엔드 개발자의 성숙도를 보여줍니다.