Chrome将不再允许HTTPS页面加载HTTP资源

向右看齐 2023-02-16 14:30 4阅读 0赞

今天线上反馈一个问题，第一次踩chrome这个坑，觉得挺有代表性的，于是就记录了一下问题，避免以后踩同样的坑，也希望大家能避免这个问题。

客户在群里反馈说网站里的语音不能播放，登录网站一看所有的语音都能展现，就是没有时长不能播放。于是F12看了一下页面里的语音路径**(注意是http的资源)**，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nla3lfZmVp_size_16_color_FFFFFF_t_70][]

第一感觉怀疑是不是这个语音地址不存在，但是不可能所有的语音都不存在吧？于是就将地址copy出来单独放浏览器里请求，看能不能播放？结果语音能播放，说明地址和文件都没毛病。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nla3lfZmVp_size_16_color_FFFFFF_t_70 1][]

那究竟是哪儿的问题呢？又回到页面看了看语音请求，结果所有的语音请求都变红了，试了几条语音单独放到浏览器里请求，都能播放。这下奇怪了，为啥嵌入到页面里访问不能播放，单独请求能播放？

![20200610224324110.png][]

最后发现了猫腻，嵌入到页面里的语音地址是HTTP链接，而在请求语音资源时变成了HTTPS请求，如下图请求变成了HTTPS了：

![20200610224447772.png][]

于是就将语音请求地址单独放到浏览器里以HTTPS请求，看看能不能正常访问？结果Chrome一直转圈圈。如下图：

![20200610224527570.png][]

于是乎换成火狐浏览器 和 IE浏览器 测试了一下，所有的语音文件都能正常播放，而且不会将页面内的HTTP请求转成HTTPS请求。所以问题找到了，肯定是Chrome搞怪把页面内的HTTP请求转成了HTTPS。于是查阅了一下资料，果然是Chrome搞的怪。

**从官方发布的消息大致意思是：****Chrome计划使 https:// 页面不再加载 HTTP 子资源。从2020 年 1 月，Chrome 80将会在https://页面里的不再加载HTTP 子资源，逐步阻止所有HTTP页面相关的混合内容。Chrome 80及以后更高的版本会将所有https:// 页面里的混合音频和视频HTTP子资源自动升级为HTTPS，如果无法通过 HTTPS 加载，则将自动被阻止。**

我XX，看到这个信息突然想起最开始这个网站就是HTTP请求的域名，后来安全部们那帮家伙要求改成HTTPS的，理由是不安全、不符合规范(我觉得应该是公司有钱了，卖得起私秘钥了^\_^ ^\_^^\_^)。结果域名是换了，网站内的资源出问题了。哎~~~，此时是怪自己对业界信息关注不够，还是怪安全部门考虑问题不全面呢？都有一部分吧。

2020年06月10日 晚 于北京记

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nla3lfZmVp_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200610224159236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nla3lfZmVp,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nla3lfZmVp_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200610224252117.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nla3lfZmVp,size_16,color_FFFFFF,t_70
[20200610224324110.png]: https://img-blog.csdnimg.cn/20200610224324110.png
[20200610224447772.png]: https://img-blog.csdnimg.cn/20200610224447772.png
[20200610224527570.png]: https://img-blog.csdnimg.cn/20200610224527570.png