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)

推薦する

win10 64 ビット システムに複数の JDK バージョンをインストールする際の切り替え問題と解決策の概要

コンピューターにmyeclipse2017とidea2017がインストールされているため、ideaが...

MySQL で準備、実行、割り当て解除ステートメントを使用するチュートリアル

序文MySQLでは、準備、実行、割り当て解除を正式にはPREPARE STATEMENTと呼びます。...

MySql の知識ポイント: トランザクション、インデックス、ロックの原則、使用状況の分析

この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...

CentOS7.4 起動時の緊急モードへようこそメッセージに対する解決策

今日は仮想マシンを使って実験をしました。システムをインストールし、いくつかのオプションを最適化した後...

Windows (x86、64 ビット) で MySQL 5.7.17 無料インストール バージョンをアップグレードするための詳細なチュートリアル

Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...

Centos7 での MySQL のインストールに関するチュートリアル

最近、自宅サーバーにクラウドディスクを導入する予定なので、一連の環境構築作業を始めました。MySQL...

JS の 6 つの継承方法とその長所と短所

目次序文プロトタイプチェーン継承コンストラクタの継承組み合わせ継承(プロトタイプチェーン継承とコンス...

NodeサイトのForever+nginx導入方法例

私は最近、最も安い Tencent クラウド サーバーを購入しました。これは主に、Web テクノロジ...

Vueはリストのシームレスなスクロールを実装します

この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...

MySQL のデータの偶発的な削除の解決策と kill ステートメントの原則

mysql が誤ってデータを削除しました削除ステートメントを使用して誤ってデータ行を削除する誤ってデ...

MySQL 8.0.22 winx64 のインストールと設定のグラフィックチュートリアル

mysql 8.0.22 winx64のインストールと設定のグラフィックチュートリアルは参考までに、...

設定操作からMySQLへのNULLが見つからない問題を解決する

興味深い発見:合計 1000 件のレコードを含むテーブルがあります。クエリ ステートメントは次のよう...

中国語ウェブコンテンツを紹介する10の経験

<br /> テキスト、シンボル、リンクの 3 つの側面に焦点を当て、主に中国語で、私の...

スライドボタン効果を実現するネイティブJS

Jsで作ったスライドボタンの具体的なコードは参考までに。具体的な内容は以下のとおりですまずエフェク...