CORS

CORS?

• 교차 출처 리소스 공유
• Cross-Origin Resource Sharing
• CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원
• CORS 응답으로 서버는 Access-Control-Allow-Origin 헤더를 보냄
• 'HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제'

배경

• 웹 브라우저는 access token이나 cookie 등과 같이 유저와 관련된 데이터를 저장
• 정보가 노출, 외부로 전송이 되거나 조작될 수 있다면 보안적으로 심각한 문제
• 따라서 Same-Origin policy 정책을 도입되었음(같은 출처의 서버와 정보 공유)
• 프론트와 서버가 분리되는 방향으로 발전하면서 CORS 가 필요하게 됨

사전지식

• 보안상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한
  • 출처가 불분명한 곳과 정보를 주고 받으면 보안상 위험
• XMLHttpRequest와 Fetch API (웹 브라우저의 API)는 동일출처 정책을 따름
  • 해당 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있음
• 동일출처: 프로토콜, 포트(명시한 경우), 호스트가 모두 같아야 동일한 출처
• 브라우저: '웹 브라우저 또는 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램'
• simple request (몇가지 조건)에 해당하지 않는 경우에는 CORS 요청이 필요함

CORS 요청 내용

1. 클라이언트가 preflight 요청을 보낸다
   • OPTION 메소드를 사용
   • 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인
   • Access-Control-Request-Method 헤더는 서버에게 어떤 메소드로 본 요청을 보낼 건지 알려줌
2. 서버가 Access-Control-Allow-Origin 헤더를 전송
   • 서버는 이에 대한 응답으로 Access-Control-Allow-Origin 헤더를 전송
   • 서버는 Access-Controll-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Credentials 등을 전송가능

3-1. 클라이언트가 서버의 응답에 맞으면

• 실제 보내고자 하는 요청을 전송
• 본 요청에서는 Access-Control-Request-Method를 보내지 않음

3-2. 브라우저가 이 응답(preflight)을 분석해서 CORS 정책 위반이라고 판단된다면

• 본 요청에 대해서 CORS 에러를 보낸다.
• 서버는 CORS를 위반하더라도 정상적으로 preflight 응답을 해주고, 이 응답의 파기 여부는 브라우저가 결정
• 본 요청 자체를 서버에 보내고 응답을 해주게 되면, 허용되지 않은 클라이언트에 대해서 서버에 위험한 요청일 수 있으므로 본 요청을 수행하지 않는 것이다.

모호했던 부분에 대한 생각

• CORS 는 웹 브라우저의 보안상의 이유로 Same-Origin Policy가 필요했고, 이로 인해 사용상 불편한 점들이 발생하여 해결하기 위해서 나온 정책이라고 한다.
• 서버를 위한 정책인가? 클라이언트를 위한 정책인가? 결론은 둘다, 즉 사용자를 보호하기 위한 정책이다.
• 서버가 사용가능한 클라이언트의 리소스를 알려주게 되어있다. 원래는 같은 출처의 요청만 받았는데, 서버 ~ 클라이언트 구조로 도메인이 분리되는 개발이 진행되었다. 이런 방향에 따라 서버에서 허락한 클라이언트는 추가적으로 받아주는 정책이다.
• simple request(서버에 side effect를 주지 않는 요청) 이외에는 CORS 요청을 보내도록 설정되어 있는 것이다.
• 브라우저 단에서 API 를 사용할 때, SOP 를 사용한다. 이것에 대한 대안으로 서버 측에서 CORS 요청에 대해 몇가지 출처를 열어주고 대응해주는 것이다. 허용되었음에 대한 내용을 브라우저에 알려주고 브라우저가 판단하여 허용되지 않은 것은 브라우저가 커트해준다. (이 부분에 대한 내용이 모호하게 느껴졌는데, 지금 내가 찾아본 바로는 이렇다고 결론 내렸다.)

참고

• MDN_CORS
• MDN_브라우저
• MDN_origin
• 도움이 된 블로그