1. 개요
Cross Origin Resource Sharing(교차 출처 리소스 공유)의 약자로, 추가 HTTP 헤더를 사용하여 서로 다른 출처(도메인, 프로토콜, 포트)에 있는 웹 페이지나 서버가 서로의 자원에 접근할 수 있도록 허용하는 보안 메커니즘이다.2. 설명
CORS는 브라우저가 임의의 웹 페이지에서 다른 웹 페이지의 자원에 무분별하게 접근하는 것을 막아 XSS(Cross-Site Scripting)와 같은 보안 위협으로부터 웹 페이지를 보호하는 역할을 한다. 브라우저는 기본적으로 동일 출처 정책을 따르는데, 특정 웹 페이지에서 로드된 스크립트는 해당 페이지와 같은 출처의 리소스에만 접근할 수 있다. 따라서 다른 출처로부터 자원을 요청하려면 CORS 헤더를 통해 해당 출처를 서버가 허용한다는 것을 브라우저에 알려야 한다.CORS 정책을 다음 예시로 보자.
HTTP 요청을 보냈고, 서버로부터 받은 CORS 정책 헤더 값이 "https://namu.wiki"라고 하자.
| URL | 접근 가능한가? |
| https://namu.wiki/example | 접근 가능: 프로토콜, 도메인, 포트가 같음 |
| http://namu.wiki:8080/example | 접근 불가: 프로토콜, 포트가 다름 |
| http://namu.wiki/example | 접근 불가: 프로토콜이 다름 |
| https://tree.namu.wiki/example | 접근 불가: 도메인이 다름 |
3. 작동 원리
- 브라우저가 다른 출처의 리소스에 접근하려고 시도하면, 브라우저는 요청 헤더에 "Origin" 필드를 포함하여 요청을 보낸다. "Origin" 필드에는 요청을 보낸 웹 페이지의 출처 정보가 담긴다.
- 서버는 요청을 받고, "Origin" 필드를 확인하여 요청이 허용되는 출처인지 판단한다. 허용된 출처라면 응답 헤더에 "Access-Control-Allow-Origin" 헤더를 포함하여 클라이언트에게 알린다. 이 헤더에는 허용된 출처의 목록이 포함되며, "*"는 모든 출처를 허용한다는 뜻이다.
- 브라우저는 서버의 응답을 받아 "Access-Control-Allow-Origin" 헤더를 확인한다. 요청을 보낸 출처가 허용 목록에 포함되어 있으면 응답을 처리하고, 그렇지 않으면 요청을 거부한다.