踩坑:谷歌Chrome浏览器默认https加载导致图片不显示&如何解决

TL;DR

自Chrome83版本开始,Chrome浏览器默认阻止混合内容MixContent的下载加载等。(即https网站中的http协议加载的内容)最终导致很多未配置静态资源SSL证书的网站在加载图片等http内容时失败,最终导致图片加载不出来等问题。

网站管理员可以通过安装证书解决问题,用户可以通过允许浏览器加载不安全内容的设置或者更换FireFox等其他浏览器进行暂时性解决。

0x01 定位问题

有师傅私聊我,发现我的博客图片不加载,以为是图床挂了,做了个提醒,感谢师傅的提醒0rz。之后我发现这里的图片确实存在问题,但不是图床问题。

笔者是使用阿里云的OSS做图床,然后绑定了一个二级域名image.v0w.top,都是可以看到的信息。但是之前没有为这个域名和OSS添加SSL证书。

通过比较FireFox和Google Chrome的图片加载结果与博客文章的显示效果,不难发现,这里的图片不显示,不是图床的问题,而是Chrome浏览器的渲染问题。
diff

具体F12看一下控制台信息:
ChromeConsole
发现Chrome的控制台输出了问题原因是:

Mixed Content: The page at 'https://v0w.top/2020/12/20/HTTPsmuggling/#2-1-4-Bad-Chunked-Transmission' was loaded over HTTPS, but requested an insecure element 'http://image.v0w.top/2020/12/httpsmuggling.jpeg'. 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加载的。于是这里Chrome会做一件事:自动将http加载的数据升格成https进行加载,但是我们知道如果没有配置证书,使用https是没法加载图片的。于是出现了Console中一堆的红色报错Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALI,即资源加载失败,证书错误
于是最终导致了图片显示不了的问题。

我去查了一点资料,发现该问题是自Chrome版本81开始对混合内容进行警告,83开始阻止混合内容的加载和下载。个人认为谷歌此举属于好心办坏事了吧,https固然更安全,但是对每个资源站都配置SSL证书也是费钱费力啊==、
详细看参考以下内容:

总之,自Chrome83版本开始,Chrome浏览器默认阻止混合内容MixContent的下载加载等。(即https网站中的http协议加载的内容)最终导致很多未配置静态资源SSL证书的网站在加载图片等http内容时失败,最终导致图片加载不出来等问题。

0x02 解决问题

浏览器的此举让用户和网站管理员都很头疼。一方面用户可能正在访问的网站内容存在MixedContent加载不了的问题,不知如何解决;二方面,网站管理者可能因为这种配置不当流失很多的流量。

2.1 用户如何解决

用户在遇到一个网站加载不出资源时,如何解决?

  1. 最简单的就是更换浏览器,好在其他浏览器暂时没有增加这个默认阻止MixContent的设置,当用户遇到图片加载不了等问题时,可以选择更换浏览器重新访问。

  2. Chrome会将MixContent认为是不安全内容,同时Chrome在网站设置中默认时屏蔽不安全内容的,最终导致http内容加载失败。用户可以通过更改设置,允许不安全内容,当然这样也有浏览器被攻击的风险。


    此时可以发现图片可以正常加载:

    2.2 网站管理员如何解决

    网站管理员可能还是需要申请和配置服务器的SSL证书解决问题。

下面带来阿里云OSS证书申请签发配置。
流程如下:
1、在阿里云申请签发SSL证书
workflow
由于我是准备用给图床的域名即image.v0w.top申请签发一个证书,且没有其他用处,可以选择单域名的DV证书即可,是免费的。
buy for free
其他的依照提示进行即可,自动签发,签发过程很快,个人体验是大概五到十分钟,签发完成。

签发完成之后,我们选择后面的其他,会下载一个压缩包,其中包含两个文件*.pem*.key,分别是SSL证书的公钥和私钥。

2、在OSS配置证书
接着就是在OSS配置证书,到OSS控制台:
选择图床的bucket,传输管理->证书托管

复制后把pem文本粘贴到公钥,key文本粘贴进私钥。上传即可。

大概需要15分钟生效,别忘记之后进行测试。
test

博客的资源也加载成功了

文章作者: V0WKeep3r
文章链接: http://v0w.top/2020/12/29/Chrome-MixedContent/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 V0W's Blog
支付宝打赏
微信打赏