Cross-Origin Resource Sharing(CORS)와 preflight

CORS(교차 출처 리소스 공유)
브라우저에서는 보안적인 이유로 cross-origin(교차 출처) http 요청을 제한하기 때문에 cross-origin을 요청하려면 서버의 동의가 필요하다. 이러한 허락을 HTTP-header를 이용하여 구하고 거절하는 정책을 CORS라고 한다.

---

 

Cross-Origin(교차 출처)

cross-origin이란 프로토콜(http / https), 포트 번호, 도메인 중 하나라도 다른 경우를 말한다.

 

 

CORS가 필요한 이유

CORS는 보안상의 이유로 필요한데, CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 되면 다른 사이트에서 원래 사이트를 흉내낼 수 있게 된다. 예를 들어, 내가 만든 사이트와 완전히 동일하게 동작하도록 하여 사용자가 로그인을 하게 만들고, 로그인 했던 세션을 탈취하여 악의적으로 정보를 추출하거나 무한 요청을 보내 서버를 터뜨리는 등의 공격이 가능해진다. 이를 막기 위해 브라우저에서 보호하고, 필요한 경우에만 서버에 요청하고 허락을 구하도록 하기 위해 꼭 필요하다.

---

 

CORS의 동작 원리

 

1. 단순 요청의 경우(Simple Request)

예비 요청 없이 바로 본 요청을 보내는 경우, Preflight를 트리거하지 않음

 

Simple Request의 조건

• 메소드가 get, head, post 중 하나일 경우
• Content-Type
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안된다.

-> 사진 파일 업로드(multipart/form-data)가 아니라면 대체로 REST API가 Content-Type으로 application/json을 사용하기 때문에 거의 대부분은 Preflight 방식으로 처리

 

서버로 요청을 하고, 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더의 값을 비교하여 유효한 요청이라면 리소스를 응답한다. 만약 유효하지 않은 요청이라면 브라우저에서 이를 제한하고 에러가 발생한다.

 

 

2. Preflight Request의 경우

preflight란 본 요청을 보내기 전에 안전한지 확인하기 위해 OPTIONS 메소드로 보내는 예비 요청을 말한다.

preflight가 필요한 이유는 CORS 정책을 미리 검사하여 CORS 정책에 위반 되는 불필요한 요청 때문에 일어나는 리소스 낭비와 서버의 부하를 막기 위해서이다.

preflight 동작

Preflight의 조건

• Content-Type이 다음과 같고 get, head, post 요청인 경우
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain