chrome強制訪問不安全網頁（Chrome禁止混合內容的解決辦法）

2023-09-22 06:58:24 1

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 進行了解。

,