如何在HTTPS里调用HTTP资源不出现提示框

什么是HTTPS？

HTTPS（全称：Hypertext Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，所以加密的详细内容就须要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL代表它使用了HTTP，但HTTPS存在不一样于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。这个系统的最初研发由网景公司进行，提供了身份验证与加密通信方法，如今它被普遍用于万维网上安全敏感的通信，例如交易支付方面。

问题描述

浏览器默认是不容许在HTTPS里面引用HTTP资源的，通常都会弹出提示框，用户确认后才会继续加载，用户体验很是差。并且若是在一个HTTPS页面里动态的引入HTTP资源，好比引入一个js文件，会被直接block掉的。Chrome 21以后，在SSL加密页面embed非SSL的Flash会怎样呢？会被默默的屏蔽掉，只留下一句console报告。

解决方案

可使用iframe的方式引入HTTP资源，好比在HTTPS里面播放优酷的视频，咱们能够先在一个HTTP的页面里播放优酷视频，而后将这个页面嵌入到HTTPS页面里就能够了，另一个典型的例子是在HTTPS页面里经过AJAX的方式请求HTTP资源，Chrome是不容许直接AJAX请求HTTP的。若是两个页面的内容均可以控制的话，当前窗口能够iframe窗口进行通讯的。

如何避免在HTTPS里面引用HTTP?

对于同时支持HTTPS和HTTP的资源，引用的时候要把引用资源的URL里的协议头去掉，例如：//www.example.com/scirpt.js，这样至关于相对路径，即浏览器会自动根据当前是HTTPS仍是HTTP来给资源URL补上协议头的，能够达到无缝切换。参考：使用相对Url无缝切换HTTP-HTTPS

总结

若是是站内资源，最好是HTTP和HTTPS各一份，而后再经过相对路径的方式引用，这样就能够完美的解决掉这个问题了，好比Google首页就是2种方式都提供了。对于站外的资源若是不支持HTTPS那就只能用iframe了

来自: BorisHuai前端修炼 > 如何在HTTPS里调用HTTP资源不出现提示框