前言
在网页开发中，安全性是至关重要的一部分。为了减少网站遭到恶意攻击或本地 XSS（跨站点脚本攻击）的风险，我们可以使用 Content Security Policy（CSP）。
CSP 是一种 HTTP Header，可以让网站管理员指定从哪些来源获取资源。这样可以限制以及预防恶意资源的加载，降低 XSS 需要注入的资源数量和难易程度。
ember-cli-content-security-policy 方案
ember-cli-content-security-policy 是一个 Ember.js 的插件，用来管理 CSP。该插件提供了一些有用的组件，帮助我们轻松创建 CSP 配置，而不需要手动编写 CSP Header。
在本篇文章中，我们将通过以下步骤来学习如何使用 ember-cli-content-security-policy 插件：
- 安装插件
- 配置插件
- 编写 CSP 策略
- 确认 CSP 检查功能是否正常工作
安装插件
首先，我们需要在新建 Ember 应用中安装 ember-cli-content-security-policy 插件。打开命令行，输入以下命令：
ember install ember-cli-content-security-policy
配置插件
插件安装完毕后，我们需要在 Ember 应用的配置文件中添加插件的配置。打开 config/environment.js 文件，添加以下代码段：
-- -------------------- ---- ------- ---------------------- - -------------- --------- ------------- ------- ----------------- ----------- --------- -------------- --------- ---------- --------- ------------ ------- ----------------- ------------ -------- -
以上 CSP 策略指定了默认的源、JavaScript、CSS、字体和图像等资源的来源。由于我们示例是本地开发（localhost:4200），所以我们可以直接使用 'self'，如果网站上线应该指定资源的实际来源。
编写 CSP 策略
在上面的默认 CSP 策略下，如果我们在模板中引用了一个不存在的资源，浏览器将不允许该资源加载。因此，我们可以使用一些组件，以便我们不需要手动编写 CSP。
例如，在模板中使用 {{protect-script}}，可以在 HTML 中生成一个用于指定 JavaScript 远程源的 CSP。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- ------------------ -----------
----- --------------- -----------------------------
--------- ----- -------------------
------------- --------
---------------- ----------------------------------- --
-------
------
------------- --------
----------
-------
-------类似地，我们还可以使用以下组件来为标签指定源：
{{protect-form-action}}和{{protect-action}}: 用于指定表单和表单提交地址的来源{{protect-link-to}}: 用于指定转到页面的链接来源{{protect-href}}: 用于指定指向其他页面的链接来源
确认 CSP 检查功能是否正常工作
最后，我们需要确认 CSP 检查功能是否正常工作。为此，我们可以使用 HackBar 等 Web 开发者工具 extension 实现。
在 Chrome 浏览器中，打开开发者工具窗口，进入 Network 面板，并选择 HackBar 工具，输入将要访问的网页 URL。当该网页加载时，我们可以检查 CSP Headers。
从以上截图中，我们可以看到 CSP 内容 'default-src': "'none'",这样的策略将不允许加载来自其他源的资源。
总结
CSP 对于网站的安全性至关重要。现有的 CSP 策略有许多的规则以及需要考虑的因素，使用 ember-cli-content-security-policy 插件有助于我们轻松创建和管理 CSP 策略。
在你的项目中使用 CSP 来提高安全性，保证网站和用户数据的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59768