このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
HTML 属性: crossorigin
crossorigin 属性は、<audio>,<img>,<link>,<script>,<video> の各要素で有効です。CORS への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。
メディア要素のcrossorigin コンテンツ属性は CORS 設定属性です。
これらの属性は列挙型で、以下の値を取ることができます。
anonymousリクエストは CORS ヘッダーを使用し、資格情報フラグには
'same-origin'に設定されます。宛先が同一オリジンでない限り、クッキー、クライアントサイド TLS 証明書、HTTP 認証によるユーザー資格情報の交換は行われません。use-credentialsリクエストは CORS ヘッダーを使用し、資格情報フラグには
'include'に設定され、ユーザー資格情報が常に含まれます。""crossoriginまたはcrossorigin=""のように属性に空の値を設定すると、anonymousと同じになります。
不正なキーワードや空文字列を指定すると、anonymous が指定されたものと同じように扱われます。
既定では（つまり、属性が指定されていない場合）、 CORS はまったく使用されません。ユーザーエージェントはそのリソースへの完全アクセス権限を求めず、オリジン間リクエストの場合、その要素の種類に応じて一定の制限が適用されます。
| 要素 | 制限 |
img,audio,video | そのリソースが<canvas> 内に配置された場合、要素は汚染されているとマークされます。 |
script | window.onerror によるエラーログへのアクセスが制限されます。 |
link | 適切なcrossorigin ヘッダーがないリクエストは破棄されることがあります。 |
メモ:crossorigin 属性は、 Chromium ベースのブラウザーではrel="icon" では対応していません。公開 Chromium issue を参照してください。
例:<script> 要素のcrossorigin
以下の<script> 要素を使用すると、ユーザー資格情報を送信せずにhttps://example.com/example-framework.js スクリプトを実行します。
<script src="https://example.com/example-framework.js" crossorigin="anonymous"></script>例: 資格情報付きのウェブマニフェスト
資格情報を必要とするマニフェストを読み取るときは、同じオリジンからのファイル読み取りであってもuse-credentials の値を使用する必要があります。
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />仕様書
| Specification |
|---|
| HTML # cors-settings-attributes |