<script>要素

<script>要素の定義

英語で「台本」や「脚本」を表す”script”より。
実行できるコードを埋め込んだり参照したりするために使用されます。ふつうは JavaScript のコードの埋め込みや参照に使用されます。

子要素として使用できるもの

JavaScriptなどのスクリプト

親要素として使えるもの

メタデータコンテンツを受け入れるすべての要素、または、記述コンテンツを受け入れるすべての要素。

許可されているARIAロール

なし

DOMインターフェース

HTMLScriptElement

属性

グローバル属性が指定できます。

async

論理属性で、要素が指定されている場合、スクリプトの種類によって、以下のような動作を行います。

  • クラシックスクリプト:利用可能になったらすぐに並行して読み込み、解析と評価を行います。
  • モジュールスクリプト:スクリプトとその依存関係はすべて遅延キューで実行されるので、解析と並行して読み込まれ、利用可能になるとすぐに評価されます。

この属性は、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないようなパーサーブロック JavaScript を排除することを可能にします。

crossorigin

通常の script 要素は標準の CORS チェックに通らないスクリプトに対して、 window.onerror に最小限の情報しか渡しません。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用する必要があります。有効な値について、詳しくは CORS 設定属性を参照してください。

defer

この論理属性は、スクリプトを文書の解析完了後かつ DOMContentLoaded が発生する前に実行することをブラウザーに示します。
defer 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、 DOMContentLoaded イベントの発生が抑制されます。
この属性は、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないようなパーサーブロック JavaScript を排除することを可能にします。

integrity

この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータを含みます。

nomodule

論理属性で、モジュール式の JavaScript コードをサポートしない古いブラウザー(*注)向けのフォールバックスクリプトを提供するために使用できます。
*「ES2015 モジュール」に対応していないブラウザー

nonce

script-src コンテンツセキュリティポリシー内のスクリプトをホワイトリストに入れるための暗号ノンス (ワンタイム番号) です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスを推測できないノンスを提供することが重要です。

referrerpolicy

スクリプトを読み込んだり、スクリプトがリソースを読み込んだりする際に、どのリファラーを送信するかを示します。

  • no-referrer : Referer ヘッダーは送信しません。
  • no-referrer-when-downgrade (既定値) : Referer ヘッダーは、オリジンに TLS (HTTPS) がない場合には送信しません。
  • origin : 送信するリファラーを、参照しているページのオリジン (スキーム、ホスト、ポート番号) のみに制限します。
  • origin-when-cross-origin : 異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポート番号に制限します。同一オリジンへの移動では、リファラーのパスも含めます。
  • same-origin : リファラーは同一オリジンには送信しますが、オリジン間リクエストにはリファラー情報を含めません。
  • strict-origin : プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信しますが、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) には送信しません。
  • strict-origin-when-cross-origin : 同一オリジンのリクエストを行う際は URL 全体を送信しますが、プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信し、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) にはヘッダーを送信しません。
  • unsafe-url : リファラーはオリジンおよびパスを含みます (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。

src

この属性は外部スクリプトの URI を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。

type

スクリプトを表すタイプを指定します。この属性の値は、以下の種類のいずれかにします。

  • 省略または JavaScript の MIME タイプ
    • これはスクリプトが JavaScript であることを示します。一口にJavaScriptのMIMEタイプと言っても、かなりの種類があり冗長なため、HTML5の仕様では、属性を省略することが推奨されています。
  • module
    • コードを JavaScript モジュールとして扱います。スクリプトの処理は、charset および defer 属性の影響を受けません。 クラシックスクリプトとは異なり、モジュールスクリプトはオリジン間のフェッチに CORS プロトコルの使用を必要とします。
  • その他の値
    • このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。 この場合、src 属性は無視されます。

 
 


このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs: https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
HTML要素や属性がどのブラウザに対応しているのかは、下記のサイトで確認できます。
Can I Use?: https://caniuse.com/#home

コメント

タイトルとURLをコピーしました