CORS

HanHyuk·2024년 1월 1일

CORS

  • Cross-Origin-Resource-Sharing
  • 웹 보안의 핵심 개념
  • 다른 도메인의 자원에 대한 접근을 제어하는 메커니즘
  • 기본적으로 웹 브라우저는 '같은 출처 정책' 으로 인해 한 출처에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용 하는 것을 제한함

작동 원리

  • 브라우저의 요청 : 브라우저가 다른 출처의 서버로 요청을 보낼 때 요청에는 'Origin'헤더가 포함되어 서버에 전달, 이 헤더는 요청을 보내는 페이지의 출처를 알려줌
  • 서버의 응답 : 서버는 'Access-Control-Allow-Origin' 헤더를 사용해 해당 요청이 허용되는지를 응답함, 이 헤더에는 특정 출처 또는 '*'(모든출처 허용)이 명시될 수 있음
  • 브라우저의 처리 : 서버로부터 받은 응답 헤더를 검사하여 요청한 리소스에 접근할 수 있는지 결정, 만약 서버가 해당 출처의 요청을 허용하지 않는다면, 브라우저는 CORS 관련 에러를 발생시키고 리소스 접근을 차단

예시

  • 웹 페이지 https://A.com에 있는 자바스크립트에서 https://api.B.com에 데이터를 요청
  • api.B.com 서버는 응답 헤더에 'Access-Control-Allow-Origin: https://A.com' 을 설정해 A.com에서의 요청만 허용
  • 이 경우 A.com에서의 요청은 성공하지만 다른 출처에서는 실패함(CORS 에러)
  • 서버가 'Access-Control-Allow-Origin: *' 를 설정할 경우 모든 출처에서의 요청 허용
  • Preflight : 복잡한 요청의 경우 브라우저가 실제 요청 전에 보내는 요청, OPTION 메소드를 사용하여 서버의 허용 정책을 확인해보는 요청
profile
선한 영향력을 펼치는 개발자가 되겠습니다.

0개의 댓글