HTML Living Standard/crossorigin属性
crossorigin属性
[編集]crossorigin属性は、クロスオリジンリソースの取得に関する設定を指定するための属性です。この属性を使用することで、リソースを取得する際にクレデンシャル（認証情報）の送信有無や、取得されたリソースの処理方法を制御できます。主に<script>、<img>、<link>要素で使用されます。
基本構文
[編集]<element crossorigin="anonymous|use-credentials"></element>
crossorigin属性には以下の値を指定できます：
anonymous（既定値）：クレデンシャルを送信せずにリソースを取得します。use-credentials：クレデンシャルを送信してリソースを取得します。
効果
[編集]crossorigin属性を使用することで、以下のような動作を制御できます：
- リソースが異なるオリジン（例：別のドメインやサブドメイン）から取得される場合に、この属性で認証情報の送信設定を明示します。
- セキュリティとプライバシーを確保しながら、外部リソースの使用を柔軟に管理できます。
使用例
[編集]画像のクロスオリジン取得
[編集]<img src="https://example.com/image.jpg" crossorigin="anonymous" alt="クロスオリジン画像">
この例では、画像をクレデンシャルなしで取得します。
スクリプトのクロスオリジン取得
[編集]<script src="https://example.com/script.js" crossorigin="use-credentials"></script>
この例では、認証情報を含めてスクリプトを取得します。
注意点
[編集]- 外部リソースのオリジンサーバーは、適切なCORS（Cross-Origin Resource Sharing）ヘッダーを設定している必要があります。
- 例：Access-Control-Allow-Originヘッダーにリクエスト元のオリジンを指定。
crossorigin="use-credentials"を指定する場合、サーバー側でAccess-Control-Allow-Credentials: trueを設定する必要があります。- クレデンシャルにはクッキー、HTTP認証、TLSクライアント証明書などが含まれます。
- クロスオリジンリソースを扱う際は、セキュリティリスクを十分に考慮してください。
互換性
[編集]互換性 ブラウザ サポート状況 Chrome 対応 Edge 対応 Firefox 対応 Safari 対応 Opera 対応