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 ):
浏览器 | 版本 | 默认设置是否屏蔽不安全内容 | 默认是否显示图片 | 允许不安全内容后 |
---|---|---|---|---|
电脑版 Chrome | 86.0.4240.183 | 屏蔽 | 不显示 | 显示 |
电脑版 Edge | 86.0.622.61 | 屏蔽 | 显示 | 显示 |
手机版 Chrome | 86.0.4240.185 | 无此项设置 | 不显示 | 无此项设置 |
手机版 Edge | 45.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 进行了解。
本文由 掘墓人 创作,采用 CC BY-NC-ND 4.0 DEED
,转载或翻译请注明出处。
最后编辑时间为: 2020年11月8日