拒绝连接到 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？

Answer 1

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

Answer 2

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

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

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

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

1. topicstarter 的问题是 node.js 在依赖项中包含 Helmet 中间件。 Helmet v4 发布了一个 default CSP HTTP header，它没有 connect-src 指令。
   这就是 topicstarter 观察到以下消息的原因：

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

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

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

所以有两个选择：

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