목표: 개념에 대해 이해하기
**다른 출처(서버)**에 있는 리소스를 가지고 오려고 할 때, 추가 HTTP 헤더를 사용하여 브라우저에게 접근 권한을 부여하도록 하는 객체.
서버 쪽에서 클라이언트 대상으로 리소스를 허용해 줄지 말지를 결정한다.
옛날에는 서버 자체적으로 클라이언트 정보를 가지고 있다가 사용자에게 제공해 주는 방식이어서, 보안상으로 의심의 여지가 없었다. 하지만 요즘은 다른 출처 리소스도 필요하다.
출처가 다르다고 판단할 경우에는 리소스를 허용해 주지 않는다.
판단 기준은 3가지인데, 프로토콜, 포트번호, 도메인(호스트) 이다. 이 세가지가 모두 같아야만 같은 출처라고 판단한다.
예를 들어 a사진은 a 서버에서만 가지고 와야 하는데, 신문기사는 다른 b 서버에서 가지고 와야 할 때, b 서버가 클라이언트에게 접근 권한을 부여해주는 것이라고 이해할 수 있다.
즉, 다른 출처의 리소스를 불러오려면, 그 응답에는 적절한 CORS 헤더가 포함되어 있어야 한다.
최신 브라우저는 XMLHttpRequest, fetch API에서 이런 정책을 적용하여 보안상의 위험을 완화하였다.
그 외에도 아래와 같이 브라우저 폰트나, 그래픽 이미지 등을 사용하고자 할 경우에도 이러한 정책을 필요로 한다.
웹 폰트(CSS 내 @font-face에서 교차 도메인 폰트 사용 시),
특정 웹페이지에만 해당 폰트 사용하도록 서버에서 배포하는 것
WebGL 텍스쳐.
drawImage() (en-US)를 사용해 캔버스에 그린 이미지/비디오 프레임.
이미지로부터 추출하는 CSS Shapes.