https 页面中引入 http 资源的解决方式

简介: https 页面中引入 http 资源的解决方式

相对协议

应用场景

浏览器默认是不允许在 https 里面引用 http 资源的,一般都会弹出提示框。

用户确认后才会继续加载,用户体验非常差。

而且如果在一个 https 页面里动态的引入 http 资源,比如引入一个 js 文件,会被直接 block 掉的。Chrome v21 之后,在 SSL 加密页面 embed 非 SSL 的 Flash 资源也会被默默的屏蔽掉,只留下一句 console 报告。

解决方式

相对协议

如果你的网站同时准备了 https 资源和 http 资源,那么,可以使用相对协议可以帮助你实现当网站引入的都是 http 资源,网站域名更换为 https 后的无缝切换。

具体使用方法为:

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

简而言之,就是将URL的协议(http、https)去掉,只保留//及后面的内容。这样,在使用https的网站中,浏览器会通过https请求URL,否则就通过http发送请求。

附注:如果是浏览本地文件,浏览器通过file://协议发送请求,导致请求失败,因此本地测试最好是搭建一个本地服务器。

HTML5 Boilerplate 使用相对协议请求 Google CDN 中的 jQuery ,使用方式为:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

上面的例子中除了引用 Google CDN 中的文件外,还添加了一个本地 jQuery 链接,以便连接 Google CDN 失败后,使用本地副本。代码判断过程为:

  1. 首先检查 jquery 对象是否存在,如果存在,证明 Google CDN 运行正常;
  2. 如果不存在,则说明连接 Google CDN 失败,引入本地 jQuery 库。

在国内相对特殊的网络环境中,Google CDN 请求缓慢甚至失败常有,因此不推荐引用 Google CDN 托管的各种库。即便有备用链接,浏览器还是会多次尝试请求 Google CDN 中的文件,这个过程可谓漫长,严重影响页面载入速度。

使用 iframe

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

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

<div class="video_content">
    <iframe height=148 width=220 src="http://player.youku.com/embed/XMTU4MTY4OTg5Mg==" frameborder=0 allowfullscreen></iframe>
</div>

其他用法

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

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

附注:<link>或@import引入样式表时使用相对协议,IE7、IE8 会下载文件两次。


相关文章
|
3天前
|
安全 Go
解决https页面加载http资源报错
请注意,混合内容可能导致安全性问题,因此在使用上述方法时要小心。最好的方式是尽量减少或完全消除混合内容,以确保页面的安全性。
5 0
|
8天前
|
网络协议 网络安全 数据安全/隐私保护
http和https的区别!
http和https的区别!
|
11天前
|
网络协议 安全 API
Android网络和数据交互: 什么是HTTP和HTTPS?在Android中如何进行网络请求?
HTTP和HTTPS是网络数据传输协议,HTTP基于TCP/IP,简单快速,HTTPS则是加密的HTTP,确保数据安全。在Android中,过去常用HttpURLConnection和HttpClient,但HttpClient自Android 6.0起被移除。现在推荐使用支持TLS、流式上传下载、超时配置等特性的HttpsURLConnection进行网络请求。
10 0
|
14天前
|
缓存 安全 网络协议
【面试必备】HTTP和HTTPS是什么?有什么差异?
HTTP(超文本传输协议)和HTTPS(超文本传输安全协议)是用于在互联网上传输数据的协议。它们都是应用层协议,建立在TCP/IP协议栈之上,用于客户端(如浏览器)和服务器之间的通信。
21 2
|
30天前
|
前端开发 应用服务中间件 网络安全
http转为https,ssl证书安装及nginx配置
http转为https,ssl证书安装及nginx配置
49 1
|
30天前
|
安全 数据安全/隐私保护
深入解析:HTTP和HTTPS的三次握手与四次挥手
在这些握手和挥手过程中,双方交换信息,协商参数,建立或关闭连接,以保证数据的可靠传输。HTTPS在此基础上加入了数字证书验证和加密通信,增加了安全性。这些步骤确保了HTTP和HTTPS协议的通信过程的稳定和安全。
116 0
|
17天前
|
Java
java原生发送http请求
java原生发送http请求
|
25天前
|
网络协议 Linux iOS开发
推荐:实现RTSP/RTMP/HLS/HTTP协议的轻量级流媒体框架,支持大并发连接请求
推荐:实现RTSP/RTMP/HLS/HTTP协议的轻量级流媒体框架,支持大并发连接请求
56 1
|
1月前
|
编解码 测试技术 索引
性能工具之 Jmeter 使用 HTTP 请求编写 HLS 脚本
在我们简要介绍了 HLS 协议的基础知识,接下来我们详细介绍一种使用 Jmeter 编写压测 HLS 协议脚本的方法。
73 1
性能工具之 Jmeter 使用 HTTP 请求编写 HLS 脚本
|
7天前
|
安全 Java 网络安全
Servlet 教程 之 Servlet 客户端 HTTP 请求 2
Servlet教程介绍了如何在Servlet中处理HTTP请求,包括获取Cookie、头信息、参数、Session等。方法如:`getCookies()`、`getAttributeNames()`、`getHeaderNames()`、`getParameterNames()`等。还能获取身份验证类型、字符编码、MIME类型、请求方法、远程用户信息、URL路径、安全通道状态以及请求内容长度等。此外,可通过`getSession()`创建或获取Session,并以`Map`形式获取参数。
20 8