Chrome禁止混合內容怎麼辦

2023-09-24 17:27:02

Chrome 更新到 84 之後，混合內容會被預設阻止，本文來記錄一下解決辦法。

背景

上週，我的 Chrome 瀏覽器升級到了 86，當時並沒有感覺到什麼異常，直到發現自己的一個網站開啟不顯示圖片了。

我使用手機 Chrome 瀏覽器訪問網站，圖片顯示正常，排除了圖片儲存商的問題，那很有可能就是瀏覽器升級導致的。

排查

檢視控制檯資訊

開啟控制檯，看到了如下的提示資訊：

這裡要簡單介紹一下，我使用的圖片儲存是「LeanCloud」，因為 HTTPS 訪問是收費的，所以就只設定了 HTTP 訪問。

通過控制檯可以看到，瀏覽器載入的是 HTTPS 的圖片連結，訪問不了也是理所當然的。

原因

點開上圖中黃色的提示資訊，提示如下：

Mixed Content: The page at 'https://t.juemuren4449.com/' was loaded over HTTPS, but requested an insecure element 'http://talkfile.juemuren4449.com/2c95e19915d008f20e8a.jpg'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html

上面的意思是說，頁面的地址是通過 HTTPS 載入的，但是裡面有不安全的內容（圖片通過 HTTP 載入，被認為是不安全的），所以圖片的連結自動升級為了 HTTPS 連結。

圖片載入不出來的原因就找到了：Chrome 認為頁面使用了 HTTPS 載入，圖片如果是 HTTP 載入就不安全，會自動給升級為 HTTPS 載入。

解決問題

說實話，對我來說，Chrome 是好心辦壞事了。不過這年頭用 HTTPS 肯定是更安全，所以也不能怪人家 Chrome，但我暫時又不想為 HTTPS 的圖片去付費，原因是這只是給我自己看的一個網站，只能想辦法解決了。

通過我的嘗試，有以下兩種方式可以暫時解決我這個網站圖片不顯示的問題。

訪問 HTTP 網站頁面
允許不安全的內容

HTTP訪問

既然你說我是混合內容，也就是說既有 HTTPS 內容，又有 HTTP 的內容，那我全用 HTTP 訪問總可以了吧。

確實，通過 HTTP 訪問頁面圖片是可以正常顯示的，但是有一個小問題，位址列的左側會顯示「不安全」的標識，強迫症可能覺得有點難受。

允許不安全內容

另一種方式就是允許當前網址訪問「不安全內容」。

訪問 HTTPS 的頁面，點選位址列左側的「鎖」，再點選「網站設定」。

進入到設定頁面之後，滑到最下面，可以看到其中有一個選項是「不安全內容」。

點選後面的選項，修改為「允許」即可。

最後，回到原來的頁面，會提示「重新載入」，點選或者手動重新整理即可。

至此，頁面裡的圖片就可以正常載入了。

需要注意的是，即使允許了不安全內容，在隱私模式下，圖片仍然顯示不出來。

延伸

Edge瀏覽器

解決完圖片顯示問題，本來也就完事了，但突然想到微軟的 Edge 瀏覽器也使用了 Chrome 核心，那在 Edge 瀏覽器下圖片是否能顯示呢？

想到就立馬做了測試，發現 Edge 是可以正常顯示圖片的，又想到手機上的 Chrome 和 Edge 又是怎麼樣呢？索性把所有瀏覽器都升級到最新版本，做了一個表格。

整理後的表格如下（測試網站 https://t.juemuren4449.com ）：

瀏覽器版本預設設定是否遮蔽不安全內容預設是否顯示圖片允許不安全內容後電腦版 Chrome86.0.4240.183遮蔽不顯示顯示電腦版 Edge86.0.622.61遮蔽顯示顯示手機版 Chrome86.0.4240.185無此項設定不顯示無此項設定手機版 Edge45.09.4.5083無此項設定顯示無此項設定

有意思的是，Edge 預設也是遮蔽不安全內容，但是圖片可以正常顯示。

Edge 瀏覽器控制檯提示資訊如下：

Mixed Content: The page at 'https://t.juemuren4449.com/' was loaded over HTTPS, but requested an insecure image 'http://talkfile.juemuren4449.com/2c95e19915d008f20e8a.jpg'. This content should also be served over HTTPS.

手機 Chrome 瀏覽器無法顯示圖片，暫時只能訪問 HTTP 頁面，最開始的測試之所以可以顯示圖片，應該是瀏覽器版本低的原因。

手機版 Edge 瀏覽器可以正常顯示圖片。

Chrome84

通過訪問 Chrome 控制檯資訊裡的網址 https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html ，得知 Chrome 從 84 開始阻止混合內容。

我在虛擬機器裡測試，Windows 下 Chrome 84 到 86 都不能顯示我網站的圖片，84 之前的版本可以正常顯示。

個人建議

以下兩種方式雖然可以臨時解決問題，但多少都有點問題。

訪問 HTTP 網站頁面
允許不安全的內容

所以，更徹底地解決辦法是把網站的內容全部升級到 HTTPS，這樣做也無疑更加安全。

更多關於混合內容的說明，可以訪問 https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html 進行了解。