【HTTPS、HTTP】网易新闻首页https跨协议调用http的问题

今天在上班的时候，朋友忽然给我发消息让看下网易新闻的首页，于是我打开百度，输入“网易新闻”，然后点开了百度推荐的第一条：

网页排版是乱的，这种问题一看就是CSS文件没加载出来。

朋友：你说，这是网络原因还是他们（网易）网站出问题了？

我：一般出现这种情况，要么是本地浏览器缺少加载CSS的插件，要么就是网站有问题。本机访问新浪新闻正常显示，说明我浏览器没有问题。

朋友“查看源代码能找到CSS文件啊。

我：能找到CSS文件但是不一定CSS文件被正确加载了。

以为是朋友在网易新闻的首页上加了脚本导致显示出错，于是就建议他先进行版本回退，然后去排查添加的脚本。结果朋友说是他在看新闻的时候发现的问题。

朋友：只有首页的错乱，点别的打开都是正常的。网页上有不安全的脚本，浏览器阻止加载。。想不到这么大的网站，还存在未被验证的脚本。地址输入栏，右边那个警告，点加载就行了。。。。

我按照朋友的说法操作后，首页果然正常加载：

朋友：为啥子浏览器会阻止哎？

朋友的这个问题引发了我的重视，我注意到浏览器地址栏的头是HTTPS，于是警觉：看来问题就出在这个HTTPS协议头上。

直接在浏览器地址栏输入http://news.163.com网页正常访问，但是从百度推荐里面点进去排版错乱。不知道大家有没有仔细查看我开始给出的百度推荐点进去的浏览器地址栏：https://news.163.com

再加上，异常页面的报错信息：This request has been blocked; the content must be served over HTTPS。最终问题得到准确定位。

好嘛，果然是HTTPS的问题。

总结一下：

问题描述：
网易新闻门户里面的CSS和JS等资源是基于http协议的，我们手动以http协议头去访问没有问题。但是百度推荐里面给出的默认访问地址是以HTTPS协议头去访问，当我们点进去的时候，服务器接收到HTTPS的请求，但是页面上的资源是基于http协议的，所以这些CSS和JS等资源就不能被正常加载，导致我们看到排版错乱。

问题原因：
HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。这是因为浏览器为了安全，HTTPS下不能跨协议直接调用http。

问题解决：
参照https://segmentfault.com/q/1010000005872734得到一种最简单的解决办法：对于同时支持HTTPS和HTTP的资源，引用的时候要把引用资源的URL里的协议头去掉，浏览器会自动根据当前是HTTPS还是HTTP来给资源URL补上协议头的，可以达到无缝切换。

好的，接下来，在浏览器中输入news.163.com，网页正常访问。

但是在实际的生产应用中，问题往往不会这么简单，那么如何进行跨协议调用呢，请参看我接下来的文章。

【HTTPS、HTTP】网易新闻首页https跨协议调用http的问题相关推荐

iOS 网易新闻首页进化版Demo(MXSegmentedPager),自带平行头部拉伸
网易新闻首页类似的界面简直太常见了,需求不同自然做出来的效果不同了,之前用ScrollView写过一个控制器的封装,但是这里根本没有考虑到控制器的复用以及预加载机制,如果没考虑复用的话当界面爆炸的时候 ...
android 仿网易标题栏,仿网易新闻可滑动标题栏TabLayout(文字或图标)
近期有需要,要做一个类似于网易新闻首页中的可滑动标题栏 TabLayout,根据大神写的 FlycoTabLayout 改造了一下,可以加载网络图片,主要实现内容如下: 1. 可配置标题选中效果(下划 ...
【百度】大型网站的HTTPS实践（一）——HTTPS协议和原理
大型网站的HTTPS实践(一)--HTTPS协议和原理原创网络通信/物联网作者:AIOps智能运维时间:2018-11-09 15:07:39 349 0 前言百度于2015年上线了全站 ...
大型网站HTTPS 实践（一）| HTTPS 协议和原理
作者 | 百度HTTPS技术支持团队百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS.本文就着重介绍了 HTTPS 协议涉及到的重要知识点和平时不太容易理解的盲 ...
[转载] 大型网站的 HTTPS 实践（一）—— HTTPS 协议和原理
原文: http://op.baidu.com/2015/04/https-s01a01/ 1 前言百度已经于近日上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS.本文 ...
Android高仿网易新闻客户端之首页
关于实现网易新闻客户端的界面,以前写过很多博客,请参考: Android实现网易新闻客户端效果 Android实现网易新闻客户端侧滑菜单(一) Android实现网易新闻客户端侧滑菜单(二) 今天用V ...
nginx 配置https 并解决重定向后https协议变成了http的问题
nginx 配置https 并解决重定向后https协议变成了http的问题参考文章: (1)nginx 配置https 并解决重定向后https协议变成了http的问题 (2)https://ww ...
【ruoyi若依】启用HTTPS/SSL后，首页重定向出错
前言 ruoyi 4.6.0 Spring Boot Version: 2.3.4.RELEASE nginx 1.5.11 nginx 反向代理项目.参考这里添加了 ForwardedHeader ...
浅谈HTTPS以及Fiddler抓取HTTPS协议
原文浅谈HTTPS以及Fiddler抓取HTTPS协议最近想尝试基于Fiddler的录制功能做一些接口的获取和处理工作,碰到的一个问题就是简单连接Fiddler只能抓取HTTP协议,关键的登录请求 ...

【HTTPS、HTTP】网易新闻首页https跨协议调用http的问题

【HTTPS、HTTP】网易新闻首页https跨协议调用http的问题相关推荐

最新文章

热门文章