CSP（Content Security Policy）是一种安全政策机制，可以在 web 应用程序中避免 XSS 攻击和其他类似的安全漏洞。csp-util 是一个 npm 包，帮助开发人员更轻松地使用 CSP。
本文将详细介绍 csp-util 的用法，以及如何安装和配置该包。
安装
使用 npm 命令可以轻松安装 csp-util：
npm install csp-util --save
安装完毕后，您可以在项目中引入 csp-util 模块：
const cspUtil = require('csp-util');用法
添加 CSP 指令
首先，让我们添加一个基本的 CSP 策略，只允许从相同域名下加载资源：
const csp = cspUtil.generatePolicy({
directives: {
defaultSrc: [cspUtil.allow('self')]
}
});在上面的代码中，cspUtil.generatePolicy 方法生成了一个带有默认源的推荐 CSP 策略，然后将其保存在变量 csp 中。
在 CSP 中，default-src 指令用于指定当其他 CSP 指令未指定时，应用程序可依赖的默认源。指定 cspUtil.allow('self') 意味着允许来自相同域名的资源加载。
接下来，让我们添加一些其他指令：
const csp = cspUtil.generatePolicy({
directives: {
defaultSrc: [cspUtil.allow('self')],
scriptSrc: [cspUtil.allow('self', 'unsafe-inline'), cspUtil.allow('cdnjs.cloudflare.com')],
fontSrc: [cspUtil.allow('self'), cspUtil.allow('fonts.googleapis.com')],
imgSrc: [cspUtil.allow('self'), cspUtil.allow('data:')]
}
});在上面的代码中，我们添加了许多其他指令。特别是，script-src 指令允许域内的脚本，以及从 cdnjs.cloudflare.com 加载的脚本。由于某些库需要 inline 脚本来正常工作，请注意：我们也允许 unsafe-inline。font-src 指令允许来自 fonts.googleapis.com 的字体，img-src 允许从 data URI 和同一域中加载的图片。
生成 CSP 预报告
然而，当 CSP 策略部署到生产中时，可能会出现错误或限制。CSP 预报告使开发人员可以访问有关 CSP 违规情况的详细信息。
要启用 CSP 预报告，请采取以下步骤：
- 在 HTML 页面的
<head>部分添加<meta>标签：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <meta http-equiv="Content-Security-Policy-Report-Only" content="default-src 'self'; report-uri /api/csp-report">
其中，http-equiv 属性具有 CSP 的名称（Content-Security-Policy）和预报告的名称（Content-Security-Policy-Report-Only）。该 content 属性是该网站采用的 CSP 策略。
- 启动 CSP 预报告服务。
当 CSP 违规事件发生时，浏览器会将报告信息（JSON 格式）发送到预报告地址（/api/csp-report）。
以下是我们如何对 CSP 预报告进行处理：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---------- - ---------------------- ----- --- - --------- -- -- ------------ -------------------------- -- --- ----- --------------------------- ----- ---- -- - ----- ------ - --- ------------------ -------------- ----- --------------------- -- -- ---- ---------------- -- -- ------------------- ----------
在上面的代码中，我们创建了一个 Express.js 应用程序，并使用 bodyParser 模块解析了 JSON 检测报告。如果检测到违规，则在服务器日志中输出违规事件，并返回 HTTP 204 状态码（表示成功处理请求）。
不过，要注意：CSP 追踪报告需要仔细处理。例如，不要将报告输出到可能会受到攻击的区域。
结论
CSP 是一种重要的安全机制，可以防止许多类型的攻击。但是，CSP 部署有时可能很困难。csp-util 抽象了许多常见的 CSP 用例，并提供了简单的 API，因此开发人员可以使用 CSP 轻松而可靠地保护应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726081e8991b448e88cc