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

IT技术 html node.js reactjs heroku content-security-policy
2021-04-07 15:22:49

我在 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?

2个回答

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

  1. 一个<meta http-equiv="Content-Security-Policy>meta标签视为inheritance。
    在某些情况下,元标记是将策略传送到页面的唯一方法。

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

废话。CSP 中的指令顺序没有任何意义。此外,Google 的严格 CSP根本没有 default-src 指令。

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

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

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

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

所以有两个选项:

  1. 禁用头盔helmet.contentSecurityPolicy()并使用元标记来交付 CSP。
  2. 删除元标记 CSP 并将connect-src规则添加helmet.contentSecurityPolicy(options).

CSP 的版本(或级别)具有扩展原始规范的新支持功能。通过 html 元标头为 CSP 提供服务被认为是传统的,并且有一些缺点。 尝试通过请求的 HTTP 标头设置 CSP 此外,作为最佳实践,default-src请使用您的第一个指令。

@SimeriaIonut 你是怎么做到的?目前面临同样的问题
2021-05-27 15:22:49
删除 html 元标头并添加 HTTP 标头后,它起作用了!谢谢
2021-06-07 15:22:49