HTML <script> crossorigin属性

❮HTML<script>タグ

別のサーバー上の.jsファイルへのリンクは次のとおりです。ここでは、整合性属性とクロスオリジン属性の両方を使用します。

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

定義と使用法

このcrossorigin属性は、リクエストのモードをHTTPCORSリクエストに設定します。

Webページは、他のサーバーにリソースをロードするように要求することがよくあります。ここでCORSが登場します。

クロスオリジンリクエストは、別のドメインからのリソース(スタイルシート、iframe、画像、フォント、スクリプトなど)のリクエストです。

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

CORSはCross-OriginResource Sharingの略で、Webページ上のリソースを自分のドメイン外の別のドメインから要求できるようにするメカニズムです。これは、ブラウザーとサーバーが相互作用して、クロスオリジン要求を許可しても安全かどうかを判断する方法を定義します。CORSを使用すると、サーバーは、サーバー上のアセットにアクセスできるユーザーを指定できます。

ヒント:クロスオリジンリクエストの反対は、同一生成元リクエストです。これは、Webページが同じサーバー上にある他のドキュメントとのみ対話できることを意味します。このポリシーは、相互作用するドキュメントが同じオリジン(ドメイン)を持っている必要があることを強制します。

ヒント: integrity属性も確認してください。


ブラウザのサポート

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

Attribute
crossorigin 30.0 18.0 13.0 13.0 12.1

構文

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

属性値

Value Description
anonymous
use-credentials
Specifies the mode of the CORS request:
  • anonymous - A cross-origin request is performed. No credentials are sent
  • use-credentials - A cross-origin request is performed. Credentials are sent (e.g. a cookie, a certificate, a HTTP Basic authentication)

❮HTML<script>タグ