由於 React 應用程序中的內容安全策略，圖像未加載

Question

我正在嘗試在從 NodeJS/Express 后端提供的 React 應用程序中加載頭像圖像。

我的內容安全策略設置為：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' s.gravatar.com; style-src 'self'; connect-src 'self'; ">

為了能夠訪問 gravatar 圖像。

但是，當我在生產模式下運行 React 應用程序時，我在控制台中收到以下錯誤：

Refused to load the image 'https://s.gravatar.com/avatar/a57b7e3be28e9bf9b245a409b4666ee3?s=200&r=pg&d=mm' because it violates the following Content Security Policy directive: "img-src 'self' data:".

在頁面上查看源代碼清楚地表明我的 img-src 策略設置正確：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' s.gravatar.com; style-src 'self'; connect-src 'self'; ">

我在 Chrome 和 Firefox 中都試過這個，我收到了同樣的問題，圖像被阻止。

請讓我知道我可能做錯了什么。

Answer 1

我意識到我的錯誤！ 我在 NodeJS 后端使用了helmet ，它覆蓋了前端指定的 CSP。

我不認為它會對前端產生影響，但似乎它優先。

希望這可以節省其他人的調查時間。