교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 즉 A 도메인에서 B 도메인의 자원을 요청할 때 ‘이 자원은 출처가 다른 도메인끼리 공유할 수 있어’라고 브라우저에게 알려주는 것이다. 알려주지 않으면 B 도메인에서는 요청한 자원을 반환해도 브라우저 단에서 CORS 위반으로 막아버린다.
MDN에서는 접근 제어 시나리오로 3가지를 소개하고 있다.
- 단순 요청(Simple Request)
특정 조건을 충족하는 요청에서 CORS가 지켜졌다고 판단하는 것이다. 특정 조건이라는 것이 제한적이라 잘 사용되지는 않는다. GET, HEAD, POST 중 하나의 메서드를 사용하면서 HTTP 헤더와 Content-Type 에 지정된 항목들만 사용이 가능하다.
- 프리플라이트 요청(Preflight Request)
요청시 본 요청 전에 예비요청을 먼저 보내 CORS를 확인한다. 예비요청은 OPTIONS 메서드가 사용되고 브라우저가 알아서 보낸다. 예비요청은 본 요청과 요청자에 대한 정보를 보내고 브라우저는 이에 대한 응답을 이용해 본요청을 보낼지 판단한다.
예비요청시 Access-Control-Request-Headers, Access-Control-Request-Method, Origin 등 본 요청과 도메인에 대한 정보를 보내주고,
응답은 Access-Control-Allow-Origin 등 허용하는 오리진을 보내준다.
- 인증된 요청(Credentialed Request)
인증된 요청을 사용하는 방법으로 CORS의 기본적인 방식이기 보다는 다른 출처 간 통신에서 좀 더 보안을 강화하고 싶을때 사용하는 방법이다.
XMLHttpRequest 객체나 fetch API 사용시 credentials 옵션을 부여하는 것으로 보안을 강화한다.
→ Access-Control-Allow-Origin: * 으로 응답이 와도 브라우저는 CORS를 위반했다고 판단한다. 명확하게 Origin이 정의되어 와야한다.