index.md

title	slug	l10n
HTML 属性: crossorigin	Web/HTML/Attributes/crossorigin	sourceCommit 83f30ecaaeb6227dc0d4551f71eb8be1cacb8e94

{{HTMLSidebar}}

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

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

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

• anonymous
  • : リクエストは CORS ヘッダーを使用し、資格情報フラグには 'same-origin' に設定されます。宛先が同一オリジンでない限り、クッキー、クライアントサイド TLS 証明書、HTTP 認証によるユーザー資格情報の交換は行われません。
• use-credentials
  • : リクエストは CORS ヘッダーを使用し、資格情報フラグには 'include' に設定され、ユーザー資格情報が常に含まれます。
• ""
  • : crossorigin または crossorigin="" のように属性に空の値を設定すると、 anonymous と同じになります。

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

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

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

メモ: crossorigin 属性は、 Chromium ベースのブラウザーでは rel="icon" では対応していません。公開 Chromium issue を参照してください。

例: <script> 要素の crossorigin

以下の {{HTMLElement("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" />

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

• オリジン間リソース共有 (CORS)
• HTML 属性: rel

{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}