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)

推薦する

MySQL データベース分離レベルと MVCC の詳細な説明

目次1. 分離レベルコミットされていない読み取りREAD COMMITED (コミット読み取り/非反...

vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明

目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...

DockerコンテナはホストのMySQL操作にアクセスする

背景:インターフェイスを提供する Flask プロジェクトがあり、これは Docker コンテナを使...

MySQL ログの設定と表示方法

MySQL には次のログがあります。エラーログ: -log-errクエリログ: -logスロークエリ...

ハイパーコネクションの4つの状態の適用の詳細な説明

ブラウザの問題かもしれないと思うかもしれませんが、スタイル定義の順序が間違っている可能性が高いです。...

Vueコンポーネント間の通信の非常に詳細な要約

目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...

JS ES6コーディング標準の詳細な説明

目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...

mysql 5.6.23 winx64.zip インストール詳細チュートリアル

WindowsにMySQLの圧縮バージョンをインストールする方法の詳細については、以下を参照してくだ...

MySQL 8.0.11 Community Green Edition の Windows 用インストール手順図

このチュートリアルでは、インストールに最新の MySQL コミュニティ グリーン バージョンである ...

Django プロジェクトを作成して MySQL に接続する方法

1: django-admin.py startproject プロジェクト名2: cd プロジェク...

MySQL の分離レベル、ロック、MVCC の紹介

この記事の目的は、これらの概念とその機能の関係を明らかにすることです。 Mysql がトランザクショ...

バックエンドから返される 100,000 個のデータをフロントエンドでより適切に表示するにはどうすればよいですか?

目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...

Dockerでホストファイルをカスタマイズする方法について簡単に説明します

目次1. コマンド2. docker-compose.yml 3. Dockerファイル4. 直接変...

hr 水平線スタイルの例コード

コードをコピーコードは次のとおりです。 <hr style="width:490px...

MySQLデータベースインデックスの左端一致原則

目次1. 共同インデックスの説明2. ac はインデックスを使用できますか? 3. 考える4. 最左...