CORS란 ?
Cross-Origin Resource Sharing(CORS) 는 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 때, 서버가 해당 요청을 허용할지 여부를 결정하는 방식입니다. CORS가 필요한 이유는 브라우저 보안 정책인 SOP(Same-Origin Policy)가 다른 도메인 간 요청을 제한하기 때문입니다. SOP는 보안상 중요한 역할을 하지만, CORS를 통해 필요 시 특정 조건 하에 다른 출처의 리소르를 사용할 수 있게 됩니다.
SOP란 ?
Same-Origin Policy(SOP) 는 브라우저가 보안을 위해 같은 출처에서 제공되는 리소스에만 접근할 수 있도록 제한하는 보안 메커니즘입니다. 여기서 출처(origin) 는 도메인, 프로토콜, 포트로 정의됩니다. SOP는 자바스크립트 코드가 악의적으로 다른 도메인에서 데이터를 훔쳐가는 것을 방지하기 위해 존재합니다. 하지만 SOP는 API와 리소스가 다양한 출처에 걸쳐 있는 현대 웹 환경에서는 제한적으로 동작할 수 있으며, 이를 보완하기 위해 CORS가 등장하게 되었씁니다.
CORS 작성 방법
CORS는 HTTP 헤더를 통해 설정되며, 서버가 다음과 같은 헤더를 추가하여 브라우저에게 리소스 요청을 허용할 수 있습니다.
- Access-Control-Allow-Origin: 요청을 허용할 출처를 명시. 예를 들어, 특정 도메인 또는 *를 통해 모든 출처 허용이 가능.
- Access-Control-Allow-Methods: 허용할 HTTP 메서드를 설정 (예: GET, POST, PUT, DELETE).
- Access-Control-Allow-Headers: 클라이언트에서 서버로 요청 시 사용할 수 있는 헤더를 명시 (예: Content-Type, Authorization).
- Access-Control-Allow-Credentials: 쿠키와 같은 자격 증명을 포함할 수 있도록 허용할지 여부를 결정 (보통 true 또는 false 설정).
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "https://example.com");
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
res.setHeader("Access-Control-Allow-Credentials", "true");
next();
});CORS 작동 방식
브라우저에게 CORS가 작동하는 방식은 크게 단순 요청(simple request)과 사전 요청(preflight request)으로 나뉩니다.
1. 단순 요청
GET, POST, HEAD 메서드와 특정 헤더만 포함된 경우, 브라우저가 바로 서버로 요청을 보내고 서버의 Access-Control-Allow-Origin 응답을 확인하여 허용된 출처인지 확인합니다.
2. 사전 요청
PUT, DELETE 등 비표준 메서드가 포함되거나, Content-Type이 application/json 등인 경우, 브라우저는 본 요청을 보내기 전에 OPTIONS 메서드로 사전 요청을 합니다. 서버가 이에 대한 응답으로 허용 헤더를 보내면 브라우저가 이후 실제 요청을 진행합니다.
CORS는 이렇게 클라이언트와 서버 간의 상호작용을 통해 SOP의 보안 원칙을 유지하면서도, 특정 상황에서 제한적으로 다른 출처의 리소스를 사용할 수 있도록 허용해줍니다.
