cors란 cross origin resource sharing 의 줄임말로
교차 출처 리소스 공유 즉, 다른 출처에서 오는 리소스의 요청을 응답해주거에 대한 프로토콜의 한 정책이다.
모든 출처에서 리소스를 전부 공유해주는 건 보안상 위험하니 이런 정책을 만든 것이다.
웹 개발을 하는 누구나 한번은 이런 에러를 봤을 수 있다고 하지만 솔직히 나는 지금까지 이런 에러가 일어나는 것을 볼 수 없었다. 그 이유는 지금까지 내가 혼자 프론트도 만들고 백엔드도 만들었기 때문이였다.
그래서 이번에 프론트와 백엔드가 분리되어 협업을 하며 이제서야 처음으로 이런에러를 해결해야하는 상황이 온것이였다.
일단 어떻게 해야 이 에러를 정확하게 발생시킬까?
그 원인을 알기 위해서는 cors에서의 origin 즉, 출처에 대한 정확한 기준을 알면 이 에러를 정확하게 발생시킬 수 있다.
여기서의 origin은 3가지로 되어있다.
scheme host port
sheme은 url에서의 protocol 예시로 http:// or https://
host는 url에서의 host 예시로 naver.com
port는 url에서의 port 예시로 :80 or :8080이다.
그래서 http request header에서 Origin의 값에 이런 3가지 요소에 주의하여 적은 출처와 서버에서 지정한 http response header에서 Access-Control-Allow-Origin의 값에 적은 출처가 일치하면 cors정책을 만족하는 것이고 다르면 cors정책을 위반하게 되는 것이다.
(근데 postman으로 http request header의 origin 을 내맘대로 보내서 서버에서 받은 http request header를 봤는데 origin이 내 맘대로 보낸 값이 적혀있는 걸 보면 이게 보안상 완전하게 막는 건 아닌거같다. 클라이언트 서버와 정확한 test를 해보고 싶으니 담주에 시간나면 내가 cors만져서 테스트해보고 싶다.)
그리고 이런 cors는 시나리오가 3가지 있다. 기본적으로 있는 시나리오는 정확히는 2가지 한가지는 옵션을 바꿔야지 생기는 시나리오이다.
1.simple request
이 시나리오의 장점은 뒤에 쓸 preflighted request 즉, 예비요청을 생략한다는 점이다. 하지만 이런 요청을 보내기 위해서는 여러 조건을 만족해야한다.
- 요청의 메소드는 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만 허용된다.
2."preflighted" request
simple request가 아닌경우 브라우저에서 보내는 요청은
예비요청과 본요청으로 나뉘어진다.
예비요청은 options메소드로 요청하고 그 요청으로 본 요청에 대한 정보를 받아 이후 본 요청을 하게된다.
3."credentialed" requests
세번째는 기본적인 요청은 아니고 브라우저에 있는 쿠키를 헤더에 포함시켜서 보내고 싶을 때이다.
클라이언트에서 http request 헤더의 credential 값을 include로 하면 쿠키랑 같이 보내지는데 이때 서버에서 http response header의 아래 조건을 충족해야 response가 보내진다.
- Access-Control-Allow-Origin에는 *를 사용할 수 없으며, 명시적인 URL이어야한다.
- 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 존재해야한다
그리고 사실은 다른 출처끼리는 리소스 요청을 제한하는 정책인 sop(same origin policy)가 있다. cors는 이런 정책에서의 예외사항인것이다. 즉, 다른 출처이면 적어도 cors는 지키라는 것이다. cors까지 안지키면 그건 좀..;; 이라며 에러가 뜬다고 보면된다.
출처:
https://evan-moon.github.io/2020/05/21/about-cors/
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
의문
1. http request origin을 바꾸면 결국 서버에서 설정한 Access-Control-Allow-Origin을 통과하게 되는데 그럼 서버에서 막는 다른 방법이 있나?
