CORS
브라우저는 Cross-Origin HTTP요청들을 받으면, 이를 보안상의 이유로 제한한다. Cross-Origin 요청에 대한 응답을 받기 위해서는 서버의 동의가 필요한데, 서버가 이를 동의할 경우 요청에 대한 응답을 처리하고, 그렇지 않을 경우 브라우저에서 거절한다.
이렇게 허락을 구하는 메커니즘은 HTTP-header를 통해 이뤄진다. HTTP-header를 통해 Cross-Origin HTTP 요청에 대한 허락을 구하는 것을 CORS(Cross-Origin Resource Sharing)라고 한다.
Cross-Origin
다음 중 하나에라도 포함된다면 Cross-Origin이다.
- 프로토콜: http와 https는 서로 다른 프로토콜이다.
- 도메인: domain.com과 other-domain.com은 서로 다른 도메인이다.
- 포트: 8080포트와 3000포트는 서로 다른 포트이다.
CORS 사용 이유
앞서 브라우저는 보안상의 이유로 Cross-Origin HTTP요청을 제한한다고 했다. 이렇게 Cross-Origin HTTP요청을 제한하고, CORS를 통해 서버로부터 허가를 받는 이유는 무엇일까?
CORS없이 모든 곳에서 데이터를 요청할 수 있게 된다면, 다른 사이트에서 기존의 사이트를 흉내낼 수 있게 된다. 이렇게 기존의 사이트를 흉내낼 경우, 사용자의 모방 사이트 로그인 세션을 통해 사용자의 로그인 정보를 얻고, 이를 통해 기존 사이트에 방문하여 사용자의 개인 정보를 악의적으로 탈취하거나, 피해를 입힐 위험이 생긴다. 이러한 사이버 공격을 예방하기 위해 CORS를 통해 서버로부터 허가를 받도록 해야한다.
CORS의 동작
Simple request의 경우
- 서버로 요청 전송
- 서버의 응답이 왔을 때, 브라우저가 요청한 Origin과 응답한 헤더
Access-Control-Request-Headers의 값을 비교하여 유효한 요청일 경우, 리소스를 반환하고, 그렇지 않다면 브라우저에서 이를 막고 에러를 발생시킨다.
Simple request
- HTTP method (
GET,HEAD,POST) 중 하나이다. - 자동으로 설정되는 헤더는 제외하고 설정할 수 있는 헤더들(
Accept,Accept-Language,Content-Language)만 변경한다. - Content-Type이
application/x-www-form-urlencoded,multipart/form-data,text/plain중 하나이다.
위 조건들을 만족할 때 Simple request라고 한다. 이 경우, 추가적으로 확인하지 않고 바로 본 요청을 보낸다.
preflight 요청의 경우
- Origin헤더에 현재 요청하는 origin과
Access-Control-Request-Headers헤더에 요청하는 HTTP method와Access-Control-Request-Headers요청 시 사용할 헤더를 OPTIONS 메서드로 내용물 없이 헤더만 서버로 전송한다. - 브라우저가 서버의 응답 헤더를 보고, 유효한 값일 경우, 다시 서버로 요청을 보내 리소스를 응답받고, 그렇지 않을 경우 요청이 중단되고 에러가 발생한다.
preflight 요청
Simple request가 아닌 Cross-Origin 요청은 모두 preflight요청을 한다.
- 실제 요청을 보내는 것이 안전한지 불확실하기 때문에 이를 확인하고자 먼저 OPTIONS 메서드를 사용하여 Cross-Origin HTTP 요청을 보낸다.
- 이는 사용자의 데이터에 영향을 줄 수 있는 요청이기 때문에 사전에 확인한 후 요청을 보내기 위함이다.
