cors

Cors(Cross-Origin Resource Sharing)

CORS는 HTTP 헤더 전송으로 구성된 시스템으로, 브라우저가 cross-origin 요청에 대한 응답 액세스에 대해서 프런트 엔드 JavaScript 코드를 차단하는지 여부를 결정한다. 위에서 브라우저를 bold체로 한 이유는 cors는 브라우저 구현 스펙에 포함되는 정책이기 때문이다. 그래서 브라우저가 아닌 다른 방법으로는 이 정책이 적용되지 않는다. 요청을 한 origin(요청헤더에 포함)이 브라우저는 응답에 들어있는 access-control-allow-origin에 포함됬는지 판단하여 포함되지 않는다면 브라우저 단에서 막는다.

same-origin security policy는 cross-origin에 리소스 접근을 금한다. 하지만 cors는 웹서버에게 cross-origin 리소스들에 access 할 수 있게 선택권을 준다.

출처(origin)

서버의 위치를 의미하는 URL은 여러개의 요소들로 구성되어져 있다.

https://www.xxx.com:8080/user?id=xxx#1

위의 URL의 구성요소들중 protocol(https), host(www.xxx.com), port(8080)이 세개가 모두 같아야 같은 출처라고 한다.

Same-Origin Policy

same-origin policy는 한 origin에서 로드한 문서 또는 스크립트가 다른 origin의 리소스에 접근하는 것을 제한하는 중요한 보안 메커니즘이다.

왜 Same-Origin Policy가 필요할까?

기본적으로 자바 스크립트는 자신이 실행된 문서의 서버의 내용만 읽을 수 있다. 만약 다른 서버의 내용까지 읽을 수 있게 되거나, 사용자의 키보드 입력을 가로채는 스크립트를 다른 페이지에 심을 수도 있을 것이다. 또 CSRF(Cross-Site-Request Forgery)나 XSS(Cross-Site Scriting)같은 방법으로 사용자의 정보를 탈취 당하는 문제를 방지하기 위해 만들어졌다. 이러한 보안상의 이슈로 자바스크립트 엔진 표준 스펙에는 동일 출처 정책이 포함되게 되었다.

same-origin policy 에게 발목 잡히다

하지만 웹은 same origin에 있는 리소스만이 아니라 다른 origin의 리소스에 접근할 일이 많아졌다. 그래서 cors를 이용한다.

동작 방식

  1. preflight request

    • api 요청을 하면, 본 요청을 하기전에 예비 요청을 한 후에, Access-Control-Allow-Origin에 포함된 출처를 확인하여 본 요청을 할지 결정한다.
    • 예비 요청은 option 메서드를 사용한다.
  2. simple request

    • 예비 요청을 보내지 않고 바로 서버에게 요청을 보내고 서버가 응답한 헤더에 Access-Control-Allow-Origin 포함된 출처를 확인한다.
    • 이 요청을 하기 위해선 몇가지 요구사항을 만족시켜야한다.
    • 메소드가 get, post, head 중 하나여야함.
    • 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. Credentialed request

    • 다른 출처 간 통신에서 보안을 강화하기 위해 사용한다.
    • 기본적으로 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다. 이때 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션이다.
    • credentialed request 에 응답할 때 서버는 Access-Control-Allow-Origin 헤더 ”*” 와일드카드를 사용하는 대신 출처를 넣어야한다.
    • 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 존재해야한다.

출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS, https://evan-moon.github.io/2020/05/21/about-cors/


Written by@Zero1
This blog is for that I organize what I study and my thinking, feeling and experience.

GitHub