在使用 Webpack 打包前端代码时，我们经常会遇到一些问题。其中一个常见的问题就是在使用 Subresource Integrity（SRI）时遇到的问题。SRI 是一种安全机制，用于检测资源是否被篡改。本文将介绍在使用 Webpack 打包时遇到 SRI 问题的解决方法，并提供示例代码。
什么是 Subresource Integrity？
Subresource Integrity（SRI）是一种安全机制，用于检测资源是否被篡改。在网页中，我们通常会引入一些外部资源，如 CSS、JavaScript、图片等。这些资源可能被恶意篡改，从而导致安全问题。为了解决这个问题，W3C 提出了 SRI 标准，它可以让我们在引入外部资源时添加一个哈希值，从而确保该资源未被篡改。
Webpack 打包时遇到 SRI 问题的原因
在使用 Webpack 打包前端代码时，我们通常会使用一些插件来优化代码。其中一个常用的插件是 html-webpack-plugin，它可以自动生成 HTML 文件，并将打包后的 JavaScript 和 CSS 文件引入到 HTML 文件中。然而，当我们在 HTML 文件中使用 SRI 时，就会遇到问题。
具体来说，我们需要在 HTML 文件中为引入的资源添加 SRI 属性。例如，在引入一个 JavaScript 文件时，我们可以这样写：
<script src="https://example.com/script.js" integrity="sha384-abcdefghijklmnopqrstuvwxyz"></script>
其中，integrity 属性的值是一个哈希值，用于检测该资源是否被篡改。然而，当我们使用 html-webpack-plugin 自动生成 HTML 文件时，它并不会为我们自动添加 SRI 属性。这就导致了一个问题：我们需要手动为每个引入的资源添加 SRI 属性，这样会非常繁琐。
解决方法
为了解决这个问题，我们可以使用 webpack-subresource-integrity 插件。这个插件可以为我们自动添加 SRI 属性。
首先，我们需要安装 webpack-subresource-integrity 插件：
npm install webpack-subresource-integrity --save-dev
然后，在 Webpack 配置文件中添加以下内容：
-- -------------------- ---- -------
----- --------- - -----------------------------------------
-------------- - -
-- ---
------- -
------------------- ------------
--
-------- -
--- -----------
-------------- ---------- ----------
-------- -----
---
--
--其中，crossOriginLoading 属性用于指定资源的跨域属性，这里我们将其设置为 anonymous。hashFuncNames 属性用于指定使用哪些哈希算法，这里我们使用了 sha256 和 sha384。enabled 属性用于指定是否启用 SRI。
添加完插件后，我们就可以在 HTML 文件中使用 SRI 属性了。例如，在引入一个 JavaScript 文件时，我们可以这样写：
<script src="https://example.com/script.js" integrity="sha384-abcdefghijklmnopqrstuvwxyz" crossorigin="anonymous"></script>
其中，crossorigin 属性用于指定资源的跨域属性，这里我们将其设置为 anonymous。
示例代码
以下是一个使用 SRI 的示例代码。在这个示例中，我们使用了 html-webpack-plugin 插件自动生成 HTML 文件，并使用了 webpack-subresource-integrity 插件为资源添加 SRI 属性。
webpack.config.js 文件
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- --------- - -----------------------------------------
-------------- - -
------ -----------------
------- -
--------- --------------------------
------------------- ------------
--
-------- -
--- --------------------
--- -----------
-------------- ---------- ----------
-------- -----
---
--
--index.html 文件
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- --- ------------
-------
------
--------- -----------
------- --------------- --------------------------------------------- ---------------------------------
-------
-------index.js 文件
console.log('Hello World!');总结
在使用 Webpack 打包前端代码时，我们经常会遇到一些问题。其中一个常见的问题就是在使用 SRI 时遇到的问题。为了解决这个问题，我们可以使用 webpack-subresource-integrity 插件。这个插件可以为我们自动添加 SRI 属性。在使用 SRI 时，我们需要注意为每个引入的资源添加 SRI 属性，并将跨域属性设置为 anonymous。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66111aa3d10417a2221cbd92