CORS
Cross Origin Resource Sharing
CORS는 웹 개발에서 중요한 주제로, 동일 출처 정책(Same-Origin Policy)의 한계를 해결하기 위해 고안된 메커니즘이다. Django로 웹 서비스를 구현할 때도, Flask로 앱을 구성하고 연동할 때도 다뤄 보았으나 제대로 알아 본 적은 없었기에, 이번 기회에 조사해보고자 한다.
1. CORS란 무엇인가?
정의
CORS(Cross-Origin Resource Sharing)는 브라우저에서 실행되는 웹 애플리케이션이 자신의 도메인이 아닌 리소스에 안전하게 접근할 수 있도록 허용하는 표준 메커니즘이다.
등장 배경 및 필요성
동일 출처 정책(Same-Origin Policy)은 보안상의 이유로 다른 출처의 리소스 요청을 기본적으로 차단한다. 하지만 현대 웹 애플리케이션은 API 서버, CDN 등 다양한 출처에서 데이터를 가져와야 하기 때문에, 이러한 예외를 안전하게 허용하기 위해 CORS가 등장했다.
2. 동일 출처 정책(Same-Origin Policy)
정의와 동작 원리
동일 출처 정책은 웹 애플리케이션이 자신과 동일한 출처(Scheme, Host, Port)에서만 리소스에 접근할 수 있도록 제한하는 보안 모델이다.
제한 사항 및 문제점
- 다른 도메인에 있는 API 서버와의 통신 불가
- 서브도메인 간 리소스 공유 제한
- 다양한 출처에서 데이터를 가져오는 현대 웹 앱 개발에 불편 초래
3. CORS의 기본 원리
HTTP 헤더를 통한 제어
CORS는 클라이언트와 서버 간 HTTP 헤더를 통해 요청을 관리한다. 클라이언트가 요청을 보내면, 서버는 CORS 관련 헤더를 포함한 응답을 보내 이를 제어한다.
요청 및 응답 흐름
- 클라이언트에서 리소스 요청
- 서버에서 응답 헤더를 통해 허용 여부 판단
- 브라우저가 헤더 확인 후 요청 승인 또는 차단
4. CORS의 구성 요소
Preflight 요청
- 서버에 OPTIONS 메서드로 사전 요청을 보내 허용 여부를 확인
- 복잡한 요청(Method, Headers)이 포함된 경우 필요
주요 HTTP 헤더
- Origin: 요청을 보낸 출처를 나타냄
- Access-Control-Allow-Origin: 서버에서 허용할 출처 지정
- Access-Control-Allow-Methods: 허용할 HTTP 메서드 목록
- Access-Control-Allow-Headers: 허용할 요청 헤더 목록
- Access-Control-Allow-Credentials: 인증 정보 포함 여부
5. CORS 요청의 종류
Simple Request
- GET, POST, HEAD 메서드로 이루어진 간단한 요청
- Preflight 요청이 필요하지 않음
Preflight Request
- OPTIONS 메서드를 사용해 서버에 사전 요청
- 서버의 허용 여부를 확인한 후 실제 요청 실행
Actual Request
- 서버가 허용한 경우 실행되는 본 요청
6. CORS를 설정하는 방법
서버 측에서의 설정
Node.js (Express)
const cors = require('cors');
const express = require('express');
const app = express();
app.use(cors({ origin: 'http://example.com' }));Flask
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})Spring Boot
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://example.com");
}
}7. CORS 에러 및 디버깅
발생 원인
- 서버에서 적절한 CORS 헤더를 설정하지 않은 경우
- 브라우저가 인증 정보를 포함한 요청을 차단한 경우
- Preflight 요청이 실패하는 경우
디버깅 방법
- 브라우저 개발자 도구에서 네트워크 탭 확인
- 서버 로그에서 CORS 헤더 확인
- curl 명령어로 테스트
8. CORS의 보안 고려사항
허용된 Origin의 과도한 사용 위험성
모든 Origin을 허용(*)하면 보안 문제가 발생할 가능성이 큼
Credentials 허용의 주의점
Access-Control-Allow-Credentials를 활성화할 경우, 특정 Origin만 허용해야
보안 모범 사례
- 반드시 필요한 출처만 허용
- Preflight 요청을 철저히 검증
- HTTPS 사용
9. CORS와 관련된 최신 기술 및 트렌드
- Fetch API: 현대적인 네트워크 요청 방식에서 CORS 지원
- HTTP/2: 다중화된 연결에서의 CORS 지원
- WebSocket: CORS와의 관계 및 대체 가능성
10. 마무리
CORS는 웹 보안에서 중요한 역할을 하며, 동일 출처 정책의 한계를 보완해 현대 웹 애플리케이션 개발을 가능하게 한다. 적절한 설정과 이해를 통해 안전하고 효율적인 리소스 공유를 구현할 수 있다는 점에서 의의를 가져, 앞으로도 볼 일이 많은 친구일 것 같다.
