CORS mechanism

CORS Mechanism를 번역한 내용입니다.

1. CORS란 무엇인가?

• Cross-Origin Resource Sharing

• 클라이언트(=웹 브라우저)에 의해 강요되고 조절되는 Http에 근거한 보안 메커니즘

• 자기 자신 외 다른 origin을 명시해주어 다른 출처에서도 리소스에 대한 요청이 올 수 있도록 허가하는 방법이다.

• 하나의 origin(출처)가 다른 origin과 리소스를 어떻게 주고 받는지를 엄격히 제한하는 the same-origin policy(SOP)에 대한 대응으로 설계 되었다.

• 즉, 일부 cross-origin 요청은 허가하고, 다른 요청은 허가하지 않기 위해 사용된다.

---

2. CORS는 어떻게 동작할까?

• CORS와 관련된 모든 것은 client 단에서 이루어진다.

• 메인 요청을 보내기 전 client(browser)는 CORS preflight 요청을 HTTP headers(CORS headers)에 실어 서비스(서버)에 보낸다.

• 서비스는 같은 값 혹은 다른 값을 같은 헤더에 실어 응답으로 사용한다.

• 서비스의 응답을 받은 클라이언트는 CORS preflight 응답에 근거하여 서비스에 메인 요청을 보낼지 말지 결정한다.

• 만약, CORS preflight 요구사항에 충족되지 않으면 에러를 보낼 것이다.

  CORS는 리소스를 다운로드하거나 요청하는 것을 막는 것이 아니라, CORS 정책에 따라 서비스로 부터 알맞은 응답을 받지 못할 경우 에러를 띄우는 것을 의미한다. curl, Insomnia, Postman을 통해 성공적 요청을 보낼 수 있다. 왜냐하면 CORS는 browser에 의해서 리소스 요청이 가능한지 가능하지 않은지의 여부를 판단하는 것이기 때문이다.

---

3. CORS preflight?

• HTTP Options request를 CORS preflight 라고 한다.

  • HTTP Options method 란, 주어진 URL 혹은 서버에 허가가능한 communication options를 요청하는 방법이다. 클라이언트는 URL에 HTTP Options method를 구체화할 수 있다.
    - *은 전체 서버를 의미한다.
    - OPTIONS /index.html HTTP/1.1

1) HTTP OPTION 확인하기

• 요청
  

• 응답
  

2) CORS Header

• 서버에 CORS preflight request를 보내면, 서버는 다음과 같이 응답한다.
  

---

4. 왜 CORS policy에 의해 request가 block 되는걸까?

• CORS request의 Origin 혹은 HTTP method / Cookie header를 체크해보자!

1) 서버의 환경설정을 바꾸기

• Reverse Proxy, API gateway, 다른 라우팅 서비스를 이용하여 허용가능한 Origin을 설정해줄 수 있다.
  • HAProxy, Linerd, Istio, Kong, nginx, Apache, Traedfik

2) Browser extension 설치

• 브라우저의 확장자 (e.g. 크롬 확장프로그램)를 설치하면 된다.

• 요청을 보내는 것은 같지만, 응답에 따라서 브라우저 확장자가 CORS preflight를 수정하여 전송한다.

3) 브라우저의 CORS checks를 disable로 만들기

• 앞서 설명했듯이 CORS 정책에 의해서 요청이 블락된다고 하더라도, 브라우저의 요청이 가지 않는 것이 아니다.

• CORS preflight가 HTTP header에 추가되지 않도록 만들 수 있다.

4) Proxy server 설치하기

• 브라우저 환경설정하는 것이 어렵다면 프록시 서버가 해결책이 될 수 있다.

  이 때의, proxy server는 forward proxy server 이다.

• 브라우저는 Preflight OPTIONS을 프록시 서버에 보내고 응답을 받는다.
  

원래 응답과 비교하는 그림 추가 예정

---

5. CORS 테스트하기

• CORS Tester, CORS Tester2 에서 테스트 할 수 있다.

• curl 명령어를 사용하여 테스트할 수 있다.

---

6. 잘못된 CORS error에 대해 이해하기

• CORS error와 헷깔릴 수 있는 에러는 다음과 같다
  • 401 unauthorized
  • 403 forbidden
  • 429 too many requests
  • 500 internal server error
  • 2XX 또는 3XX 에러

• CORS 에러는 명확히 브라우저에서 알려주기 때문에, CORS 정책 위반이라는 에러가 나오지 않으면 해당 에러코드에 맞게 에러를 해결하면 된다.