為什么從公共 S3 存儲桶加載的圖像在升級到 Chrome 76 后不再顯示？

Question

我正在開發一個從公共 s3 存儲桶加載圖像的 React 應用程序，這幾個月來一直在工作。 今天我升級到 google chrome 76，而不是加載圖像它只是返回一個空白。 在許多機器上都看到了相同的效果。

有趣的是，對圖像的請求返回 200，但沒有顯示圖像。 如果我手動訪問 S3 url 鏈接，圖像是可見的。

我想知道它是否與此論壇帖子和新版 chrome 中引入的新安全措施有關？

這是我們用於圖像請求的內容安全策略的片段

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

我能做些什么來重新加載這些圖像嗎？

Answer 1

我已經找到了這個問題的根源，這似乎是一個 CORB 問題。 在新的 v76 版本中必須稍微更新。

發生的事情是，當我們將圖像上傳到 S3 時，我們沒有在上傳請求中明確設置Content-Type標頭。 S3 然后錯誤地將Content-Type導出為application/x-www-form-urlencoded 。 因此，當我們嘗試獲取圖像並將它們加載到img標簽中時，Chrome 認為這是無效的（可以理解），然后阻止了它們。

有趣的是，到目前為止，圖像一直以錯誤的內容類型加載，並且在我開始上傳新圖像之前沒有顯示任何 CORB 警告。

對開發人員有用的關於 CORB 的文章

Stack Overflow 幫助文章： 如何更改 Amazon S3 對象的內容類型

希望這可以幫助！