npm 包 grunt-sri 是一个用于生成 Subresource Integrity （SRI）标识符的工具，它可以帮助前端开发人员更好地保护他们的站点和应用程序。在本文中，我们将探讨如何使用 grunt-sri 生成 SRI 标识符，并使用它保护您的站点。
SRI 是什么？
Subresource Integrity （SRI）是一项安全性特性，旨在确保来自第三方站点的文件（如 JavaScript、CSS 和图像）不被篡改。SRI 使用一个加密字符串来创建一个摘要，然后将该字符串嵌入到 HTML 和其他 web 文档中。当浏览器下载资源时，它将检查该资源的 SRI 标识符，以确保它的内容与服务器上的内容匹配。
如何使用 grunt-sri
首先，您需要安装 grunt-sri，您可以使用以下命令来安装：
--- ------- --------- ----------
然后，在您的 Gruntfile.js 中编写以下任务：
------------------
---- -
-------- -
---------- --------
--
--- -
---- -----------------------------
----- ---------------------------------
--
---- -
---- -------------------------------
----- ----------------------------------
-
-
---
--------------------------------
----------------------------- ---------上面的任务使用了两个源 js 和 css， 分别表示 JavaScript 和 CSS 文件。 每个源都有一个 src 和 dest 属性，分别代表源文件夹和目标文件夹。 此外，您还可以使用 options 属性来指定算法，对于 sha384、 sha512 算法， 需要指定浏览器支持的脚本范围。
示例代码
以生成 process 封装脚本 script/boot.js 为例, 首先在 Gruntfile.js 中定义 sri 任务:
------------------
---- -
--- -
-------- -
---------- ---------
------ --------
--
---- -----------------
----- --------------
-
-
---
--------------------------------
----------------------------- ---------在终端输入 grunt sri, 即可生成 dist/boot.js 文件的 sri 标识符。
生成的 dist/boot.js 文件内容：
------------ ----- --- ---------------------------- --- ------------------------------------------------------------
在 HTML 中， 引入 script 行时，使用 integrity 和 crossorigin 属性即可：
------- ------------------
----------------------------------------------
---------------------------------完整的示例代码可以在 GitHub: grunt-sri-example 中获取。
总结
grunt-sri 是一个非常有用的工具，可以帮助前端开发人员更好地保护他们的站点和应用程序。 本文介绍了如何使用 grunt-sri 生成 SRI 标识符，并在站点中使用它们。 如果您在开发站点时需要更好的安全性和保护，请考虑使用 SRI 以及其他类似的工具，以追求更好的安全性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64781