Javascriptはセキュリティ検証に整合性属性を使用します

Javascriptはセキュリティ検証に整合性属性を使用します

1. スクリプトタグを使用してファイルをインポートする

htmlでは、 scriptタグはsrc属性を通じて js ファイルをインポートできます。インポートされる js ファイルはローカルでもリモートでもかまいません。

1. ローカルファイルをインポートする

開発環境では通常、ローカルのjsファイルが導入されます。

<script src="./js/index.js"></script>


2. リモートファイルをインポートする

オンラインで展開した後は、通常cdnに配信され、リモートファイルを導入する必要があります。

のような:

<script src="https://cdn.xxx.xx/js/index.js"></script>


しかし、リモートファイルを導入する場合、該当ファイルが改ざんされると、ユーザーに影響を与える可能性があるという問題があります。 cdn一般的に信頼性が高いですが、ハッカーによる攻撃を受ける可能性も否定できません。

この場合、 scriptタグのintegrity属性を通じてセキュリティ検証を実行できます。

2. 整合性セキュリティ検証

integrity属性は、インポートされたjsファイルのhash値を設定します。ブラウザがjsファイルをダウンロードすると、 jsファイルに対してhash計算が実行されます。それらが一致している場合は正常に読み込まれますが、一致していない場合は読み込みと実行が拒否されます。

のような:

<スクリプト
    整合性="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
    </script>

1. VueのCDNリソースをインポートする

たとえば、Vue の CDN リソースを紹介します。

https://unpkg.com/[email protected]/dist/vue.global.js

https://www.srihash.org/ を通じてハッシュ値を生成できます。

整合性によりハッシュ値が生成されます:

最後に、スクリプト タグにintegrityの値を追加します。

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"
    整合性="sha384-0k9//QJdpmfSdp5IK3oJjOYPfz42f2FE0goMLtK9Vq7aKllvc4Lnz7lHPHiFhvDP"
    クロスオリジン="匿名">
</スクリプト>

2. 正常かどうかを確認する

インポートされたリソースはcdnリソースであるため、直接変更することはできませんが、 integrity変更integrity

最終的にブラウザは次のエラーを報告します。

計算された SHA-256 整合性 'Wr5PnkpmZ3oQFRZLfDrI6fsePSMak5h8rW2rqq+mdWg=' を持つリソース 'https://unpkg.com/[email protected]/dist/vue.global.js' の 'integrity' 属性に有効なダイジェストが見つかりませんでした。リソースはブロックされています。

これは、 cdnファイルのhash値がintegrityと一致しないことを意味します。

JavaScript のセキュリティ検証に integrity 属性を使用する方法については、これで終わりです。スクリプトの整合性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript の toLocaleString() での時間フォーマットに関する新しいアイデア
  • JavaScript の isPrototypeOf 関数
  • JavaScriptプロトタイプチェーンの詳細な説明
  • JavaScript の構成と継承の説明
  • jsイベント委譲の詳細な説明
  • nuxt.js 複数の環境変数の設定
  • JS における for、for...in、for...of、forEach の違いと使用例

<<:  HTML でのアンカーポイントの適用

>>:  http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

推薦する

CSS 動的読み込みバー効果のサンプルコード

CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...

Mac インストール mysqlclient プロセス分析

仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...

VMware仮想マシンにLinux(CentOS)をインストールするための詳細な構成手順

CentOS7をダウンロード私がダウンロードしたイメージはCentOS-7-x86_64-DVD-1...

検索履歴を実装するjQueryプラグイン

毎日jQueryプラグイン - 検索履歴を作成するためのものです。参考までに、具体的な内容は次のとお...

ミニプログラム開発ツールのソースコードからの基本実装の分析

目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...

vue keep-alive の簡単な概要

1. 機能主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。 ...

MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル

MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...

202 無料の高品質 XHTML テンプレート (2)

前回の記事「202 個の無料高品質 XHTML テンプレート (1)」に続き、123WORDPRES...

CSS スキル コレクション - 古典の中の古典

リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...

Reactはダブルスライダークロススライドを実装します

この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...

UbuntuにMySQLデータベースをインストールする方法

Ubuntu は、Linux をベースにした無料のオープンソース デスクトップ PC オペレーティン...

ReactアプリケーションにおけるDOM DIFFアルゴリズムの詳細な説明

目次序文VirtualDOM とは何ですか? VirtualDOMを使用する理由DOMレンダリングペ...

HTML で水平ナビゲーション構造を設定する方法

この記事では、主にリスト構造を使用して水平ナビゲーション構造を設定する 2 つの方法を紹介します。こ...

Windows Server 2019 のセットアップ方法 (画像とテキスト付き)

1. Windows Server 2019 のインストールVmware に Windows Se...

MySQL 検査スクリプト (必読)

以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...