在https中引入http资源所导致的问题
前言
最近在周报系统和格子机项目中都出现了在测试服能够正常运行,部署到正式服之后就出现问题,这些问题的原因就是:一般测试服都没有安全性的需求,所以都是使用http协议。但是正式服现在一般都是使用更加安全的https协议。
问题
问题的关键就是在于这个协议的问题,浏览器默认是不允许在https里面调用http资源的。在这里根据我所遇到的情况大概是这样子的:
- 在IE浏览器浏览器中使用链接加载资源时会弹出一个对话框:
avatar
- 在微信的浏览器中引入图片资源时会报一个警告(但是图片会正常加载):
avatar
- 在https页面中向http地址发起ajax请求时,浏览器会阻止掉这个请求,然后报一个Mixed Content的错误。
- 在https页面中使用webSocket时需要注意,必须使用
wss
协议才能够发起连接,不然也会报错:
avatar
问题分析
https协议与https协议的区别
在解决这个问题之前首先需要知道https是什么,与http的区别在什么地方。
https安全超文本传输协议:
它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信息,它使用安全套接字层(SSL)进行信息交换,简单来说它是HTTP的安全版。它是由Netscape开发并内置于其浏览器中,用于对数据进行压缩和解压操作,并返回网络上传送回的结果。HTTPS实际上应用了Netscape的安全全套接字层(SSL)作为HTTP应用层的子层。(HTTPS使用端口443,而不是象HTTP那样使用端口80来和TCP/IP进行通信。)SSL使用40 位关键字作为RC4流加密算法,这对于商业信息的加密是合适的。HTTPS和SSL支持使用X.509数字认证,如果需要的话用户可以确认发送者是谁。总的来说,HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全。
在URL前加https://
前缀表明是用SSL加密的,你的电脑与服务器之间收发的信息传输将更加安全。 Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。
https与http的区别:
- https协议需要到ca申请证书,一般免费证书很少,需要交费。
- http是超文本传输协议,信息是明文传输,https 则是具有安全性的ssl加密传输协议。
- http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。
- http的连接很简单,是无状态的。
- HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全。
什么是混合内容(Mixed Content)
很明显上面报的错都是与Mixed Content是有关系的,Mixed Content就是:
当用户访问使用HTTPS的页面时,他们与web服务器之间的连接是使用SSL加密的,从而保护连接不受嗅探器和中间人攻击。
如果HTTPS页面包括由普通明文HTTP连接加密的内容,那么连接只是被部分加密:非加密的内容可以被嗅探者入侵,并且可以被中间人攻击者修改,因此连接不再受到保护。当一个网页出现这种情况时,它被称为混合内容页面。
详情可见:https://developer.mozilla.org/zh-CN/docs/Security/MixedContent
解决方案
相对协议
如果你的网站同时准备了https资源和http资源,那么使用相对协议可以实现根据当前网站的协议,浏览器自行选择通过https还是http发起请求,而相对协议也是非常简单的就是讲URL的协议(http
、https
)去掉。<img src="//domain.com/img/logo.png">
这里一定要注意必须是网站同时有https和http的资源才会有效,否则请求会失败,另外一般在正式服上线时都会刘改HOST地址,所以一般的ajax请求并不会出现问题,主要要注意的是一些单独的请求地址会出现这样的问题,如七牛云上传所使用的地址是单独的,所以有可能在正式服上线时没有注意到,另外就是使用
websocket
时检查一下正式服的socket
地址是否是wss
协议。
总结
这次第一个出现的问题是在周报系统七牛上传文件部分出现的,由于之前周报系统正式服可以通过http访问到,所以没有出现问题,但是最近正式服换成了https,就导致文件无妨上传,当时在碰到问题时感觉比较奇怪,明明测试服是正常的,为什么正式服会不正常,由于没有正式服的账号,所以调试的时候是在别人的电脑上面,当时控制台好像并没有打印报错信息(有可能是自己没有注意到),只是发现了在上传文件时的第二个请求无法发送出去,当时也并没有状态码(这里其实是请求根本就没有发送出去,被浏览器给block掉了)。所以在解决问题的时候并没有一个方向,最后是在老大的帮助下才了解到问题的所在的。
而在这一次问题中暴露出了一些问题,比如:
- 在确定测试服正常的情况下自我感觉正式服应该不会有错,带着这样的心理去找问题就会忽视掉很多的细节问题。
- 当时只是发现请求没发送出去,却没有去找请求发送失败的原因。
- 没有去寻找控制台的报错信息(当时没有发现有错误信息,不知道是用户浏览器的问题还是自己疏忽了,这个是本次没有找到问题根源的关键所在),只是去关注了Network面板请求发送情况。
第二次是格子机的socket连接失败,这个问题主要是自己在拿到后端给的正式服socket地址时没有检查,没有发现地址的协议是ws
的导致在测试时才发现这个问题,在以后拿到后端给的地址时还是需要检查一下再去使用。
参考资料
作者简介:李成文,芦苇科技web前端开发工程师,擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5建设,专注于前端框架、交互设计、图像绘制、数据分析等研究。
个人博客:LCW blog
欢迎和我们一起并肩作战: web@talkmoney.cn
访问 www.talkmoney.cn 了解更多
提供深圳微信公众号制作,广东钉钉开发,专业的企业微信外包,高性价比的微信小程序建设,靠谱的小游戏制作,高质量的H5开发