Content Security Policy

问题来源

在浏览器控制台使用 html2pdf 的示例时，显示：

是造成的这个问题，查看 http 请求的 response header 里有这样的内容：

那么上面报错的问题就是来源于响应头里的 Content-Security-Policy 的配置。

什么是 CSP

CSP 全称 Content Security Policy，是为了页面内容安全而制定的一系列防护策略，类似于白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单，它的实现和执行全部由浏览器完成，开发者只需提供配置。通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。

怎么用

1. 通过在 http response header 中加入 CSP

Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org; child-src https:

1. 通过在 html 中加入 CSP 的 meta 信息

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

可配置项列表

• script-src：外部脚本
• style-src：样式表
• img-src：图像
• media-src：媒体文件（音频和视频）
• font-src：字体文件
• object-src：插件（比如 Flash）
• child-src：框架
• frame-ancestors：嵌入的外部资源（比如、<iframe>、和<applet>）
• connect-src：HTTP 连接（通过 XHR、WebSockets、EventSource等）
• worker-src：worker脚本
• manifest-src：manifest 文件

涉及到 CSP 的一个延伸问题/(伪)需求

当开发者使用某一 sdk 开发业务时，一般的流程是：主动加载某一特定版本的 sdk 进行开发 -> 测试 -> 上线。 设想有这样一个场景：sdk 1.0 版本广泛被使用，因存在某一 Bug，主动通知开发者去升级又涉及到大量升级 -> 测试 -> 上线流程而导致时间线较长。

将 sdk 分为 shell 和 core 部分，shell 负责加载 core，而 core 为 sdk 的核心业务逻辑部分，shell 提供给客户开发时进行使用，并由 shell 加载相对应版本的 core。 当涉及到 core 因 bug 升级时，通过灰度强制使某些用户的 shell 加载修复了版本的 core。

不过不确定这个是不是个伪需求，因为会绕过正常的测试，上线流程，存在一定可能性导致业务上出问题。

参考

1. Content Security Policy 入门教程
2. 前端安全配置之Content-Security-Policy(csp)