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> 。