HTML 属性: crossorigin

crossorigin 属性は、<audio>, <img>, <link>, <script>, <video> の各要素で有効です。CORS への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。

メディア要素の crossorigin コンテンツ属性は CORS 設定属性です。

これらの属性は列挙型で、以下の値を取ることができます。

anonymous

リクエストは CORS ヘッダーを使用し、資格情報フラグには 'same-origin' に設定されます。宛先が同一オリジンでない限り、クッキー、クライアントサイド SSL 証明書、HTTP 認証によるユーザー資格情報の交換は行われません。

use-credentials

リクエストは CORS ヘッダーを使用し、資格情報フラグには 'include' に設定され、ユーザー資格情報が常に含まれます。

""

crossorigin または crossorigin="" のように属性に空の値を設定すると、 anonymous と同じになります。

不正なキーワードや空文字列を指定すると、 anonymous が指定されたものと同じように扱われます。

既定では(つまり、属性が指定されていない場合)、 CORS はまったく使用されません。ユーザーエージェントはそのリソースへの完全アクセス権限を求めず、オリジン間リクエストの場合、その要素の種類に応じて一定の制限が適用されます。

要素 制限
img, audio, video そのリソースが <canvas> 内に配置された場合、要素は汚染されているとマークされます。
script window.onerror によるエラーログへのアクセスが制限されます。
link 適切な crossorigin ヘッダーがないリクエストは破棄されることがあります。

メモ: Firefox 83 より前では、 crossorigin 属性は rel="icon" に対応していませんでした。 Chrome についての未解決の問題もあります。

例: <script> 要素の crossorigin

以下の <script> 要素を使用すると、ユーザー資格情報を送信せずに https://example.com/example-framework.js スクリプトを実行します。

html
<script
  src="https://example.com/example-framework.js"
  crossorigin="anonymous"></script>

例: 資格情報付きのウェブマニフェスト

資格情報を必要とするマニフェストを読み取るときは、同じオリジンからのファイル読み取りであっても use-credentials の値を使用する必要があります。

html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />

仕様書

Specification
HTML Standard
# cors-settings-attributes

ブラウザーの互換性

html.elements.img.crossorigin

BCD tables only load in the browser

html.elements.link.crossorigin

BCD tables only load in the browser

html.elements.script.crossorigin

BCD tables only load in the browser

html.elements.video.crossorigin

BCD tables only load in the browser

関連情報