如何添加内容安全策略（CSP）

Question

我想使用 javascript 访问网站。但我在控制台中收到以下错误。

拒绝连接到“https://example.com”，因为它违反了以下内容安全策略指令：“default-src 'self'”。请注意，“connect-src”未明确设置，因此“default-src”用作后备。

我在index.html中添加了以下元标记，

meta http-equiv="Content-Security-Policy" content="connect-src 'self' http://example.com;" />

这不是添加CSP的正确方法吗？请帮忙。

Answer 1

您已经发布了一个采用

default-src 'self'

政策的 CSP。很可能它是通过 HTTP 标头完成的。
如果是 NodeJS 服务器，请检查 Helmet middleware 设置；如果是 Apache 服务器，请检查

Header set

文件中的

.htaccess

。对于 Nginx，它可以是配置中的

add_header

。

通过添加

<meta>

标签，您只需发布第二个 CSP，它不会覆盖第一个 CSP。 2 个 CSP 随后起作用 - 所有来源都应通过两个 CSP。

找出 CSP 的发布位置并在其中添加

connect-src 'self' http://example.com;

。

Answer 2

这是一个创建 React + Webpack 应用程序以使用 Node 和 Nginx 服务器在每次页面刷新时生成 CSP 随机数的示例。