在前端开发中，我们经常需要对静态资源进行优化以提升网页性能。其中，srisum 是一款常用的工具，可以通过计算文件哈希值并生成相应的 SRI（Subresource Integrity）校验值，从而有效防止 CDN 资源被篡改或替换，保障网站的安全性。
本篇文章将为大家介绍如何使用 npm 包 srisum，以及它的一些常用功能和使用技巧。
安装 srisum
使用 srisum 首先需要在本地安装它。在终端中执行以下命令即可：
npm install srisum --save-dev
生成 SRI
使用 srisum 自动生成 SRI 非常简单。我们可以使用 srisum 的 getFileHash 方法，提供文件路径后，即可得到该文件的 SHA-384 哈希值和对应的 SRI 验证字符串。
下面是一个使用示例：
-- -------------------- ---- -------
--- ------ - ------------------
--- -- - --------------
--- -------- - ---------------
--------------------- ------------- ----- -
-- ----- -
----- ----
-
--- -------- - -------------------------
----------------- ------- ----------------------
------------------- ----------------------
---在以上代码中，我们首先引入了 srisum 和 fs 模块，然后读取了指定的文件，得到了该文件内容的哈希值和 SRI 校验字符串。
其中 fileHash.hexDigest() 方法返回的是哈希值的十六进制表示，而 fileHash.integrity() 则返回的是 SRI 校验字符串。
如果需要生成多个文件的 SRI 值，我们可以使用以下代码：
-- -------------------- ---- -------
--- ------ - ------------------
--- -- - --------------
--- ----- - ----------------- ---------------- -----------------
--- ---- - ---
-------------------------------- -
--------------------- ------------- ----- -
-- ----- -
----- ----
-
--- -------- - -------------------------
----------------- ------- ----------------------
------------------- ----------------------
--------------------------------
---
---
---------------- --- --- -------- ----------- ----在以上代码中，我们使用 forEach 循环遍历了多个文件，并将它们的 SRI 值保存在一个数组中。
针对 CDN 资源生成 SRI
除了针对本地文件生成 SRI，我们也可以针对 CDN 资源生成 SRI。下面是一个使用示例：
var srisum = require('srisum');
var url = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js';
srisum.getFromUrl(url, function(err, fileHash) {
console.log('File hash:', fileHash.hexDigest());
console.log('SRI:', fileHash.integrity());
});以上代码中，我们使用 getFromUrl 方法获取 CDN 资源的哈希值和 SRI 验证字符串。需要注意的是，使用该方法需要保证 CDN 资源支持跨域访问。
在 Grunt 和 Gulp 中使用 srisum
在 Grunt 和 Gulp 中使用 srisum 也非常简单。下面是一个 Gruntfile.js 的示例：
-- -------------------- ---- -------
-------------- - --------------- -
----- ------ - ------------------
----- -- - --------------
----- ---- - ----------------
------------------------- --------- --- --- ----------- ---------- -
----- ---- - -------------
----- ------- - --------------
------ ---
---
----- ----------- - -------------- -
--- -------- - -----
-- ------------------------ -
------------------------ -------------
-------
-
-- ------------------------- -
----- ---- - --------------------------
----- -------- - -------------------------
----- --- - ---------------------
---------------------- --- -------- ---------
----- -------- - ------------------------
----- ------- - -----------------------
----- ------- - ---------------------------- -------------------- ----------------
----- --------- - -----------------------
----- ------- - -------------------- ---------
----------------------- ---------
-
--
-----------------------------------
-------
---
--在以上代码中，我们定义了一个名为 sri 的 Grunt 任务，用于自动生成 SRI。在任务执行时，我们将会按照指定路径下的文件，逐个计算文件的哈希值，并生成对应的 SRI 校验字符串。最后，我们将对应的 SRI 值附加在文件名末尾，方便后续资源管理。
如果你需要在 Gulp 中使用 srisum，可以使用 gulp-sri 插件。详细使用方法可以参考官方文档。
总结
通过本篇文章的学习，相信大家已经掌握了如何使用 npm 包 srisum，在前端开发项目中生成文件的 SRI 校验字符串。使用 srisum 可以提高静态资源的安全性和效率，避免文件被篡改或替换，从而提升网页的性能和用户体验。如果您有更多有趣的用例和实践，请在评论区留言并分享给我们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57637