[Web] CORS란?

SOP(Same Origin Policy)란?

• SOP는 동일한 출처로부터의 리소스 접근만 허용하는 웹 보안 정책입니다.
  • 웹 애플리케이션과 API 서버가 같은 서버에 있으면 동일 출처,
  • 서로 다른 서버에 있으면 다른 출처라고 이해하시면 이해가 쉽습니다.
• 이해를 위해, 브라우저 스크립트(예: JavaScript)를 통해 서버 리소스에 접근하는 예를 들어보겠습니다.
  • 당신은 은행 웹 사이트에 로그인하여 개인 정보를 입력하고 있습니다.
  • 이때 당신의 개인 정보를 노리는 다른 악성 웹 페이지가 열려 있는 상태라면,
  • 해당 악성 웹 페이지는 본인들의 악성 스크립트를 실행하여, 은행 웹 사이트로부터 당신의 개인 정보를 훔칠 수 있습니다.
• 따라서, SOP를 사용하지 않는다면,
• 다른 출처로부터의 예상치 못한 리소스 접근을 통해, 보안적으로 위험해질 수 있게 됩니다.

출처(Origin)란?

• 위는 URL의 구성요소입니다.
• 위 구성요소중 Protocol, Host, Port가 같으면 동일 출처(Origin)라고 부르게 됩니다.
• 예를 들어, 아래 출처들 중 http://localhost 와 동일한 출처는 2번과 4번이 됩니다.
  • https://localhost
    • 프로토콜이 다릅니다.
  • http://localhost:80
  • http://127.0.0.1
    • 브라우저 입장에선 String value를 비교하는데,
    • localhost와 127.0.0.1은 String Value가 다르기 때문에, 다른 출처로 판단하게 됩니다.
  • http://localhost/api/cors

CORS(Cross-Origin Resource Sharing)란?

• 그렇다면 다른 출처에서 리소스 접근을 해야한다면 어떻게 해야할까요?
  • EX) 웹 애플리케이션에서 외부 API 서버에 접근해야 하는 경우
• 이를 위해 CORS가 사용되고 있습니다.
• CORS는, 서버 측에서 특정 출처로부터의 접근을 허용하도록 설정할 수 있는 매커니즘입니다.

동일 출처 요청 vs 다른 출처 요청

• 그림을 통해 동일 출처 요청과 다른 출처 요청 비교해보겠습니다.
• 왼쪽 웹 애플리케이션의 URL은 domain-a.com 입니다.
• 오른쪽 API 서버의 URL은 domain-a.com 과 domain-b.com 2가지 입니다.
• 유저가 domain-a.com 웹 애플리케이션에서 domain-a.com API 서버에 리소스를 요청하면, 웹 애플리케이션과 API 서버가 같은 서버에 있기 때문에 동일 출처 요청이지만,
• 유저가 domain-a.com 웹 애플리케이션에서 domain-b.com API 서버에 리소스를 요청하면, 서로 다른 서버에 있기 때문에 다른 출처 요청이 됩니다.
• 기본적으로 동일 출처 요청은 자유롭게 요청 가능하며,
• 다른 출처 요청은 CORS 설정이 필요합니다.

CORS 접근제어 시나리오

• 단순 요청 (Simple Request)
• 프리플라이트 요청 (Preflight Request)
• 인증정보 포함 요청 (Credentialed Request)
• 각 요청에 대한 세부 정보는 추후 포스팅하도록 하겠습니다.

참고

• https://hannut91.github.io/blogs/infra/cors
• https://escapefromcoding.tistory.com/724
• https://velog.io/@pwk921110/CORS란-무엇인가
• https://hymndev.tistory.com/78
• https://fomaios.tistory.com/entry/Network-CORS란-feat-보안HTTP
• https://medium.com/@su_bak/cors란-f7e1447e97d8
• https://tecoble.techcourse.co.kr/post/2020-07-18-cors/
• https://valuefactory.tistory.com/1141
• https://www.youtube.com/watch?v=-2TgkKYmJt4