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 ）：

有意思的是，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 进行了解。