简介
在前端开发中，我们经常需要引用第三方的 JavaScript 或 CSS 文件，以实现一些复杂功能。然而，有些恶意攻击者可能会利用这些文件来注入恶意代码，从而危害到用户的浏览器安全。为了解决这个问题，引入了 Subresource Integrity（SRI）技术，可以对资源文件进行校验以确保其未被篡改。
@shopify/webpack-runtime-sri-verification-plugin 是一个 webpack 插件，可以为您的项目添加 SRI 校验功能。本文将详细介绍如何使用该插件。
安装
该插件可以通过 npm 包管理器进行安装：
npm install @shopify/webpack-runtime-sri-verification-plugin --save-dev
使用
使用 @shopify/webpack-runtime-sri-verification-plugin 非常简单，只需要在 webpack 配置文件中添加以下代码即可：
-- -------------------- ---- -------
----- ---------------- - ------------------------------------------------------------
-------------- - -
-- -------
-------- -
--- ------------------
-------- -------
--
-
-以上配置将启用 SRI 校验功能，并且在校验失败时会在控制台输出错误信息并抛出一个错误。
配置项
@shopify/webpack-runtime-sri-verification-plugin 支持以下配置项：
hashFunc: 使用的 hash 函数，默认为 sha384。
hashDigest: 使用的 hash 摘要算法，默认为 base64。
hashDigestLength: hash 摘要的长度，默认为 48。
onError: 校验失败时的处理方式，默认为
'warn'：'warn'：在控制台输出错误信息，但不抛出错误。'throw'：在控制台输出错误信息并抛出一个错误。
exclude: 排除的文件列表，类型为正则表达式或函数。如果文件路径匹配任何一个正则表达式或任何一个函数返回 true，则该文件不进行 SRI 校验，默认为空数组。
示例代码
以下是一个 webpack 配置文件的示例，它启用了 @shopify/webpack-runtime-sri-verification-plugin：
-- -------------------- ---- -------
----- ---------------- - ------------------------------------------------------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
--
-------- -
--- -------------------
--------- -------------------
---
--- ------------------
-------- --------
-------- -
--------------
--------------------------------------
--
---
--
--在使用 @shopify/webpack-runtime-sri-verification-plugin 后，webpack 会自动将生成的资源文件的 SRI 校验值添加到 HTML 文件中。例如：
<script src="bundle.js" integrity="sha384-9OcsjtzOprJ/XE0Qk6eiZsKj1sJVKGAzfypTgTEmEtGOOi+OXNjzZDPrkcZRp2sD" crossorigin="anonymous"></script>
总结
@shopify/webpack-runtime-sri-verification-plugin 是一个非常实用的 webpack 插件，可以帮助我们更好地保护用户浏览器的安全。希望这篇文章能够帮助你了解如何使用该插件，并且希望你在使用过程中能够避免一些常见的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cd9aedbf7be33b25670ce