CORS
"Cross-Origin Resource Sharing"의 약자입니다. CORS를 사용하면 웹 페이지의 스크립트가 다른 도메인의 리소스를 요청할 수 있습니다. 대부분의 웹 브라우저는 보안을 위해 기본적으로 이러한 유형의 요청을 차단합니다.
웹 페이지는 요청이 HTML에서 발생하는 경우 다른 도메인의 리소스를 요청할 수 있습니다. 예를 들어 <head> 섹션은 다른 도메인에 있는 CSS 파일, 글꼴, JS 파일과 같은 리소스를 참조할 수 있습니다. Google Analytics 스크립트, jQuery 라이브러리, 다른 서버에서 호스팅되는 글꼴 등이 그 예입니다. 마찬가지로 <body>는 CDN이나 다른 도메인에서 이미지를 요청할 수 있습니다. HTML에서 발생하는 교차 출처 리소스 요청에는 CORS 권한이 필요하지 않습니다.
스크립트나 iframe 요소가 교차 출처 요청을 수행할 때는 CORS가 필요합니다. 예를 들어 페이지가 로드된 후 실행되는 AJAX 메서드는 다른 도메인의 리소스를 요청할 수 없습니다. CORS는 이 기본 브라우저 설정을 재정의하여 요청이 처리되도록 허용합니다.
CORS는 "액세스 제어" HTTP 헤더를 사용해 구현됩니다. 서버 관리자는 웹 페이지에 액세스할 때 클라이언트의 브라우저로 전송되는 응답 헤더를 추가하거나 수정할 수 있습니다. Apache 및 IIS 서버에 적용할 수 있는 이러한 설정은 특정 사이트에만 적용하거나 서버 전체에 적용할 수 있습니다. 다음은 일반적인 요청 및 응답 헤더입니다.
CORS 요청 헤더:
- Origin
- Access-Control-Request-Method
- Access-Control-Request-Headers
CORS 응답 헤더:
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
- Access-Control-Expose-Headers
CORS 예
techterms.com의 스크립트가 GET 작업을 사용해 sharpened.com의 리소스를 요청하면 다음과 같은 요청 헤더를 보낼 수 있습니다.
Origin: https://techterms.com
Access-Control-Request-Method: GET요청을 허용하기 위해 sharpened.com은 다음과 같은 헤더로 응답할 수 있습니다.
Access-Control-Allow-Origin: https://techterms.com
Access-Control-Allow-Methods: GETAccess-Control-Allow-Origin은 특정 도메인으로 설정하거나 별표(*)를 사용한 와일드카드로 설정할 수 있습니다. 와일드카드 설정을 사용하면 모든 도메인에서 교차 출처 리소스 요청을 허용하므로 보안 위험이 될 수 있습니다. Access-Control-Allow-Methods는 PUT, POST, DELETE 및 기타 메서드로 설정할 수 있으며, 모든 메서드를 허용하는 와일드카드(*) 설정도 사용할 수 있습니다.
지식 테스트하기