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