在前端开发中，网络安全是一项不可忽视的任务。为保护用户数据和确保数据传输过程的安全性，Subresource Integrity (SRI) 技术被广泛应用。SRI 是一项浏览器端安全策略，它利用加密哈希值保证脚本或样式表资源的完整性和来源。
在本文中，我们将介绍 npm 包 sub-resource-integrity-4-all 的使用教程，以帮助前端工程师有效地使用 Subresource Integrity 技术完成网页安全任务。
什么是 sub-resource-integrity-4-all
sub-resource-integrity-4-all 是一个 npm 包，它可以帮助我们在构建网站时快速、自动、透明地为脚本和样式表生成 Subresource Integrity 哈希值。该工具可以同时生成各种哈希值，包括 SHA256、SHA384、SHA512、RIPEMD160 和 Whirlpool。
如何使用 sub-resource-integrity-4-all
安装
首先，我们需要安装 sub-resource-integrity-4-all：
npm install sub-resource-integrity-4-all --save-dev
配置
在需要加密的资源上添加 subresource-integrity 属性，并使用 Node.js API 生成资源的哈希值。
<link rel="stylesheet" src="/style.css" integrity="" crossorigin="anonymous"> <script src="/script.js" integrity="" crossorigin="anonymous"></script>
subresource-integrity 属性包含可选的算法名（如 sha256 或 sha384），以及经过哈希编码的资源内容的 Base64 编码（生成哈希值的具体方法将在下文中介绍）。
const sri = require('sub-resource-integrity-4-all');
const fs = require('fs');
const cssFile = fs.readFileSync('path/to/style.css', 'utf8');
const cssHash = sri.calculateHash(cssFile);
// 不同的哈希算法对应不同的 sriPrefix
const sriPrefix = 'sha256-';
const integrity = sriPrefix + cssHash;在生成哈希值的过程中，可以通过简单的 API 配置如何计算哈希值，确保安全性。比如可以设置是否忽略某些注释、是否忽略某些行、是否忽略空白行等等。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------- --------- - -----------
----- ---------------- --------------------- ------------ ------------------------
-------
------
---------------- --------- - --------
------
------- ------------------- ------------ ---------------------------------
-------
-------
--------- -------------------- ---- ------- ----- --- - ---------------------------------------- ----- -- - -------------- ----- ------- - ------------------------------------ -------- ----- ------- - --------------------------- ----- ------ - ------------------------------------ -------- ----- ------ - -------------------------- ----- --------- - ---------- ----- ------------ - --------- - -------- ----- ----------- - --------- - ------- -------------------------- -------------------------
输出结果：
sha256-guy86oRnJHi5c5n5WtYB3UiqD1QzMw+AKBJBZ8Syi5o= sha256-b5/VB/5W5Yt/M19uziCRlxQ2g0QQCmuZOcy8lbPDjLk=
总结
Subresource Integrity 技术可以有效保证网页脚本或样式表的安全性和完整性。sub-resource-integrity-4-all 可以帮助前端工程师轻松地生成 Subresource Integrity 哈希值，从而为网站的安全工作提供保障。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597881e8991b448d7010