在https中引入http资源所致使的问题

前言

最近在周报系统和格子机项目中都出现了在测试服可以正常运行，部署到正式服以后就出现问题，这些问题的缘由就是：通常测试服都没有安全性的需求，因此都是使用http协议。可是正式服如今通常都是使用更加安全的https协议。

问题

问题的关键就是在于这个协议的问题，浏览器默认是不容许在https里面调用http资源的。在这里根据我所遇到的状况大概是这样子的：

1. 在IE浏览器浏览器中使用连接加载资源时会弹出一个对话框：

avatar

2. 在微信的浏览器中引入图片资源时会报一个警告(可是图片会正常加载)：

avatar

3. 在https页面中向http地址发起ajax请求时，浏览器会阻止掉这个请求，而后报一个Mixed Content的错误。
4. 在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掉了）。因此在解决问题的时候并无一个方向，最后是在老大的帮助下才了解到问题的所在的。

而在这一次问题中暴露出了一些问题，好比：

1. 在肯定测试服正常的状况下自我感受正式服应该不会有错，带着这样的心理去找问题就会忽视掉不少的细节问题。
2. 当时只是发现请求没发送出去，却没有去找请求发送失败的缘由。
3. 没有去寻找控制台的报错信息（当时没有发现有错误信息，不知道是用户浏览器的问题仍是本身疏忽了，这个是本次没有找到问题根源的关键所在），只是去关注了Network面板请求发送状况。

第二次是格子机的socket链接失败，这个问题主要是本身在拿到后端给的正式服socket地址时没有检查，没有发现地址的协议是ws的致使在测试时才发现这个问题，在之后拿到后端给的地址时仍是须要检查一下再去使用。

参考资料

• 相对协议URL

做者简介：李成文，芦苇科技web前端开发工程师，擅长网站建设、微信公众号开发、微信小程序开发、小游戏制做、企业微信制做、H5建设，专一于前端框架、交互设计、图像绘制、数据分析等研究。

我的博客：LCW blog

欢迎和咱们一块儿并肩做战： web@talkmoney.cn
访问 www.talkmoney.cn 了解更多

提供深圳微信公众号制做，广东钉钉开发，专业的企业微信外包，高性价比的微信小程序建设，靠谱的小游戏制做，高质量的H5开发