CORS 이해: 초보자를 위한 튜토리얼

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 애플리케이션 개발자(프론트엔드/백엔드)
CORS 메커니즘을 처음 접하는 초보 개발자
보안 및 클라이언트-서버 상호작용에 관심 있는 개발자
난이도: 중간 수준(기초 개념 설명 포함)

핵심 요약

CORS는 브라우저 기반 보안 메커니즘으로, Access-Control-Allow-Origin 헤더를 통해 신뢰할 수 있는 출처를 명시하여 크로스 도메인 요청을 제어합니다.
서버 수준에서 CORS를 강제해야 하며, 클라이언트 측에서 처리하면 보안 취약점이 발생할 수 있습니다.
CLI 도구(예: curl)는 CORS 제한 없이 API에 직접 접근할 수 있지만, 브라우저 기반 애플리케이션(SPA)은 CORS 헤더를 통해 보안을 유지합니다.

섹션별 세부 요약

1. CORS 기본 개념

Origin 정의: https://example.com:443과 같은 프로토콜, 도메인, 포트 조합으로 구성됩니다.
Same-Origin Policy: 브라우저가 기본적으로 다른 출처의 요청을 차단하며, CORS를 통해 서버가 허용 출처를 명시합니다.
보안 목적: 악의적인 사이트(evil.com)가 사용자의 브라우저 세션을 악용하여 api.bank.com에 접근하는 것을 방지합니다.

2. CORS 메커니즘

CORS 헤더 예시:
Access-Control-Allow-Origin: 허용 출처 명시(예: https://bank.com 또는 *).
Access-Control-Allow-Methods: 허용 HTTP 메서드(예: GET, POST).
Access-Control-Allow-Headers: 요청 헤더 허용(예: Content-Type).
Preflight 요청: OPTIONS 메서드를 사용하여 서버가 요청을 허용하는지 확인합니다.

3. 클라이언트-서버 상호작용

1단계: 웹 애플리케이션(fetch 또는 XMLHttpRequest)이 다른 출처로 HTTP 요청을 보냅니다.
2단계: 서버가 Access-Control-Allow-Origin 헤더와 함께 응답을 반환합니다.
3단계: 브라우저가 요청 출처와 허용 출처를 비교하여 허용 여부를 결정합니다.
4단계: 예외 요청(예: POST + 커스텀 헤더)에 대해 OPTIONS 메서드를 사용한 Preflight 요청이 발생합니다.

4. 실습 예제: Node.js 서버 구현

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

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://bank.com'); // 허용 출처 명시
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/data', (req, res) => {
  res.json({ message: 'Hello from the API!' });
});

app.options('/data', (req, res) => {
  res.sendStatus(200); // Preflight 응답 처리
});

app.listen(4000, () => {
  console.log('API 서버 실행 중: http://localhost:4000');
});

SPA 예제: fetch('https://api.bank.com/data')를 통해 서버에서 데이터를 요청합니다.
CORS 실패 시: https://evil.com에서 요청 시 브라우저가 Access-Control-Allow-Origin 헤더를 확인하고 요청을 차단합니다.

5. CLI와 CORS

CLI 도구(예: curl)는 브라우저가 아닌 환경에서 실행되므로 CORS 제한 없이 API에 직접 접근할 수 있습니다.
보안 대응: 서버는 CLI에 대해 API 키, OAuth, IP 화이트리스트 등 다른 방식으로 접근 제어를 수행합니다.

결론

CORS는 브라우저 기반 애플리케이션의 보안을 보장하는 핵심 메커니즘입니다.
서버에서 Access-Control-Allow-Origin 헤더를 정확히 설정해야 하며, *를 사용하면 모든 출처가 접근 가능해집니다.
CLI 도구는 CORS 제한을 우회할 수 있으나, 서버 단계에서 다른 보안 조치(예: 인증)를 적용해야 합니다.
프론트엔드 개발자는 CORS 오류를 해결하기 위해 서버의 헤더 설정을 확인해야 하며, 백엔드 개발자는 보안 및 접근 제어를 철저히 해야 합니다.