HTML crossorigin 属性

草案: このページは完成していません。

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

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

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

キーワード 説明
anonymous この要素のための CORS リクエストで資格情報フラグを 'same-origin' に設定する。
use-credentials この要素のための CORS リクエストで資格情報フラグを 'include' に設定する。
"" crossorigin または crossorigin="" のように属性に空の値を設定すると、 anonymous と同じになります。

既定では (つまり、属性が指定されていない場合)、 CORS は使用されません。 "anonymous" キーワードが指定された場合は、同じオリジンでない限り、リクエストにはクッキーやクライアント側の SSL 証明書、 HTTP 認証などの CORS 仕様書の用語の節で記述されているユーザー資格情報 (user credentials) は使用されません。

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

例: script 要素の crossorigin

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

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

例: 資格情報付きの Webmanifest

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

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

仕様書

仕様書 状態 備考
HTML Living Standard
CORS settings attributes の定義
現行の標準
HTML Living Standard
crossorigin の定義
現行の標準

ブラウザーの互換性