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 |
ブラウザーの互換性
html.elements.audio.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.
html.elements.img.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
html.elements.link.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
html.elements.script.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
html.elements.video.crossorigin
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
crossorigin |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.