[Node.js] CORS와 SOP의 개념 및 구현 방법

CORS

Cross-Origin Resource Sharing

웹 페이지가 다른 출처(origin)에 있는 리소스에 안전하게 접근할 수 있도록 허용하는 메커니즘

* origin
- 도메인, 프로토콜, 포트를 의미

- 웹의 보안을 위해 기본적으로 SOP(Same-Origin Policy)가 적용되어, 동일 출처가 아닌 리소스에 접근하는 것을 차단함.
- 그러나 여러 서비스가 연동되는 웹 환경에서는 다른 출처의 리소스를 사용해야 할 때가 생김.
→ CORS를 사용하면 가능함.

 

SOP

Same-Origin Policy

웹 브라우저가 동일한 출처(origin)에서 로드된 리소스에만 접근할 수 있도록 제한하는 보안 정책.
(즉, 같은 도메인, 프로토콜, 포트를 가진 경우에만 접근 가능)

- 여러 출처에서 데이터를 필요로 하는 웹 애플리케이션에서는 문제가 될 수 있음
- ex) 다른 출처의 API 데이터를 받아오는 경우

 

CORS 작성 방법

CORS 헤더 설정

CORS는 서버가 응답 헤더에 허용 설정을 추가함으로써 작동함.

 

Access-Control-Allow-Origin: https://example.com  → 특정 출처에 접근 허용
Access-Control-Allow-Origin: *   → 모든 출처에 접근 허용

Access-Control-Allow-Origin: 리소스에 접근할 수 있는 주소

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

Access-Control-Allow-Methods: 서버에서 허용할 HTTP 메서드

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

Access-Control-Allow-Headers: 서버에서 허용할 HTTP 헤더

 

CORS 작동 방식

1. 클라이언트가 서버에 요청을 보냄

- 다른 출처의 서버에 요청을 보낼 때 (API 호출 등), 요청을 전송하는 주체는 브라우저.

2. 브라우저가 CORS 정책을 확인

- 이 요청이 단순 요청인지, 또는 Preflight 요청을 통해 서버의 허용 여부를 확인해야 하는지 결정

3. 단순 요청

- GET, POST, HEAD 같은 요청이 특정 조건을 충족하는 경우, 브라우저가 서버에 직접 요청을 보냄.
- 서버가 응답에 CORS 허용 헤더를 포함하면, 브라우저는 이를 확인 후 클라이언트에 전달
- CORS 허용 헤더가 없으면 브라우저는 요청을 차단하고 클라이언트는 요청 결과를 받지 못함.

4. Preflight 요청

- PUT, DELETE와 같은 안전하지 않은 메서드나 사용자 지정 헤더가 있는 요청은
브라우저가 먼저 OPTIONS 메서드로 프리플라이트 요청을 보냄.
- 프리플라이트 요청의 응답에서 서버가 허용 헤더를 제공하면, 브라우저는 클라이언트의 실제 요청을 서버로 보냄.
- 서버가 허용하지 않는 경우, 브라우저는 실제 요청을 진행하지 않고 클라이언트에 차단된 사실을 알림.