SOP(Same-origin Policy)
SOP는 어떠한 문서나 스크립트가 다른 프로토콜/ 포트/ 호스트에 있는 리소스를 사용하는 것을 제한하는 정책이다.
CORS(Cross-Origin Resource Sharing)
CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.
ex)
https://domain-a.com의 프론트엔드 자바스크립트 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우
보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 이 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러 올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS헤더를 포함한 응답을 반환해야 한다.
위의 그림을 보면 Web document의 경우 domain-a.com에서 왔는데 Canvas image의 경우 domain-b.com에서 왔기 때문에 CORS에러가 발생한다.
이러한 경우 서버(domain-b.com)의 응답 헤더에
Access-Control-Allow-Origin: https://domain-a.com을 추가해줌으로써 해결 할 수 있다.
어떤 요청이 CORS를 사용하는 가
- XMLHttpRequest 와 Fetch API 호출
- 웹 폰트
- WebGL xprtmcu
- drqwImage()를 사용해 캔버스에 그린 이미지/비디오 프레임
- 이미지로부터 추출하는 CSS Shapes
기능적 개요
교차 출처 리소스 공유 표준은 웹 브라우저에서 해당 정보를 읽는 것이 허용된 출처를 서버에서 설명할 수 있는 새로운 HTTP 헤더를 추가함으로써 동작한다. 또한 GET을 제외한 HTTP 메서드에 대해, CORS 명세는 브라우저가 요청을 OPTIONS 메서드로 preflight하여 지원하는 메서드를 요청하고, 서버의 허가가 떨어지면 실제 요청을 보내도록 요구하고 있다. 또한 서버는 클라이언트에게 요청에 인증정보(쿠키, HTTP 인증)를 함께 보내야 한다고 알려줄 수도 있다.
인증정보를 포함한 요청
withCredential 옵션은 서로 다른 도메인에 요청을 보낼 때 요청에 credential 정보를 담아서 보낼지 결정한다.
credential 정보가 포함되어 있는 요청
- 쿠키를 첨부해서 보내는 요청
- 헤더에 Authorization 항목이 있는 요청
따라서 클라이언트에서 보내고자 하는 요청이 두 가지 항목 중 한 가지라도 포함하고 있다면 withCredentials 옵션을 true로 설정해야 한다.
credential 정보가 포함되어 있는 요청이 정상적으로 처리 되기 위해서는 다음과 같은 설정이 필요하다.
- 응답 헤더의 Access-Control-Allow-Credentials 항목을 true로 설정해야 한다.
- 응답 헤더의 Access-Control-Allow-Origin 값이 와일드 카드 문자를 제외하고 반드시 설정되어야 한다.
- 응답 헤더의 Access-Control-Allow-Methods의 값을 지정해야 할 겅우 와일드카드 문자는 사용할 수 없다
- 응답 헤더의 Access-Control-Allow-Headers의 값을 지정해야 할 경우 와일드카드 문자는 사용할 수 없다.
credential 정보가 포함되어 있는 요청에 대한 응답에서 Access-Control-Allow-* 헤더 값이 와일드 카드 문자열로 설정될 경우, 요청에 대한 응답이 클라이언트로 전해지기는 하지만 클라이언트 js에서는 브라우저가 이를 차단하기 때문에 이 응답에 접근을 할 수 없는 상태가 된다.
CORS응답에 설정된 쿠키에는 일반적인 third-party cookie 정책이 적용된다. 때문에 사용자의 브라우저 설정이 모든 third-party cookies를 거부하도록 되어 있다면, 쿠키는 저장되지 않는다.
