1. CORS란 무엇인가?
1-1. CORS란?
CORS (Cross-Origin Resource Sharing) : CORS는 웹 브라우저가 다른 도메인에 위치한 리소스에 접근할 때 발생하는 제약을 제어하는 메커니즘입니다. 예를 들어, http://example.com에서 로드된 웹 페이지가 https://api.anotherdomain.com에 요청을 보낼 때가 있습니다. 이때, 기본적으로는 보안상의 이유로 접근이 제한됩니다. CORS는 이 제한을 완화하는 방법입니다.
1-2. 동일 출처 정책(Same-Origin Policy)
동일 출처 정책 : 웹 보안 정책 중 하나로, 브라우저는 기본적으로 동일 출처(프로토콜, 호스트, 포트가 동일)에서 로드된 리소스만 접근을 허용합니다. 예를 들어 http://example.com에서 로드된 웹 페이지는 동일한 출처인 http://example.com/resource에는 접근할 수 있지만, 다른 출처인 http://anotherdomain.com/resource에는 기본적으로 접근할 수 없습니다.
1-3. CORS가 필요한 이유
많은 웹 애플리케이션은 데이터를 외부 API에서 받아와야 합니다. 예를 들어, 프론트엔드 애플리케이션이 외부 서버의 RESTful API를 호출해 데이터를 가져와야 할 때 동일 출처 정책이 이를 차단합니다. 이때, CORS설정을 통해 특정 출처의 접근을 허용할 수 있습니다.
2. CORS의 주요 작동 방식
2-1. 프리플라이트 요청 (Preflight Request)
프리플라이트 요청 : 단순 요청이 아닌 POST, PUT, DELETE 등의 메서드를 사용할 때, 브라우저는 본격적인 요청을 보내기 전에 OPTIONS메서드를 사용해 서버에 "이 요청을 해도 괜찮습니까?"라는 사전 확인 요청을 합니다. 서버가 이에 대해 허용하면 본 요청을 실행합니다.
2-2. 단순 요청과 프리플라이트 요청의 차이
단순 요청 (Simple Request) : GET, HEAD, POST 중에 Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain 등일 경우에만 해당되며, 프리플라이트 요청이 필요 없습니다.
프리플라이트 요청 (Preflighted Request) : 위 조건을 벗어나는 요청은 먼저 OPTIONS요청으로 허용 여부를 확인해야 합니다.
2-3. 주요 HTTP 헤더
Access-Control-Allow-Origin : 허용할 출처를 설정합니다. 예를 들어, Access-Control-Allow-Origin: *는 모든 출처에 대해 접근을 허용하고, Access-Control-Allow-Origin: https://example.com는 특정 출처만 허용합니다.
Access-Control-Allow-Methods : 허용할 HTTP 메서드 (GET, POST, PUT, DELETE 등)를 설정합니다.
Access-Control-Allow-Headers : 허용할 커스텀 헤더를 설정합니다.
Access-Control-Allow-Credentials : 인증 정보(쿠키)를 포함할지 여부를 설정합니다. true로 설정하면 Access-Control-Allow-Origin을 구체적인 출처로 설정해야 합니다.
3. CORS 정책 설정 예제
서버 측 CORS 설정 예시 (Node.js / Express)
const express = require('express');
const cors = require('cors');
const app = express();
const corsOptions = {
origin: 'https://example.com', // 특정 출처만 허용
methods: ['GET', 'POST'], // 허용할 메서드
allowedHeaders: ['Content-Type', 'Authorization'], // 허용할 헤더
credentials: true // 인증 정보 허용
};
app.use(cors(corsOptions));
app.get('/', (req, res) => {
res.json({ message: 'CORS 설정 완료!' });
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});4. CORS의 보안 및 한계
4-1. 보안 취약점
Access-Control-Allow-Origin( * 설정의 위험성) : 모든 출처를 허용하는 설정은 보안에 취약할 수 있습니다. 불필요하게 넓은 접근 허용은 악의적인 사이트가 데이터를 무단으로 사용할 가능성을 열어줍니다.
4-2. CORS와 CSRF(크로스 사이트 요청 위조)
CORS와 CSRF는 서로 다른 보안 문제를 해결하는 메커니즘입니다. CORS는 외부 도메인의 리소스 접근을 제어하는 데 사용되지만, 이는 CSRF 공격을 막는 방법은 아닙니다. CSRF 방어를 위해서는 인증 토큰이나 요청 헤더와 같은 보안 조치를 추가적으로 설정해야 합니다.
5. 자주 발생하는 문제 상황과 해결 방법
문제 1 : Access-Control-Allow-Origin 오류
서버가 요청을 허용하지 않는 경우 발생합니다.
해결하려면 서버의 CORS 설정에서 특정 출처를 허용하거나 필요한 경우 모든 출처를 허용하도록 설정합니다.
문제 2 : 프리플라이트 요청 실패
OPTIONS 요청이 서버에서 허용되지 않는 경우입니다.
서버에서 OPTIONS 요청을 허용하도록 설정해야 합니다.
문제 3 : 자격 증명이 포함된 요청 오류
쿠키나 인증 토큰을 포함하려면 Access-Control-Allow-Credentials: true와 함께 특정 출처를 명시해야 합니다.
회고
챌린지반 미니 세미나 과제로 CORS에 대하여 공부했다.
아직까지는 생소한 단어들이 많아서 이해하기는 어렵다.
우선, 브라우저의 보안 정책을 유지하면서 외부 리소스에 접근할 수 있게 하기 위해 필요하다. 정도로만 생각해도 되는걸까?
챌린지반 프로젝트를 진행중에 있는데
하고싶은걸 하니까 힘들고 지쳐도 기분이 너무 좋다.
끝까지 잘해내봅시다. 화이팅!!!
