![width:320px height:320px bg right](https://media2.giphy.com/media/bkTNz8VzVvKrtgVjXf/giphy.webp?cid=d8f9e3b89riopha2saf0ayg26z69ox1vmnvv6dsd4r607nsd&ep=v1_stickers_search&rid=giphy.webp&ct=s) # SOP와 CORS ## [이인제(소플)](https://www.soaple.io/) --- # 목차 - [SOP란?](#sop란) - [CORS란?](#cors란) - [CORS와 SOP의 관계](#cors와-sop의-관계) - [CORS 작동 과정](#cors-작동-과정) - [CORS Headers](#cors-headers) - [CORS 설정 시 주의할 점](#cors-설정-시-주의할-점) - [Proxy를 통해 CORS 우회하기](#proxy를-통해-cors-우회하기) --- # SOP란? --- # **S**ame-**O**rigin **P**olicy --- # **SOP** (Same-Origin Policy) - 브라우저가 **서로 다른 출처(origin)** 에서 로드된 리소스 간에 **상호작용하는 것을 제한**하는 정책 - 악의적인 사이트로부터 데이터를 가져오거나 조작하는 것을 방지하기 위해 설계됨 - 예: XSS, CSRF 공격 - 웹 애플리케이션 보안 강화 --- # Origin의 구성 요소 - **프로토콜** (예: `http://`, `https://`) - **도메인** (예: `example.com`, `sub.example.com`) - **포트** (예: `80`, `443`) # Same-Origin 판단 기준 - 동일 출처 정책(SOP)은 두 리소스가 위 **세 가지 요소가 모두 같을 때**만 상호작용할 수 있도록 함 - 예시: `https://example.com`과 `http://example.com` 비교 - 프로토콜이 다르기 때문에 다른 출처로 간주되며, SOP에 의해 상호작용이 제한됨 --- # Same Origin 판단 예시 http://store.company.com/dir/page.html 🔽 위 URL과 출처를 비교한 결과 🔽 | URL | Outcome | Reason | |---|---|---| | http://store.company.com/dir2/other.html | Same origin | path만 다름 | | http://store.company.com/dir/inner/another.html | Same origin | path만 다름 | | https://store.company.com/page.html | Failure | 프로토콜이 다름 | | http://store.company.com:81/dir/page.html | Failure | 포트가 다름 (http는 기본 80포트) | | http://news.company.com/dir/page.html | Failure | 도메인(hostname)이 다름 | --- # SOP 제한 예시 - **AJAX 요청** - 브라우저는 페이지의 출처와 다른 출처로 AJAX 요청을 보내는 것을 기본적으로 차단 - **쿠키** - 동일 출처가 아닌 웹사이트에서 쿠키에 접근하는 것을 차단 - **DOM 조작** - 서로 다른 출처에서 불러온 리소스 간의 DOM 조작을 금지 --- # CORS란? --- # **C**ross-**O**rigin **R**esource **S**haring --- # **CORS** (Cross-Origin Resource Sharing) - 웹 브라우저의 보안 기능 - 동일 출처 정책(SOP)을 보완하여 **다른 출처의 리소스를 요청할 수 있도록** 하는 기능 - CORS를 설정하기 위해서는 서버와 클라이언트 간 협력이 필요 - HTTP 헤더를 사용하여 설정 --- # CORS와 SOP의 관계 - **SOP**는 웹 보안을 유지하기 위한 강력한 규칙 - 실제로는 서로 다른 도메인 간의 합법적인 통신이 필요할 수 있음 - **CORS** 는 이러한 제한을 완화하는 메커니즘을 제공 - 서버는 특정 조건에서 다른 출처의 요청을 허용하도록 설정할 수 있음 - 서버가 명시적으로 허용한 출처에 대해 브라우저가 리소스를 교환할 수 있게 해줌 ## 💡 **CORS는 SOP의 예외를 정의하는 방법!** --- # CORS 작동 과정 --- # **CORS** 작동 과정 1. 브라우저가 Preflight 요청(`OPTIONS` method) 전송 2. 서버는 `Access-Control` 헤더와 함께 응답 4. 서버 응답에 따라 접근이 허용되거나 거부됨 5. 허용될 경우 실제 요청 전송 --- # **CORS** 작동 과정 다이어그램 ```mermaid sequenceDiagram participant Browser participant Server Browser->>Server: OPTIONS /resource Server-->>Browser: Access-Control-Allow-Origin Browser->>Server: GET /resource Server-->>Browser: Resource Data ``` --- ![bg fit](https://mdn.github.io/shared-assets/images/diagrams/http/cors/fetching-page-cors.svg) --- # CORS Headers --- # CORS Headers Preflight 응답을 통해 **서로 다른 출처(origin)에서 리소스를 공유하고 액세스하는 방법을 제어** - `Access-Control-Allow-Origin`: 특정 출처를 허용 - `Access-Control-Allow-Methods`: 특정 메소드를 허용 - `Access-Control-Allow-Headers`: 특정 헤더를 허용 - `Access-Control-Allow-Credentials`: 자격 증명 포함 여부를 설정 - `Access-Control-Expose-Headers`: 클라이언트가 접근할 수 있는 헤더를 지정 - `Access-Control-Max-Age`: Preflight 요청의 캐시 시간을 설정 --- # `Access-Control-Allow-Origin` ```http HTTP/1.1 200 OK Access-Control-Allow-Origin: https://example.com ``` - **특정 출처(origin)** 를 허용하기 위한 헤더 - 와일드카드(*)를 사용하여 모든 출처를 허용할 수 있음 - 보안상 주의가 필요하며, 서버 설정이 매우 중요함 --- # `Access-Control-Allow-Methods` ```http HTTP/1.1 200 OK Access-Control-Allow-Methods: GET, POST, PUT ``` - **특정 HTTP 메서드**를 허용하기 위한 헤더 - `GET`, `POST`, `PUT` 등 --- # `Access-Control-Allow-Headers` ```http HTTP/1.1 200 OK Access-Control-Allow-Headers: Content-Type, Authorization ``` - **특정 헤더**를 허용하기 위한 헤더 - `Content-Type`, `Authorization` 등 --- # `Access-Control-Allow-Credentials` ```http HTTP/1.1 200 OK Access-Control-Allow-Credentials: true ``` - **자격 증명 포함 여부**를 설정하기 위한 헤더 - 쿠키, 인증 정보 등 --- # `Access-Control-Expose-Headers` ```http HTTP/1.1 200 OK Access-Control-Expose-Headers: Content-Encoding ``` - **클라이언트가 접근할 수 있는 헤더**를 지정하기 위한 헤더 --- # `Access-Control-Max-Age` ```http HTTP/1.1 200 OK Access-Control-Max-Age: 600 ``` - **Preflight 요청의 캐시 시간**을 설정하기 위한 헤더 - 초(seconds) 단위 --- # CORS Headers 설정 예시 ```http HTTP/1.1 200 OK Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Methods: GET, POST Access-Control-Allow-Headers: Content-Type Access-Control-Allow-Credentials: true ``` --- # CORS 설정 시 주의할 점 --- # 잘못된 **CORS** 설정 - 잘못 구성된 헤더 - 사전 요청(preflight) 응답 누락 - 잘못된 허용 출처 설정 - 과도하게 제한적인 정책 > 브라우저별로 다른 동작을 유발하고 디버깅의 어려움을 더하며, > 보안 취약점 및 성능 저하로 이어질 수 있음 --- # **CORS** 제대로 설정하기 - 특정 출처(origin) 지정 - 민감한 데이터에는 와일드카드(`*`) 사용 지양 - 사전 요청(preflight) 응답 설정 - 허용하는 메서드와 헤더 제한 - 자격 증명(credentials) 사용 시 주의 - CORS 요청 모니터링 및 로깅 - CORS 정책 정기적으로 검토 - 다양한 브라우저에서 테스트 --- # Proxy를 통해 CORS 우회하기 --- # Proxy를 통해 CORS를 우회하는 과정 1. **브라우저**가 **웹앱**에 API 요청을 보냄 (CORS 정책에 의해 요청이 차단됨) 2. **웹앱**은 요청을 **CORS 프록시**로 전달 3. **CORS 프록시**는 올바른 CORS 헤더를 추가하여 **API 서버**에 요청을 보냄 4. **API 서버**가 **CORS 프록시**에 응답을 전송 5. **CORS 프록시**는 응답을 **웹앱**에 전달 6. **웹앱**이 응답을 **브라우저**로 전송 --- # Proxy를 통해 CORS를 우회하는 과정 다이어그램 ```mermaid sequenceDiagram participant 브라우저 participant 웹앱 participant CORS_프록시 as CORS 프록시 participant API_서버 as API 서버 브라우저->>웹앱: API 요청 (CORS로 차단) 웹앱->>CORS_프록시: 요청을 CORS 프록시에 전달 CORS_프록시->>API_서버: CORS 헤더와 함께 요청 전달 API_서버-->>CORS_프록시: API 응답 전송 CORS_프록시-->>웹앱: API 응답 전달 웹앱-->>브라우저: 응답을 브라우저로 전송 ``` --- # (예시) Express를 사용하는 Node.js 프록시 서버 ```javascript const express = require('express'); const request = require('request'); const app = express(); const PORT = 3000; // 프록시 엔드포인트 설정 app.use('/proxy', (req, res) => { const url = 'https://타겟서버.com' + req.url; // 타겟 서버 URL 설정 req.pipe(request(url)).pipe(res); }); app.listen(PORT, () => { console.log(`Proxy server is running on http://localhost:${PORT}`); }); ``` --- # Proxy를 통해 CORS 우회가 가능한 이유 (1/2) ### **동일 출처 정책은 서버에 적용되지 않음** - CORS 정책은 브라우저에서 클라이언트 측 보안을 위한 것 - 서버 측에서는 동일 출처 정책이 적용되지 않음 - 서버는 일반적으로 들어오는 모든 HTTP 요청을 받아들이며, 요청의 출처를 신경 쓰지 않음 ### **Proxy 서버는 합법적인 요청을 보냄** - 클라이언트의 요청을 받아서 타겟 서버로 전달할 때, 자신의 서버로부터 요청을 보냄 - 타겟 서버는 이 요청을 프록시 서버로부터 온 정상적인 HTTP 요청으로 인식함 --- # Proxy를 통해 CORS 우회가 가능한 이유 (2/2) ### **헤더와 메서드가 올바르게 설정됨** - Proxy 서버는 클라이언트의 요청을 전달할 때, 필요한 HTTP 헤더와 메서드를 올바르게 설정함 (타겟 서버가 이를 정상적인 요청으로 처리하도록 함) - 타겟 서버는 요청의 출처보다는 요청의 내용과 형식을 중요하게 여김 ### **서버의 보안 설정** - 일반적으로 서버는 다양한 출처로부터의 요청을 수락함 - 프록시 서버가 타겟 서버에 접근할 수 있는 권한이 있다면 요청이 성공적으로 처리됨 --- # References - https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS --- # Thank you! ## Made with ♥ by [Soaple](https://www.soaple.io/)