默认 CSP
Content-Security-Policy 标头中发送以下策略:
frame-ancestors 和 form-action 指令,用于控制你的站点可以被嵌入到哪里,以及表单可以提交到哪里。默认情况下,这些指令为:
frame-ancestors 指令会阻止其他域名在 iframe 中嵌入你的站点。如需在你自己的应用中嵌入文档,请参阅文档站点无法在 iframe 中加载。
默认策略允许来自任意 HTTPS 源的资源,因此大多数自定义脚本、嵌入内容、字体和分析工具无需更改即可正常工作。浏览器会阻止策略不允许的资源:
- HTTP 资源: 脚本、样式、字体和其他资源必须通过 HTTPS 加载。浏览器会阻止到明文 HTTP URL 的连接,包括
http://localhost:8545等本地开发服务器。 - blob 和 data 脚本: 浏览器会阻止从
blob:或data:URL 加载的脚本。一些第三方标签加载器会使用这种方式。 - 插件: 浏览器会阻止
<object>和<embed>元素。 - 跨源 worker: Web worker 必须从你的文档域名或
blob:URL 加载。
blob: 脚本的加载器。
CSP 指令
script-src:控制可运行的脚本style-src:控制可加载的样式表font-src:控制可加载的字体img-src:控制可加载的图像、图标和徽标connect-src:控制可连接的用于 API 调用和 WebSocket 连接的 URLframe-src:控制可嵌入 frame 或 iframe 的 URLdefault-src:未显式设置其他指令时的回退项
域名允许列表
示例 CSP 配置
仅包含你实际使用的服务的 domain。删除你尚未为文档配置的任何 Analytics 相关 domain。
按代理类型划分的常见配置
Cloudflare 配置
- 在 Cloudflare 控制台,进入 Rules > Overview。
- 选择 Create rule > Response Header Transform Rule。
- 配置该规则:
- Modify response header:设置为 static
- Header name:
Content-Security-Policy - Header value:
- Header name:
- 部署该规则。
AWS CloudFront 配置
Vercel 配置
vercel.json:
疑难解答
- 打开浏览器的开发者工具。
- 切换到 Console 标签页。
- 查找以下前缀的错误信息:
Content Security Policy: The page's settings blocked the loading of a resourceRefused to load the script/stylesheet because it violates the following Content Security Policy directiveRefused to connect to because it violates the following Content Security Policy directive