SOP 와 CORS

SOP와 CORS 정책 정리

CORS는 Cross-Origin Resource Sharing의 약자로, 교차 출처 리소스 공유를 의미한다. 이 개념을 정확하게 이해하기 위해서는 먼저 SOP 즉, Same Origin Policy(동일 출처 정책)에 대해 알아볼 필요가 있다.

SOP(Same Origin Policy)란?

SOP는 같은 출처의 리소스만 브라우저가 접근할 수 있도록 허용하는 보안 정책이다. 만약 출처가 다르다면, 브라우저는 보안을 이유로 해당 리소스 요청을 차단한다.

여기서 동일 출처란, 브라우저 주소창 기준으로 프로토콜, 도메인, 포트 이 세 가지가 모두 같아야 한다. 이 세 가지가 완전히 같을 때만 동일 출처로 간주한다.

 

 

기본적으로 브라우저는 동일 출처에서만 리소스를 요청하도록 설정되어 있다. 이는 보안상 가장 안전하기 때문이며, 예를 들어 네이버 내부의 블로그나 카페 등에서 사용자 정보를 요청하는 경우는 내부 서비스 간의 요청이므로 허용된다. 하지만 외부의 출처에서 네이버의 정보를 요청하는 경우는 보안상 허용되지 않는다.

이처럼 SOP는 보안을 위한 중요한 정책이지만, 최근 웹서비스 환경에서는 이 정책만으로는 부족한 경우가 많다.

SOP의 한계

현대의 웹 서비스는 다양한 외부 리소스를 사용하는 것이 일반적이다. 예를 들어, 네이버 로그인, 카카오 로그인, 구글 로그인 같은 기능이나 외부 지도 API 등을 활용하는 경우가 많다.

이처럼 다른 출처의 데이터를 사용하는 경우가 많아졌기 때문에, SOP 정책만으로는 이러한 기능들을 사용할 수 없다. 그래서 이를 해결하기 위한 대안이 바로 CORS 정책이다.

CORS란?

CORS는 교차 출처 요청을 허용하기 위한 정책이다. 클라이언트에서 다른 출처의 서버에 요청을 보낼 경우, 브라우저는 먼저 이 요청이 허용된 것인지 확인하는 절차를 거친다.

다른 출처에 요청을 보내면 브라우저는 CORS 에러를 발생시킨다. 이때 개발자 도구의 콘솔에서는 ‘Access-Control-Allow-Origin’이라는 단어가 포함된 에러 메시지를 확인할 수 있다.

CORS 설정 방법

이 에러를 해결하려면 서버에서 CORS 관련 HTTP 헤더를 설정해야 한다. 대표적으로 설정해야 할 헤더는 아래의 세 가지다.

• Access-Control-Allow-Origin: 접근을 허용할 클라이언트의 출처 (ex: https://hello.com)
• Access-Control-Allow-Methods: 허용할 HTTP 메서드 (GET, POST, DELETE, PUT, PATCH 등)
• Access-Control-Allow-Headers: 허용할 커스텀 헤더 이름

서버가 위와 같은 헤더를 응답에 포함시켜주면, 브라우저는 해당 요청이 안전하다고 판단하고 실제 요청을 전송하게 된다.

Preflight Request란?

 

CORS 요청을 보낼 때 브라우저는 실제 요청 전에 Preflight Request라는 사전 확인 요청을 먼저 서버에 보낸다. 이 요청은 HTTP 메서드 OPTIONS를 사용하며, 브라우저는 여기서 출처(origin), 메서드, 헤더 정보를 서버에 전달한다.

서버는 이 정보를 검토한 후, 허용할 경우 Access-Control-Allow-* 헤더를 응답에 포함시킨다. 브라우저는 이를 확인하고 나서야 실제 요청을 서버에 보낸다.

만약 서버가 해당 클라이언트의 출처를 허용하지 않는다면, 응답에 허용 헤더가 포함되지 않으며 브라우저는 CORS 에러를 발생시킨다. 이때 요청이 아예 서버에 도달하지 않거나, 응답을 받아도 처리되지 않는다.

Preflight Request는 서버가 원하지 않는 요청을 사전에 차단할 수 있도록 도와주는 장치이며, DELETE나 PUT처럼 민감한 요청이 서버에 잘못 도달하지 않도록 예방하는 역할을 한다..

 

 

<node.js 에서의 cors 설정방법>

const server = http.createServer((req, res) => {
  console.log(req.method + "요청이 들어왔어요");

  res.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");  
                                               //허용할 주소
  res.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE, OPTIONS"); 
                                               //허용할 메서드 처리 
  
  
  
  if (req.method === "OPTIONS") {
   // OPTION 요청 처리 (Preflight 요청 처리)
   // Preflight 요청은 OPTION 으로 온다.
   res.end('요청 보내세요')
  }
  
  if (req.method === "GET") {
    //GET 요청 처리
  }
  
   if (req.method === "POST") {
    //POST 요청 처리
  }
               .
               .
               .
               
  }

 

 

<express 및 cors 모듈에서 설정방법>

 

express 및 cors 모듈 설치

npm install express cors

 

헤더 작성이 없어서 좀더 간단해 진다.

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

const app = express();

app.use(
  cors({
    origin: "http://127.0.0.1:5500",
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
  })
);