| {{{#!wiki style="margin:-10px" | <tablebordercolor=#808080><tablebgcolor=#808080> | 월드 와이드 웹 관련 문서 | }}} |
| {{{#!wiki style="word-break: keep-all; margin: 0 -10px -5px;" {{{#!folding [ 펼치기 · 접기 ] {{{#!wiki style="letter-spacing: -1px; margin:-6px -1px -11px; word-break: keep-all" | <colbgcolor=#808080><colcolor=#fff> HTTP | 버전(HTTP/1.1 · HTTP/2 · HTTP/3) · HTTPS · 응답 코드 · 헤더 · HSTS | |
| 표현 레이어 | HTML · URL(쿼리 문자열) · wai-aria | ||
| 클라이언트 | HTTP 클라이언트 · 웹 브라우저(브라우저 전쟁 · 렌더링 엔진 · WebDriver · 브라우저 개발자 도구) | ||
| 표준화 | 웹 표준 · W3C · WHATWG | ||
| 기술 | 웹소켓 · WebGL · 웹 컴포넌트 · 프로그레시브 웹 앱 · WebAssembly · CORS · WebRTC | ||
| 기타 | 오픈 그래프 프로토콜 · MDN |
| <#fff,#222> |
1. 개요
Cross Origin Resource Sharing(교차 출처 리소스 공유)의 약자로, 추가 HTTP 헤더를 사용하여 서로 다른 출처(도메인, 프로토콜, 포트)에 있는 웹 페이지나 서버가 서로의 자원에 접근할 수 있도록 허용하는 보안 메커니즘이다.2. 설명
CORS는 브라우저가 임의의 웹 페이지에서 다른 웹 페이지의 자원에 무분별하게 접근하는 것을 막아 XSS(Cross-Site Scripting)와 같은 보안 위협으로부터 웹 페이지를 보호하는 역할을 한다. 브라우저는 기본적으로 동일 출처 정책을 따르는데, 특정 웹 페이지에서 로드된 스크립트는 해당 페이지와 같은 출처의 리소스에만 접근할 수 있다. 따라서 다른 출처로부터 자원을 요청하려면 CORS 헤더를 통해 해당 출처를 서버가 허용한다는 것을 브라우저에 알려야 한다.CORS 정책을 다음 예시로 보자.
HTTP 요청을 보냈고, 서버로부터 받은 CORS 정책 헤더 값이 "https://namu.wiki"라고 하자.
| URL | 접근 가능한가? |
| https://namu.wiki/example | 접근 가능[1] |
| http://namu.wiki:8080/example | 접근 불가[2] |
| http://namu.wiki/example | 접근 불가[3] |
| https://tree.namu.wiki/example | 접근 불가[4] |
3. 작동 원리
- 브라우저가 다른 출처의 리소스에 접근하려고 시도하면, 브라우저는 요청 헤더에 "Origin" 필드를 포함하여 요청을 보낸다. "Origin" 필드에는 요청을 보낸 웹 페이지의 출처 정보가 담긴다.
- 서버는 요청을 받고, "Origin" 필드를 확인하여 요청이 허용되는 출처인지 판단한다. 허용된 출처라면 응답 헤더에 "Access-Control-Allow-Origin" 헤더를 포함하여 클라이언트에게 알린다. 이 헤더에는 허용된 출처의 목록이 포함되며, "*"는 모든 출처를 허용한다는 뜻이다.
- 브라우저는 서버의 응답을 받아 "Access-Control-Allow-Origin" 헤더를 확인한다. 요청을 보낸 출처가 허용 목록에 포함되어 있으면 응답을 처리하고, 그렇지 않으면 요청을 거부한다.