CORS는 HTTP 헤더 전송으로 구성된 시스템으로, 브라우저가 cross-origin 요청에 대한 응답 액세스에 대해서 프런트 엔드 JavaScript 코드를 차단하는지 여부를 결정한다. 위에서 브라우저를 bold체로 한 이유는 cors는 브라우저 구현 스펙에 포함되는 정책이기 때문이다. 그래서 브라우저가 아닌 다른 방법으로는 이 정책이 적용되지 않는다. 요청을 한 origin(요청헤더에 포함)이 브라우저는 응답에 들어있는 access-control-allow-origin에 포함됬는지 판단하여 포함되지 않는다면 브라우저 단에서 막는다.
same-origin security policy는 cross-origin에 리소스 접근을 금한다. 하지만 cors는 웹서버에게 cross-origin 리소스들에 access 할 수 있게 선택권을 준다.
서버의 위치를 의미하는 URL은 여러개의 요소들로 구성되어져 있다.
https://www.xxx.com:8080/user?id=xxx#1
위의 URL의 구성요소들중 protocol(https), host(www.xxx.com), port(8080)이 세개가 모두 같아야 같은 출처라고 한다.
same-origin policy는 한 origin에서 로드한 문서 또는 스크립트가 다른 origin의 리소스에 접근하는 것을 제한하는 중요한 보안 메커니즘이다.
기본적으로 자바 스크립트는 자신이 실행된 문서의 서버의 내용만 읽을 수 있다. 만약 다른 서버의 내용까지 읽을 수 있게 되거나, 사용자의 키보드 입력을 가로채는 스크립트를 다른 페이지에 심을 수도 있을 것이다. 또 CSRF(Cross-Site-Request Forgery)나 XSS(Cross-Site Scriting)같은 방법으로 사용자의 정보를 탈취 당하는 문제를 방지하기 위해 만들어졌다. 이러한 보안상의 이슈로 자바스크립트 엔진 표준 스펙에는 동일 출처 정책이 포함되게 되었다.
하지만 웹은 same origin에 있는 리소스만이 아니라 다른 origin의 리소스에 접근할 일이 많아졌다. 그래서 cors를 이용한다.
preflight request
simple request
Credentialed request
출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS, https://evan-moon.github.io/2020/05/21/about-cors/