如果你正在开发一个静态网站，并且需要实现安全的 Content Security Policy，那么 makestatic-csp-sha 可能是你需要的 npm 包。这个包可以帮助你自动计算你网站上所有 JavaScript 和 CSS 文件的 hash 值，因此你可以放心地使用 CSP 的 sha256 选项来限制你网站的资源，防止 XSS 攻击和其他安全问题。
安装
在终端输入下面的命令就可以安装 makestatic-csp-sha：
npm install --save makestatic-csp-sha
使用
使用 makestatic-csp-sha 非常简单。你只需要在你的 makestatic 配置文件中添加以下内容即可：
-- -------------------- ---- -------
----- ---------------- - ------------------------------
-------------- - ------------
-- ----------
----- -------------------
---- -
----------- ------------
--------- ---------- ------------------------------------
---------- ---------- ----------------------------------
-
---在默认情况下，makestatic-csp-sha 会将所有在 "js/" 和 "css/" 子目录下的 JavaScript 和 CSS 文件添加到 CSP 中。如果你希望可以添加其他目录，你可以传递一个数组，如下所示：
-- -------------------- ---- -------
----- ---------------- - ------------------------------
-------------- - ------------
-- ----------
----- ------------------
------ ------- ------- -------------------
---
-- ------ -----
---指导意义
随着 Web 应用程序愈发复杂，我们需要更好的安全性来保护我们的用户数据和应用。CSP 是一种非常好的防御 XSS 攻击和其他安全问题的方式，而使用 sha256 hash 更是加强了 CSP 的安全性。makestatic-csp-sha 将这些技术整合在一起，帮助你快速而轻松地实现一个安全的静态网站。
示例代码
在下面的示例中，我们将使用 makestatic-csp-sha 来添加 JavaScript 和 CSS 文件的 sha256 hash 到我们的 CSP 中。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ------------
----- ---------------- -----------------------
------- ---------------------------
-------
------
-------- ----------
-------
-------在 makestatic-config.js 中，我们可以将 makestaticCspSha() 添加到 hash 配置中，并配置 CSP：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ---------------- - ------------------------------
-------------- - ------------
------ ------
------- -------
----- -------------------
---- -
----------- -----------
--------- ---------- ---------------------------------------------------------
---------- ---------- --------------------------------------------------------
-
---现在，当我们运行 makestatic 构建我们的站点时，makestatic-csp-sha 会自动计算我们的 app.js 和 style.css 文件的 sha256 值，并添加到 CSP 配置中。现在我们的站点已经更加安全了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c781e8991b448e8ed7