在前端开发中，我们经常使用模板引擎来生成 HTML 页面。Handlebars 是一款非常流行的模板引擎，它允许我们在 HTML 中嵌入 JavaScript 代码以及通过数据来自动生成 HTML。然而，随着网站安全性要求的提升，我们需要确保在加载资源时，不会被恶意篡改或者劫持。这就需要我们为页面中的资源添加 Subresource Integrity（SRI）。
handlebars-subresource-integrity 是一款可以自动添加 SRI 属性的 Handlebars 模板引擎的 npm 包。它可以在编译 Handlebars 模板时，为其中的脚本和样式资源自动生成对应的 SRI 属性。下面是详细的使用教程。
安装
首先，我们需要在项目中安装 handlebars-subresource-integrity。在命令行中输入以下命令：
npm install handlebars-subresource-integrity --save-dev
安装完成后，我们可以在项目中使用它了。
使用方法
- 安装 handlebars-subresource-integrity 后，在项目中引入 Handlebars 和 handlebars-subresource-integrity：
const handlebars = require('handlebars');
const handlebarsSRI = require('handlebars-subresource-integrity');- 然后，注册 handlebarsSRI 到 Handlebars 中：
handlebarsSRI.register(handlebars);
- 最后，可以直接编译带有 SRI 属性的 Handlebars 模板了：
const template = handlebars.compile('<script src="example.js"></script>');
const result = template({}); // 执行编译
console.log(result);在这里，我们预定义了一个模板，在该模板中有一个引用 example.js 的 script 标签，通过 handlebarsSRI.register(handlebars)，将 SRI 注册到模板中，即可使用模板引擎和 SRI 属性结合编译模板。
示例
我们可以通过以下示例来详细学习 handlebars-subresource-integrity 的使用方法。
- 首先，创建一个如下所示的 index.html 文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- --- ------------
-------
------
---- -------------------
------- -------------------------
-------
-------- 编写一个 Handlebars 模板，例如：
<div>
{{#each list}}
<p>{{this.content}}</p>
{{/each}}
</div>在这个模板中，我们使用了 Handlebars 的 #each 循环来遍历列表内容，然后将列表项渲染成一个段落标签。
- 创建一个 index.js 文件，包含以下代码：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ------------- - --------------------------------------------
-----------------------------------
----- -------- - --------------------
--------- -----
----- ----------
------
----- ----------------
----------------- --- ------------
----- ---------------- ---------------- --------------------------------
-------
------
---- -----------------------------
------- --------------- ------------------------------------------
-------
-------
---
----- ---- - -
----- -
- -------- -------- ----
- -------- -------- ----
--
---------- -
------- ------------------------------------------------------
------ ------------------------------------------------------
--
----- --------------------
-----
------- ------
-----------------------
---------
------
--------
--
----- ------ - ---------------
--------------------在这个文件中，我们首先引入了 Handlebars 和 handlebars-subresource-integrity。然后，我们使用 handlebarsSRI.register(handlebars) 来注册 handlebars-subresource-integrity，将 SRI 属性打到模板中的 CSS 和 JS 资源中。
接着，我们定义了一个包含 SRI 属性的 Handlebars 模板，模板中包含与 index.html 相同的结构，其中 CSS 和 JS 资源都包含了 SRI 属性。
最后，我们准备了一个数据对象，将我们的数据填充进模板中。在这个数据对象中，我们包含了一个 list 数组，里面有两个包含 content 属性的对象。我们还有一个 integrity 对象，包含了 CSS 和 JS 资源的 SRI 属性值。最后，我们调用 handlebars.compile 来编译 list 变量所代表的 Handlebars 模板，并将编译结果赋值给 body 属性。
在最后的代码段，我们将数据对象传递给了模板的 compile 方法，并将返回结果输出到控制台上。
在此，我们已经成功地创建了一个包含 SRI 属性的 Handlebars 模板。
结论
Handlebars SRI 包括了可以自动添加 SRI 属性的 Handlebars 模板，可以帮助开发者有效地提高页面资源的安全性。在本文中，我们详细介绍了 handlebars-subresource-integrity 的安装和使用方法，并提供了一个详细的示例供参考。希望本文能够帮助您更好地编写安全的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4e51ab1864dac6685a