[Network] CORS란? 개념과 동작 방식

 

1. CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)를 번역하면 "교차 출처 리소스 공유"이다.

 

좀 더 쉽게 말하면 동일한 출처가 아닌 다른 출처에서 데이터를 주고 받는 것을 허용하는 정책이다

 

그럼 동일 출처 정책(Same-Origin-Policy)란?

동일 출처 정책은 동일한 출처의 리소스에만 접근하도록 제한하는 것이다. 아래 그림과 내용을 좀 더 자세히 알아보자!

 

 

 

- Protocol(Scheme) : http, https
- Host : 사이트 도메인
- Port : 포트 번호
- Path : 사이트 내부 경로
- Query string : 요청의 key와 value값
- Fragment : 해시 태크

 

CORS를 이해하는데 있어 딱 3가지만 기억하면 된다.

* Origin: Protocol + Host + Port

 

즉. 출처(Origin) 라는 것은 Protolcol과 Host 그리고 Port 까지 모두 합친 URL을 의미한다.

간단히 자바스크립트로도 현재 사이트의 Origin 확인 가능!

console.log(location.origin);

 

아래 이미지를 본다면 좀 더 정확하게 이해가 갈것이다. 

출처:https://ko.wikipedia.org/wiki/%EB%8F%99%EC%9D%BC-%EC%B6%9C%EC%B2%98_%EC%A0%95%EC%B1%85

 

 

잠깐잠깐,

INFO

그렇다면 클라이언트에서 미리 자바스크립트로 origin 헤더값을 위조하면 되지 않을까 싶지만, 브라우저에서 이를 감지하여 차단하기 때문에 결론은 불가능하다.

 

 

다시 CORS로 돌아와서 이러한 동일 출처 정책이 있기 때문에 원래는 다른 출처에서 리소스를 받아 오는 것이 제한된다.

하지만 다른 출처로부터 리소스를 받아오는 것은 필수 요소가 되었고, 이러한 문제를 해결하기 위해 나온 정책이 바로 CORS(교차 출처 자원 공유)이다.

---

2. 그렇다면 CORS는 어떻게 안전하게 다른 출처와 리소스를 공유하고 동작할까?

 

(1) 클라이언트 HTTP 프로토콜의 요청 HEAD 부분에 출처(Origin) 담아 서버에게 전달
(2) 서버는 HTTP 프로토콜의 응답 HEAD 부분에 Access-Control-Allow-Origin 에 해당서버에 접근이 허용된 출처(Origin) 를 담아 보냄
(3) 마지막으로 웹브라우져에서 요청할때 보낸Origin과 응답으로 받은 Access-Control-Allow-Origin 를 비교.

 

 

 

> 예비 요청(Preflight Request)

 

사실 브라우저는 요청을 보낼때 한번에 바로 보내지 않고, 먼저 예비 요청을 보낸 서버와 잘 통신 되는지 확인한 후 본 요청을 보낸다.

즉, 예비 요청의 역할은 본 요청을 보내기 전에 브라우저가 스스로 안전한 요청인지 미리 확인 하는 것이다.

 

조금 더 구체적으로 말하면 헤더에 Access-Control-Request-Method를 통해 요청하는 HTTP 메서드 GET,POST,PUT,DELETE 중 하나의 메서드와 Access-Control-Request-Headers를 통해 OPTIONS라는 헤더를 넣고 요청을 보낸다.

이 때 예비로 확인하는 것 뿐이기 때문에 바디에 아무것도 작성하지 않고 헤더만 보낸다,

해당 메서드와 헤더가 유효하다면 서버는 응답 헤더를 통해 접근 가능한지(Access-Control-Allow-Origin), 사용할 수 있는 리소스의 리스트(Access-Control-Expose-Headers), 캐싱 되는 시간(Access-Control-Max-Age) 등을 알려주는 것이다.

 

그럼 요청이 다 preflight Request로 계속 가게 되나요??

request header에 Access-Control-Max-Age 를 설정하면 일정 시간동안 preflighted 요청을 보내지 않고 바로 값을 요청 할수있음

 

출처: https://medium.com/wantedjobs/cors-a-to-y-28cc0b16349d

 

Access-Control-Max-Age 를 설정해서 처음 요청은 options > post 로 preflighted request를 하지만, 이후에는 바로 post 요청을 함

 

>  단순 요청(Simple Request)

 

단순 요청은 위의 예비 요청과 달리 서버에 바로 본격적으로 요청하는 것이다. 그렇다면 미리 확인하지도 않고 어떻게 안전하게 리소스를 요청하는 것일까?

그 방법은 조금 까다로운 조건들을 거는 것이다.

1. Access-Control-Request-Method를 통해 요청할 때 메서드는 HTTP 메서드가 아닌 GET,HEAD,POST 중 하나여야 한다.
2. Access-Control-Request-Headers 통해 요청을 보낼 때 Accept  Accept-Language,Content-Language, Content-TypeDPR, Downlink, Save-Data, Viewport-Width 중 하나여야 한다.
3. Content-Type을 사용할 경우 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나여야 한다.
 
이렇게 까다로운 조건을 걸고 해당 조건에 부합하다면 안전한 요청이라 인식하고 데이터를 응답하는 형식이다.

 

 

---

 

출처

https://beomy.github.io/tech/browser/cors/

https://medium.com/wantedjobs/cors-a-to-y-28cc0b16349d

https://inpa.tistory.com/entry/WEB-📚-CORS-💯-정리-해결-방법-👏

https://evan-moon.github.io/2020/05/21/about-cors/

https://docs.tosspayments.com/resources/glossary/cors