정의 및 사용 방법

crossorigin 속성은 해당 요소에 링크된 '외부 출처'의 리소스를 가져올 때 CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing) 요청 방식을 지정하는 속성입니다.

다음은 '외부 출처' 용어에 대한 간단한 부연설명입니다.
외부 출처
외부 출처란 현재 웹 페이지의 프로토콜(예: http:// 또는 https://), 도메인(예: example.com) 중 하나라도 다른 주소를 말합니다. 만약 도메인 다음에 포트(예: example.com:8080)가 있다면 포트도 출처를 구분하는 기준에 포함됩니다. 포트가 다르면 외부 출처입니다. 사용법 참고 사항을 참고하세요.
다음은 'CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing)' 용어에 대한 간단한 부연설명입니다.
CORS(교차 출처 리소스 공유, Cross-Origin Resource Sharing)
CORS는 웹 브라우저가 보안상의 이유로 차단될 수 있는 '외부 출처'의 리소스에 접근할 수 있도록 요청하고 허용하는 웹 표준 메커니즘입니다.

crossorigin 속성을 사용하면 외부 출처 리소스(예: 외부의 이미지, 폰트, 스크립트 등)를 가져올 때, CORS 요청 방식을 지정하여 웹 표준 메커니즘에 따라 안전하게 사용할 수 있습니다.

기본 예제

다음은 <script> 요소에 링크된 외부 리소스인 https://example.com/example-framework.js를 가져올 때, CORS 요청 방식으로 anonymous를 지정하여 요청에 인증 정보를 포함하지 않도록 설정하는 예시입니다.

HTML 출처 - MDN - Example: crossorigin with the <script> element 
<script
    src="https://example.com/example-framework.js"
    crossorigin="anonymous"></script>

crossorigin 속성을 이해하기 위해서는 사전에 필요로 하는 지식이 있습니다.

'외부 출처의 리소스와 현재 웹 페이지와의 상호작용' 이해

동일 출처 정책(Same-origin policy)

브라우저에는 동일 출처 정책(SOP, Same-origin policy)이라는 핵심 보안 체계가 작동하고 있습니다. 이 정책은 '현재 출처'에서 로드된 문서나 스크립트가 '외부 출처'의 리소스와 상호작용하는 방식을 제한합니다.

브라우저는 웹 페이지에 '외부 출처'의 리소스가 연결되어 있을 때, 보안상의 이유로 해당 리소스와의 상호작용을 제한적으로 허용합니다. 이러한 보안 규칙을 동일 출처 정책(SOP)이라고 부릅니다.

여기에서 '외부 출처'란 동일한 출처가 아닌 것을 말하는데, '동일 출처'의 정의를 먼저 살펴보겠습니다.

https://example.com/app1/index.html라는 URL이 있습니다.

  • https://를 '프로토콜'(또는 '스키마', 또는 '스킴')이라고 합니다.
  • example.com을 '호스트'(또는 '도메인')이라고 합니다.
  • /app1/index.html을 '파일 경로'라고 합니다.

프로토콜과 도메인이 일치해야 '동일 출처'라고 합니다. 포트가 명시된 경우에는 포트도 일치해야 합니다. 파일 경로는 상관이 없습니다.

다음의 경우는 '동일 출처'입니다.

  • http://example.com/application1/index.html
  • http://example.com/application2/index.html

다음의 경우처럼 포트(:80)가 명시된 경우에는 포트도 일치해야 '동일 출처'입니다.

  • http://example.com:80/application1/index.html
  • http://example.com:80/application2/index.html

서로 다른 프로토콜을 사용했기 때문에 다음의 경우는 '외부 출처'입니다.

  • http://example.com/application1
  • https://example.com/application2

서로 다른 호스트 이름을 사용했기 때문에 다음의 경우는 '외부 출처'입니다.

  • http://example.com/application1
  • https://myapplication.example.com/application2

이처럼 웹은 보안을 위해 '동일 출처'와 '외부 출처'를 구분하며, 외부 출처의 리소스와 상호작용하는 것을 기본적으로 제한합니다. 이러한 제한된 환경에서 외부 출처 리소스를 안전하게 요청하고 사용할 수 있도록 하는 웹 표준 메커니즘이 앞서 살펴본 CORS입니다.

동일 출처 정책(Same-origin policy)에서 '외부 출처'의 접근을 허용하는 경우

동일 출처 정책으로 무조건 '외부 출처'의 리소스를 제한하는 것은 아닙니다.
제한적으로 '외부 출처'를 허용합니다. 대표적으로 현재의 웹 페이지에 단순 삽입(embed)되는 경우입니다.

다음은 '교차 출처'로 삽입(embed)할 수 있는 리소스의 일부 예시입니다.

현재 웹 페이지의 출처와 리소스의 출처가 서로 다른 경우를 '교차 출처(cross-origin)'라고 합니다.

동일 출처 정책(Same-origin policy)에서 '외부 출처'의 접근을 제한하는 경우

단순히 '외부 출처'의 리소스를 삽입(embed)하는 경우가 아니라,
현재의 웹 페이지가 '외부 출처'의 리소스와 상호 작용하는 경우에는 접근을 제한합니다. 보안에 영향을 미칠 수 있기 때문입니다.

현재의 웹 페이지가 '외부 출처'의 리소스와의 상호 작용하는 경우의 일부 예시입니다.

  • 데이터 통신: 현재의 웹 페이지가 '외부 출처'의 리소스의 데이터와 통신하는 경우 (예: AJAX 요청을 통한 데이터 가져오기)
  • 쿠키 및 저장 정보 접근: '외부 출처'의 리소스가 현재의 웹 페이지 정보에 접근을 시도할 경우 (예: 사용자의 쿠키에 접근을 시도)
  • 단순 삽입된 '외부 출처 리소스' 내의 외부 출처 리소스: 단순 삽입된 '외부 출처 리소스' 내의 외부 출처 리소스가 있을 경우 보안을 유지하기 위해 해당 접근이 제한될 수 있습니다.
  • 스크립트 실행: '외부 출처' 리소스의 스크립트를 현재 웹 페이지에서 실행하려는 경우나 '외부 출처' 리소스가 현재 웹 페이지의 스크립트 API를 호출하려는 경우 (일부 특정 API는 허용될 수 있습니다.)
동일 출처 정책(Same-origin policy)으로 제한되는 '외부 출처' 리소스와 상호작용하는 방법

교차 출처 리소스 공유(CORS, Cross-Origin Resource Sharing)를 사용하면 동일 출처 정책으로 제한되는 '외부 출처' 리소스와의 상호작용을 허용할 수 있습니다.

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

'교차 출처 리소스 공유(CORS, Cross-Origin Resource Sharing)'는 동일 출처 정책으로 제한되는 현재 출처와 '외부 출처' 리소스 간의 상호작용을 허용하기 위한 웹 표준 메커니즘입니다.

이 메커니즘은 크게 HTML 요소의 crossorigin 속성을 사용하여 CORS 요청 방식을 지정하는 방법과, 서버에서 CORS 정책을 설정하여 외부 출처 리소스와의 상호작용을 허용하는 방법으로 나눌 수 있습니다.

이 글에서는 crossorigin 속성을 사용하여 외부 출처 리소스를 가져올 때 적용되는 CORS 요청 방식을 지정하는 방법을 다룹니다.

crossorigin 속성으로 외부 출처 리소스의 CORS 요청 방식 지정하기

crossorigin 속성의 값으로 외부 출처 리소스를 가져올 때 적용되는 CORS 요청 방식을 지정할 수 있습니다.

crossorigin 속성은 <link>, <img>, <script>, <video>, <audio> 요소와 같은 외부 출처 리소스 요청에 사용되는 속성입니다. 이때 해당 요소에 링크된 외부 출처 리소스를 가져올 때 적용되는 CORS 요청 방식을 지정합니다.

crossorigin 속성의 값은 외부 출처의 리소스를 가져올 때 적용되는 CORS 요청 방식을 지정합니다. 이 값은 CORS 요청이 처리되는 방식을 결정하는 기준이 됩니다.

crossorigin 속성의 값

crossorigin 속성의 값
anonymous 교차 출처 리소스 공유 체계 요청 시 인증 정보를 보내지 않도록 설정합니다.
use-credentials 교차 출처 리소스 공유 체계 요청 시 인증 정보를 보내도록 설정합니다. (예: cookie, certificate, HTTP Basic 인증)

crossorigin 또는 crossorigin=""처럼 빈 값을 할당하는건 anonymous와 동일합니다.

주의할 점

링크된 리소스가 폰트 파일인 경우에는 브라우저의 CORS 정책에 따라 동일 출처의 리소스라도 익명 모드 CORS 요청을 사용하는 경우가 있습니다.

일반적인 리소스와 달리, 웹 폰트는 CSS의 @font-face 규칙을 사용하여 웹 페이지에 로드됩니다. 이 과정에서 브라우저는 백그라운드에서 CORS 요청을 수행할 수 있습니다. 따라서 동일 출처의 웹 폰트 리소스라도 <link> 태그에 rel="preload"로 미리 로드하는 경우에는 crossorigin="anonymous"를 함께 사용하여 실제 폰트 로딩 요청과 동일한 CORS 요청 방식을 사용하도록 설정하는 것이 좋습니다.

이 경우를 아래의 예제로 살펴보겠습니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>rel=preload 예제 소스</title>

        <!-- 웹 폰트 preload 요청에 익명 모드 CORS를 지정합니다. -->
        <link
            rel="preload"
            href="https://another-domain.com/fonts/font.woff2"
            as="font"
            type="font/woff2"
            crossorigin="anonymous">

        <!-- 웹폰트 스타일이 포함된 스타일시트 연결 -->
        <link rel="stylesheet" href="webfont.css">
    </head>
    <body>
        <!-- 미리 로드된 웹폰트를 텍스트에 바로 적용 -->
        <h1>rel=preload 예제 소스</h1>

        <!-- 추가 콘텐츠 -->
    </body>
</html>

위 예시에서는 웹폰트를 <link> 태그에 rel="preload"로 미리 로드하도록 설정했습니다. 동일 출처의 웹폰트라도 실제 폰트 로딩 요청과 동일한 CORS 요청 방식을 사용하기 위해 crossorigin="anonymous"를 지정했습니다.

명세서

crossorigin 속성의 명세서 사양
명세서 사양
crossorigin HTML Standard
#cors-settings-attributes

참고문헌

같이 보기