CORS 이해하기: 크로스 오리진 리소스 공유의 모든 것

서론

현대 웹 애플리케이션은 다양한 출처(Origin)의 리소스를 활용합니다. 이때 발생할 수 있는 보안 문제를 해결하기 위해 CORS(Cross-Origin Resource Sharing)가 등장했습니다. 본 글에서는 CORS의 개념, 필요성, 그리고 작동 방식을 상세히 설명하겠습니다.

---

CORS의 기본 개념

1. CORS란?

CORS는 서로 다른 출처 간의 리소스 공유를 가능하게 하는 보안 메커니즘입니다. 여기서 출처(Origin)는 다음 세 가지 요소로 구성됩니다:

• 프로토콜 (http, https)
• 도메인 (example.com)
• 포트 (80, 443 등)

2. 출처 비교 예시

URL 1	URL 2	동일 출처 여부
https://example.com	https://example.com	O
https://example.com	http://example.com	X (프로토콜 다름)
https://example.com	https://api.example.com	X (도메인 다름)
https://example.com:80	https://example.com:443	X (포트 다름)

---

CORS의 필요성

1. 보안 문제의 역사

• CSRF(Cross-Site Request Forgery): 악의적인 사이트가 사용자의 브라우저를 통해 다른 사이트에 요청을 보내는 공격
• SOP(Same-Origin Policy): 동일 출처의 리소스만 접근 가능하도록 제한하는 브라우저 정책

2. 현대 웹의 요구사항

• API 서버와 프론트엔드의 분리
• CDN을 통한 리소스 제공
• 마이크로서비스 아키텍처

---

CORS의 작동 방식

1. Simple Request

가장 기본적인 CORS 요청 방식입니다.

조건

• GET, POST, HEAD 메서드
• 특정 헤더만 사용
• Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain

요청 예시

GET /api/data HTTP/1.1
Host: api.example.com
Origin: https://client.example.com

응답 예시

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://client.example.com

2. Preflight Request

복잡한 요청을 보내기 전에 먼저 확인하는 방식입니다.

요청 예시

OPTIONS /api/data HTTP/1.1
Host: api.example.com
Origin: https://client.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type, Authorization

응답 예시

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://client.example.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

3. Credential Request

인증 정보를 포함한 요청입니다.

요청 예시

fetch('https://api.example.com/data', {
  credentials: 'include',
  headers: {
    'Authorization': 'Bearer token123'
  }
});

응답 예시

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://client.example.com
Access-Control-Allow-Credentials: true

---

CORS 설정 방법

1. Spring Boot 설정

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("https://client.example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

2. Node.js Express 설정

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

const app = express();

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

---

CORS 관련 문제 해결

1. 일반적인 오류

• Access-Control-Allow-Origin 헤더 누락
• 잘못된 출처 설정
• 인증 정보 누락

2. 디버깅 방법

• 브라우저 개발자 도구 확인
• 서버 로그 분석
• 네트워크 요청/응답 검사

---

결론

CORS는 현대 웹 애플리케이션의 필수적인 보안 메커니즘입니다. 적절한 CORS 설정은 보안을 유지하면서도 필요한 리소스 공유를 가능하게 합니다.

인사이트: CORS는 단순한 기술적 설정이 아닌, 웹 애플리케이션의 보안과 기능성을 동시에 고려해야 하는 중요한 설계 요소입니다. 개발자는 CORS의 동작 원리를 이해하고, 이를 적절히 활용해야 합니다.

---

참고 자료

• MDN Web Docs - CORS
• Spring Framework CORS Documentation
• Express CORS Middleware