随着前端应用的复杂度不断提高，我们需要一些更加安全和可靠的方式来保护我们的应用。SRI（Subresource Integrity）就是这样一种方式。SRI 允许我们使用一个哈希值来保证外部资源的完整性和安全性，防止中间人攻击和数据篡改。
@shopify/webpack-asset-sri-hash-verification-plugin 就是一个可以自动生成外部资源的哈希值，并验证哈希值的 webpack 插件。本文将介绍如何使用这个插件。
安装
使用 npm 进行安装：
npm install @shopify/webpack-asset-sri-hash-verification-plugin --save-dev
配置 webpack
在 webpack 的配置文件中引入插件：
-- -------------------- ---- -------
----- ------------------------------ - ---------------------------------------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- ---------------------------------
--
--使用方式
插件会在应用构建过程中自动生成每个外部资源的哈希值，并将这些哈希值保存到一个 JSON 文件中。同时，插件还会在页面中插入一个 <script> 标签，用来验证外部资源的哈希值。
在你的 HTML 文件中，你需要加入以下标签：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -----------
-------
------
---- ---- --- ------- ---
------- ----------------------------------------------------------
------- ---------------------- ------------------------
------- ---------------------- ----------------------------------------------------------------
-------
-------其中最后一个标签就是用来验证外部资源的哈希值。这个文件的名字可以在 webpack 配置中通过 filename 参数自定义。
现在，每次应用重新构建时，都会生成新的外部资源的哈希值，并更新验证标签。
细节说明
在官方文档中可以看到本插件的默认黑名单：
-- -------------------- ---- ------- ------- ------ ----- ----- ----- ----- ----- ------ ----- ----- -----
如果需要在这些类型中添加其他类型，则可以在插件实例中添加黑名单：
-- -------------------- ---- -------
----- ------------------------------ - ---------------------------------------------------------------
-------------- - -
-- ---
-------- -
-- ---
--- --------------------------------
---------- -----------
---
--
--上述示例中配置了 *.webp 为黑名单。
结论
SRI 是保证网站安全的一个非常好的实践。使用 @shopify/webpack-asset-sri-hash-verification-plugin 插件，可以非常方便地自动生成和验证哈希值，进一步提高应用的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cd9aedbf7be33b25670c9