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

Question

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

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

我想从外部源加载图像，并且已将源源添加到元标记，但我无法将图像加载到应用程序中。 我已经尝试了 CSP 格式的大量变体，但我仍然无法加载图像。 我正在使用使用 create-react-app 创建并由 Node 服务器提供服务的应用程序的生产版本。 此外，我在 a.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/ ，应该允许从该域加载图像。 A *（通配符）或 https://* 应允许将来自所有外部域或仅 https 域的图像加载到应用程序中。 但是，无论我在 img-src 指令中输入什么，它都会继续显示相同的错误消息。 此外，我添加了带有和不带有通配符的“数据：”属性（即数据：*），并且收到了相同的错误消息。 我还尝试更改 default-src 指令以包含所有源的通配符，如以下代码所示。

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

但是，错误信息仍然不会 go 消失。 我从根本上误解了 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 header。 我认为第二个 CSP 是由Helmet middleware的helmet.contentSecurityPolicy(options)发布的。 在 2 个 CSP 的情况下，仅允许同时通过两个 CSP 未刮擦的源。

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

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