拒绝连接到 x，因为它违反了以下内容安全策略指令 (connect-src)

Question

我在 heroku 上部署了一个 MERN 应用程序，并为 CSP 设置了以下值：

<meta
      http-equiv="Content-Security-Policy"
      content="connect-src https://api.themoviedb.org 'self'; default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'unsafe-inline' 'self' ; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
    />

然而，这是我在 Chrome 控制台中得到的：

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

当我检查页面时可以在index.html中看到connect-src，为什么它告诉我connect-src没有设置？

Answer 1

不幸的是，标记为“正确答案”的答案是完全错误的，并且提供了误导性信息。

1. 元<meta http-equiv="Content-Security-Policy>标记不被视为遗留标记。
   在某些情况下，元标记是将策略传递到页面的唯一方法。

2. 最佳实践将 default-src 作为您的第一个指令。

   废话。CSP 中的指令顺序没有任何意义。而且，Google严格的CSPdefault-src根本没有指令。

3. 问题作者的问题是node.js在依赖项中包含头盔中间件。Helmet v4 发布了一个没有指令的默认 CSP HTTP 标头connect-src。
   这就是问题作者观察到以下消息的原因：

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

请注意，这不是来自元标记的 CSP 规则，而是 Helmet 中间件的默认 CSP 规则。

通过元标记添加第二个 CSP 来缓解默认 CSP 确实会失败，因为同时应用了 2 个 CSP - 所有源都应通过这两个 CSP。

所以有两个选择：

• 禁用 Helmethelmet.contentSecurityPolicy()并使用元标记来传递 CSP。
• 删除元标记 CSP 并将connect-src规则添加到helmet.contentSecurityPolicy(options).

Answer 2

CSP 的版本（或级别）具有新支持的功能，扩展了原始规范。通过 html 元标头为 CSP 提供服务被认为是遗留的，并且有一些缺点。 尝试通过请求的 HTTP 标头设置 CSP 另外，作为最佳实践，请设置default-srcyou first 指令。