CORS는 'Cross Origin Resource Sharing'의 약자이다.
한국말로 풀이하면 교차 출처 자원 공유라고 할 수 있는데 이게 뭔 말이냐면
어떤 한 출처(origin)에서 실행되고 있는 웹 어플리케이션이
다른 출처(cross origin)에도 접근할 수 있도록 브라우저에게 알려주는 걸 말한다.
출처(origin)는 프로토콜, 도메인, 포트의 세 가지를 말한다.
이 세 가지가 일치하면 동일 출처, 하나라도 일치하지 않는다면 다른 출처가 되는 것이다.
(http와 https는 프로토콜이 다르므로 다른 출처이다.)
아래는 그 예시이다.
쉽게 말해 교차 출처 자원 공유는
다른 출처의 자원도 공유하게 해 준다라는 뜻이다.
현재 모든 cross site HTTP에는 SOP(Same-Origin-Policy)라고
동일 출처 정책이 적용돼 있는데 웹에서 다른 출처의 자원을 가져오는 건 흔한 일이기 때문에
몇 가지 예외사항을 둬서 교차 출처(다른 출처)를 사용할 수 있도록 되어 있다.
예외 사항의 종류로는,
- CORS 정책을 지킨 요청
- 실행 가능한 스크립트
- 렌더될 이미지
- 스타일시트
이 정도가 있다.
SOP와 CORS가 나오게 된 이유
웹은 개발자 도구를 이용해 DOM의 구조, 서버와의 통신 정보, 리소스 출처 등을
자유롭게 열람이 가능하기 때문에 XSS나 CSRF와 같은 취약점을 노린
해킹 기법들로부터 안전하지 못했다.
그래서 위와 같은 정책이 만들어지게 되었다.
CORS의 동작 원리
Simple Request와 Preflight Request, Credentialed Request로 나눌 수 있다.
1. Simple Request
서버로 요청을 보내면 서버는 응답을 하게 되는데,
이때 요청한 출처와 응답한 헤더값(Access-Control-Request-Headers)을 비교해서
유효 요청일 때 자원을 응답한다.
만약 유효하지 않다면 브라우저에서 막고 에러를 발생시킨다.
특징
- 예비요청을 본 요청에서 같이 처리하는데 제약사항들이 있어 잘 사용하지는 않는다.
- Origin == Access-Control-Allow-Origin을 본 요청에서 처리한다고 보면 된다.
제약사항
- 요청 메서드는 GET, HEAD, POST 중 하나여야 한다.
- Accept, Accept-Language, Content-Language, Content-Type, DPR,
Downlink, Save-Data, Viewport-Width, Width 헤더만 사용 가능하다. - Content-Type을 사용할 경우 application/x-www-form-urlencoded,
multipart/form-data, text/plain만을 허용한다. - 메서드는 3개 사용할 수도 있는데 인증헤더인 Authrization이나 Content-Type에서
application/json을 허용하지 않기 때문에 거의 볼 수 없다고 보면 된다.
2. Preflight Request
예비 요청이라는 뜻으로 개발할 때 가장 많이 마주치는 시나리오이다.
브라우저가 요청을 한 번에 보내지 않고 예비 요청과 본 요청을 나누어
서버에 전송하는 방식이다.
특징
- OPTIONS 메서드로 예비 요청을 보내고 본 요청을 보낸다.
- Origin에 대한 정보뿐 아니라 이후 보낼 본 요청에 대한 다른 정보들도 같이 포함돼 있다.
(Access-Control-Request-Headers, Access-Control-Request-Method 등) - 요청 Origin과 응답 Access-Control-Allow-Origin을 브라우저가 비교해
출처가 같다고 판단하면 본 요청을 보내고 다르다고 판단하면 에러를 발생시킨다. - 서버 사이드 영역이 아닌 브라우저의 영역이므로 서버는 200대의 status code를 반환한다.
3. Credentialed Request
보통 API 요청 메서드는 쿠키 정보를 싣지 않는다.
하지만 Credentials 옵션을 통해 요청 헤더에 쿠키를 넣을 수도 있다.
- same-origin(기본값) >> 같은 출처 간 요청에만 인증 정보를 담음
- Include >> 모든 요청에 인증 정보를 담음
- Omit >> 모든 요청에 인증 정보 담지 않음
특징
- Access-Control-Allow-Origin에는 '*' 를 사용할 수 없고
명시적인 URI를 넣어주어야 한다. - 응답 헤더에는 반드시 Access-Control-Allow-Credentials:true가 있어야 한다.
