교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing)

교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing) 란?

HTTP 헤더 기반 메커니즘으로 브라우저가 리소스 로드를 허용해야 하는 자체 출처 이외 모든 출처(도메인, 스키마 , 포트)를 서버가 표시 할 수 있도록 한다.

<img>, <video>, <script>, <link> 태그 → 기본적으로 Cross-Origin 정책을 지원함

• <link> 태그의 href 에서 다른 사이트의 .css 리소스에 접근 하는 것이 가능
• <img> 태그의 src 에서 다른 사이트의 .png .jpg 등의 리소스에 접근하는 것이 가능
• <script> 태그의 src 에서 다른 사이트의 .js 리소스에 접근하는 것이 가능 (type = “module” 속성은 제외)

XMLHttpRequest, Fetch API → 기본적으로 Same-Origin 정책을 따름

• 다른 도메인에게 ajax 요청 API 호출 시
• 웹 폰트 CSS 파일 내 @font-face 에서 다른 도메인의 폰트 사용 시
• 자바스크립트 에서 요청은 기본적으로 서로 다른 도메인에 대한 요청을 보안상 제한 한다.
• 브라우저는 기본으로 하나의 서버 연결만 허용 되도록 설정 되어 있기 때문이다.