HTML <script>のcrossorigin属性

HTML <script> タグ

定義と使用方法

crossorigin 属性はリクエストパターンをHTTP CORSリクエストに設定します。

ウェブページは他のサーバー上のリソースをロードするためによくリクエストを送信します。これがCORSが役立つ場所です。

クロスドメインリクエストは、別のドメインからのリソース（例えば、スタイルシート、iframe、画像、フォント、またはスクリプト）へのリクエストです。

CORSは、クロスドメインリクエストを管理するために使用されます。

CORS（クロスオリジンリソースシェアリング）とは、自分のドメインの外側の別のドメインからウェブページ上のリソースをリクエストするメカニズムです。これは、ブラウザとサーバーがどのように相互作用し、クロスオリジンリクエストが安全かどうかを判断する方法を定義します。CORSは、サーバーがどのユーザーがリソースにアクセスできるか、その他多くの機能を指定することができます。

ヒント：クロスドメインリクエストとは逆に、同じソースを持つドメイン間のリクエストが同源リクエストと呼ばれます。これは、ウェブページが同一のサーバー上の他のドキュメントとのみやり取りを行うことを意味します。この戦略は、相互にやり取りを行うドキュメントが同じソース（ドメイン）を持っている必要があることを強制します。

ヒント：参照 integrity 属性。

例

これは別のサーバー上の .js ファイルへのリンクです。ここでは、integrity と crossorigin 属性も使用しています：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>

文法

<script crossorigin="anonymous|use-credentials">

属性値

値 説明
  • anonymous
  • use-credentials

CORS リクエストのモードを指定します：

  • anonymous - 跨源リクエストを実行します。クレジットを送信しません。
  • use-credentials - 跨源リクエストを実行します。クレジット（例：cookie、証明書、HTTP 基礎認証）を送信します。

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
30.0 18.0 13.0 13.0 12.1

HTML <script> タグ