React JS 拒絕加載圖像，因為它違反了以下內容安全策略指令

Question

當我嘗試重新加載我的 React 應用程序網頁時，我遇到了這個問題。 注意：在開發階段，這種事情沒有問題，但是當我將它部署到生產中時，我遇到了這個問題。 謝謝你。

Refused to load the image 'http://104.248.153.121:8080/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

這是一個錯誤圖像日志：錯誤日志拒絕加載圖像

Answer 1

Content-Security-Policy 元標記允許您定義可以從何處加載資源，防止瀏覽器從任何其他位置加載數據，從而降低 XSS 攻擊的風險。 這使得攻擊者更難將惡意代碼注入您的站點。

表示 content="default-src 'self'" 的示例意味着：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

1. 如何允許多個來源？

您可以簡單地在指令后將您的源作為空格分隔的列表列出：

content="default-src 'self' https://example.com/js/"

請注意，除了特殊參數（如“self”）之外，參數周圍沒有引號。 此外，指令后沒有冒號 (:)。 只是指令，然后是空格分隔的參數列表。