SOP, CORS, CSRF란 무엇인가?

CORS란?

Cross-Origin Resource Sharing의 약자, 교차 출처 리소스 공유는 웹 브라우저가 보안상 다른 도메인으로의 API 요청을 제한하는 정책(SOP)을 예외적으로 허용해주는 HTTP 기반 메커니즘 입니다.

🧐 정확히 풀어서 설명하자면..

브라우저는 보안을 위해 현재 페이지의 출처(origin)와 다른 출처의 리소스에 접근하지 못하도록 제한하는 정책을 가지고 있다. 이를 동일 출처 정책(Same-Origin Policy, SOP)이라고 함.

하지만, 현대 웹사이트는 내 서버 뿐만 아니라 네이버 지도 API, 구글 폰트, 공공데이터 등의 남의 서버에서 데이터를 가져와야할 일이 많음.

외부 API아니더라도 당장 개인 프젝을 할 때에도 프론트엔드단과 서버단의 출처가 다른 경우가 존재함

• 그렇다면, 이 사이트는 안전하니까 데이터를 주고 받을 수 있게 해줄게 라고 서버가 허락해주는 규칙이 CORS (교차 출처 리소스 공유)인 것이다.

😩 왜 이렇게 복잡하게 해놨을까?

• 만약 이런 제한이 없었다면,,
  • 브라우저에 쿠키가 남아있을 때, CSRF 혹은 세션 하이재킹에 대한 위험이 존재함.

Origin(출처)은 무엇인가?

브라우저가 ‘서로 다른 출처’라고 판단하는 기준은 세 가지이다.

1. Protocol (http vs https)
2. Host (example.come vs api.exmaple.com)
3. Port (80 vs 8080)

발생원인

• 웹사이트 (예: A 도메인)에서 다른 API 서버 (B 도메인)로 리소스를 요청할 때 브라우저가 보안상 기본적으로 차단하여 발생

작동 방식

• 브라우저는 서버에 Preflight를 보내 허용된 출처인지 확인하고, 서버가 헤더를 통해 허용하면 데이터 교환이 가능함.

해결 방법

• 서버 측에서 응답 헤더(Access-Control-Allow-Origin)를 설정하거나, 프록시 서버를 사용하여 도메인을 맞추는 방식을 사용

주의

• CORS는 브라우저 보안 정책일 뿐, 서버 기능이 아니다.
  • 따라서, Postman에서는 잘 되는데, 브라우저에서 막히는 이유 또한 위와 같다.

레퍼런스

• 토스 페이먼츠 - CORS
• MDN 교차 출처 리소스 공유 (CORS)