CORS와 SOP의 개념 및 구현 방법 이해하기

웹 애플리케이션의 보안과 데이터 공유는 현대의 웹 개발에서 중요한 주제이다. CORS와 SOP는 이러한 보안 문제를 다루기 위한 두 가지 주요 개념이다.

 

- CORS란? (Cross-Origin Resource Sharing)

CORS는 Cross-Origin Resource Sharing의 약자로, 웹 브라우저가 서로 다른 출처(도메인, 프로토콜, 포트)를 가진 서버와의 리소스 공유를 안전하게 수행할 수 있도록 하는 표준이다. 기본적으로, 웹 브라우저는 보안상의 이유로 한 출처에서 로드된 웹 페이지가 다른 출처의 리소스에 접근하는 것을 제한한다. CORS는 이러한 제한을 해제하고, 서버가 특정 출처에 대해 리소스 접근을 허용할 수 있게 한다.

 

필요성

• 보안: CORS는 웹 애플리케이션이 다른 도메인에서 데이터를 안전하게 요청하고 처리할 수 있도록 하며, 동시에 보안을 유지한다.
• 데이터 공유: API나 리소스가 여러 도메인에서 사용되는 경우, CORS를 통해 해당 리소스에 접근할 수 있다.
• 유연성: 서버가 특정 도메인에서의 접근을 허용하도록 설정함으로써, 다양한 클라이언트와 서버 간의 통신을 유연하게 설정할 수 있다.

- SOP란? (Same-Origin Policy)

SOP는 Same-Origin Policy의 약자로, 웹 브라우저에서 보안을 유지하기 위해 적용하는 기본 정책이다. 이 정책은 웹 페이지가 자신과 동일한 출처에서만 데이터를 요청하거나 조작할 수 있도록 제한한다. 출처는 도메인, 프로토콜, 포트를 포함한다.

 

한계

• 제한된 데이터 접근: SOP는 보안을 강화하지만, 다양한 도메인 간 데이터 공유가 필요한 현대의 웹 애플리케이션에서 유연성이 부족할 수 있다.
• CORS 필요성: SOP의 제한 때문에, 외부 API나 다른 도메인에서의 리소스 접근이 필요할 때 CORS와 같은 기술이 필요하다.

- CORS 작성 방법: CORS 헤더 설정 방법과 예제

서버는 응답에 CORS 헤더를 추가하여 클라이언트가 다른 출처의 리소스에 접근할 수 있도록 허용한다. 주요 CORS 헤더와 설정 방법은 다음과 같다.

 

헤더예제

1. Access-Control-Allow-Origin

클라이언트가 접근할 수 있는 출처를 지정한다.

Access-Control-Allow-Origin: https://example.com

 

2. Access-Control-Allow-Methods

허용된 HTTP 메서드를 지정한다.

Access-Control-Allow-Methods: GET, POST, PUT, DELETE

 

3. Access-Control-Allow-Headers

클라이언트가 요청 시 사용할 수 있는 헤더를 지정한다.

Access-Control-Allow-Headers: Content-Type, Authorization

 

4. Access-Control-Allow-Credentials

자격 증명(예: 쿠키)을 포함할 수 있는지 여부를 지정한다.

Access-Control-Allow-Credentials: true

 

5. Access-Control-Expose-Headers

클라이언트가 접근할 수 있는 응답 헤더를 지정한다.

Access-Control-Expose-Headers: X-Custom-Header

 

 

 

6. Access-Control-Max-Age

preflight 요청의 결과를 캐시할 수 있는 시간(초)을 지정한다.

Access-Control-Max-Age: 3600

 

서버 측 설정 예제 -  Express.js(Node.js) 예제 

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

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

app.get('/data', (req, res) => {
  res.json({ message: 'Hello World' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

 

- CORS 작동 방식: 브라우저에서 CORS가 어떻게 작동하는지

1. 클라이언트 요청

• 브라우저가 다른 출처의 리소스를 요청할 때, 특히 GET, POST 등의 요청을 보낼 때, 브라우저는 CORS 정책을 적용한다.

2. Preflight 요청 (옵션)

• 상황: PUT, DELETE와 같은 비표준 메서드나 커스텀 헤더를 사용하는 경우.
• 동작: 브라우저는 OPTIONS 메서드를 사용하여 서버에 preflight 요청을 보내고, 서버가 CORS 정책을 지원하는지 확인한다.

// 헤더
OPTIONS /resource HTTP/1.1
Host: example.com
Origin: https://mywebsite.com
Access-Control-Request-Method: POST

 

3. 서버 응답

• 서버는 응답 헤더에 CORS 정책을 포함하여 클라이언트가 요청한 출처의 접근을 허용한다.

// 예제
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://mywebsite.com
Access-Control-Allow-Methods: POST, GET

 

 

4. 브라우저의 데이터 처리

• 브라우저는 서버의 응답을 기반으로 요청이 허용되었는지 확인하고, 데이터가 클라이언트 애플리케이션에 전달된다.

5. 응답 캐시

• Access-Control-Max-Age 헤더가 설정된 경우, 브라우저는 preflight 요청의 결과를 캐시하고, 같은 요청이 다시 발생할 때 preflight 요청을 생략한다.

이렇게 CORS와 SOP는 웹 애플리케이션의 보안을 강화하고, 다양한 도메인 간의 데이터 공유를 안전하게 관리할 수 있도록 도와준다.