在开发前端应用时，保持网站的安全性非常重要。其中一项关键的安全措施就是使用子资源完整性（Subresource Integrity，简称 SRI）技术，这可以确保网站的资源文件在下载和使用过程中不被篡改。
有一个 NPM 包叫做 webpack-subresource-integrity 可以帮助我们实现 SRI 技术。在这篇文章中，我将详细介绍如何安装和使用这个 NPM 包。
安装
首先，我们需要在项目文件夹中安装 webpack 和 webpack-subresource-integrity：
npm install webpack webpack-subresource-integrity --save-dev
接下来，我们要为 SRI 设置一个 Hash 算法，在 webpack 配置文件中添加以下代码：
-- -------------------- ---- -------
----- -------------------------- - -----------------------------------------
-------------- - -
-------- -
--- ----------------------------
-------------- ---------- ----------
---
--
--这里我们设置了两种哈希算法：SHA-256 和 SHA-384。你也可以根据需要添加其他哈希算法或删除其中的某些哈希算法。
使用
现在，我们已经设置好了 SRI，如何使用它呢？我们可以在 HTML 文件中使用 integrity 和 crossorigin 属性。这些属性指定资产的期望哈希值以及跨源请求如何设置：
<script src="https://example.com/example.js" integrity="sha384-ZOyahU6DTnaUbaSNKXDXrwBLTtyTjKfGuGnMrwUpVKeBZ2s4gzceHDzFm/43s/9z" crossorigin="anonymous"></script>
在上面的代码中，我们向服务器请求一个名为 example.js 的 JavaScript 文件，然后使用 SHA-384 算法的哈希值进行验证。如果哈希值与服务器上的哈希值匹配，则文件已通过完整性验证。
如果你想确保使用 webpack 将接收到的所有文件都包含 SRI 哈希，请添加以下代码：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-------- -
--- -------------------
--------- ------------------------
---------- -----
---
--
--示例代码
-- -------------------- ---- -------
----- -------------------------- - -----------------------------------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------------------
----------- ----
--
-------- -
--- ----------------------------
-------------- ---------- ----------
---
--- -------------------
--------- ----------------------
---------- -----
---
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
--
--
--
--
---- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- -----------
-------
------
---- ----------------
------- ---------------------- -------------- ----------------------------------------------------------------------------------- ---------------------------------
-------
-------结论
就是这样！使用 webpack-subresource-integrity 包，我们可以轻松地为我们的前端应用添加子资源完整性。这些步骤可以确保我们的文件在传输和下载过程中不会被篡改，从而获得更高的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56920