欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

https网页加载http资源提示加载不安全脚本

程序员文章站 2022-04-24 19:11:29
https是当下的网站的主流趋势,甚至像苹果这样的大公司,则完全要求用户必须使用https地址。 然而对于以前http链接来说,我们往往就存在一个兼容性问题,因为你不可能一下就全部切换过去,应该在很长一段时间内,https与http将共存。 https与http共存的场景有如: 1. app已经发布 ......

 https是当下的网站的主流趋势,甚至像苹果这样的大公司,则完全要求用户必须使用https地址。

 然而对于以前http链接来说,我们往往就存在一个兼容性问题,因为你不可能一下就全部切换过去,应该在很长一段时间内,https与http将共存。

 https与http共存的场景有如:

   1. app已经发布出去,其调用接口的地址为http的,那么这是必须兼容的。

   2. app中嵌入了h5页面,而这页面在以前的设计中是使用http访问的,如果换成https地址,极有可能将导致h5页面无法打开。

   3. 对于流量推广一类的业务,可能原有的http推广地址已经发送给第三方,而且即使你通知到第三方要求改为https,也不排除有http地址的访问。

 针对以上场景,我们肯定是要https与http共存的。

 改https初看起来,其实就是一个域名指向的问题,也许我们只要将http的请求,直接跳转到https地址去,那么也就完成了https的切换。实际并不是这么简单的。

 因为https地址中,如果加载了http资源,浏览器将认为这是不安全的资源,将会默认阻止,这就会给你带来资源不全的问题了,比如:图片显示不了,样式加载不了,JS加载不了。因为样式类,基本上都是写在本地的,所以一般还可以,但是一些公共的js文件,往往就是存在于cdn或者其他服务器上,这时候,如果访问不了,可能就导致了业务就完全操作不了。比如:jquery效法加载失败,可能所有的操作、请求都将无效了。

 将http请求直接跳转至https请求,是一种解决办法,而且很多公司都是这么干的,比如百度什么的,但是前提是,你所有的服务都已切换https完成。

 但是对于,要兼容https、http两种协议的情况,怎样才能做到呢?

 1. 最笨的方法,直接复制原有代码,写成两套代码,一套为http使用,一套为https使用,http和https各自指向各自服务。

 2. 可用的方法,用同一套代码,在后台请求标识好协议,将该变量传到html页面中,进行协议替换,如:后台变量,$protocol = 'https://';  前台接收变量src='{$protocol}res.aa.com/jquery.js'。

 3. h5方法,使用js自己加载协议情况,如在body onload='aa()', 在aa() 方法中,将资源按照需求加载进来即可。<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

 4. 推荐方法,不指定具体协议,使用资源协议自适配,比如,当前为https页面,那么就是https资源,如果是http页面,那么就是http资源。具体方法超简单:<script src='//www.aa.com/jquery.js'></script>

 5.含有超链接的需要换成<a onclick=window.open('http://jxipt.365960.cn/') style='cursor:pointer'>信息地址</a>

使用 iframe

使用 iframe 的方式引入 http 资源,比如在 https 里面播放优酷的视频,我们可以先在一个 http 的页面里播放优酷视频,然后将这个页面嵌入到 https 页面里就可以了。

另外一个典型的例子是在 https 页面里通过 Ajax 的方式请求 http 资源,Chrome 是不允许直接 Ajax 请求 http 的。如果两个页面的内容都可以控制的话,当前窗口可以 iframe 窗口进行通信。

其他用法

<img src="//domain.com/img/logo.png">

这个小技巧同样适用于 CSS : 

.omg { background: url(//websbestgifs.net/kittyonadolphin.gif); }