Content-Security-Policy 不会在 React 中从外部源加载图像

Question

我在为 React 应用设置内容安全策略 (CSP) 时遇到问题。我在 index.html 文件的 head 元素中使用元标记设置它。

<meta
      http-equiv="Content-Security-Policy"
      content="img-src 'self' https://via.placeholder.com/ data:"
    />

我想从外部源加载图像，并且已将源源添加到元标记，但我无法将图像加载到应用程序中。我已经尝试了 CSP 格式的大量变体，但仍然无法加载图像。我正在使用使用 create-react-app 创建并由 Node 服务器提供服务的应用程序的生产版本。此外，我在 .env 文件中设置了 INLINE_RUNTIME_CHUNK=false 以确保在 index.html 文件中不生成内联 JavaScript。 当应用程序尝试加载图像时，会产生以下错误。

Refused to load the image 'https://via.placeholder.com/150' because it violates the following Content Security Policy directive: "img-src 'self' data:".

据我了解，将 img-src 指令设置为域，在本例中为 https://via.placeholder.com/，应该允许从该域加载图像。 *（通配符）或 https://* 应允许将来自所有外部域或仅 https 域的图像加载到应用程序中。但是，无论我在 img-src 指令中输入什么，它都会继续显示相同的错误消息。此外，我添加了带有和不带有通配符的“数据：”属性（即数据：*），并且收到了相同的错误消息。我还尝试更改 default-src 指令以包含所有源的通配符，如下面的代码所示。

<meta
      http-equiv="Content-Security-Policy"
      content="default-src * 'unsafe-inline'; img-src * data:*"
    />

但是，错误消息仍然不会消失。我从根本上误解了 CSP？还是我需要添加其他内容才能从外部来源加载图像？

Answer 1

消息 ...because it violates the following Content Security Policy directive: "img-src 'self' data:" 表示您实际上拥有 CSP img-src 'self' data:，而不是 img-src 'self' https://via.placeholder.com/ data:。

<meta
  http-equiv="Content-Security-Policy"
  content="default-src * 'unsafe-inline'; img-src * data:*"
/>

不起作用，因为您有第二个（更严格的）CSP via 或 HTTP 标头。我认为第二个 CSP 是由Helmet middleware 的helmet.contentSecurityPolicy(options) 发布的。在 2 个 CSP 的情况下，仅允许同时通过两个 CSP 的源。

检查 HTML 代码是否存在第二个 <meta http-equiv="Content-Security-Policy" ...> 标记。
并在开发工具中检查您是否使用 HTTP 标头 here is tutorial 交付 CSP。

顺便说一句，data:* 是非网络方案的错误语法。仅使用诸如data:、blob:、filesystem: 之类的 sheme 源。对于网络方案，您可以同时使用 https://* 或 https:，但它们的作用略有不同，因为第一个是 <host-source>，第二个是 <scheme-source>。