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

简介: https://segmentfault.com/a/1190000004200361而且如果在一个 https 页面里动态的引入 http 资源,比如引入一个 js 文件,会被直接 block 掉的。

https://segmentfault.com/a/1190000004200361

而且如果在一个 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 失败后,使用本地副本。代码判断过程为:
首先检查 jquery 对象是否存在,如果存在,证明 Google CDN 运行正常;

如果不存在,则说明连接 Google CDN 失败,引入本地 jQuery 库。

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

使用 iframe

使用 iframe 的方式引入 http 资源,比如在 https 里面播放优酷的视频,我们可以先在一个 http 的页面里播放优酷视频,然后将这个页面嵌入到 https 页面里就可以了。
另外一个典型的例子是在 https 页面里通过 Ajax 的方式请求 http 资源,Chrome 是不允许直接 Ajax 请求 http 的。如果两个页面的内容都可以控制的话,当前窗口可以 iframe 窗口进行通信。
其他用法
这个小技巧同样适用于 CSS :
.omg { background: url(//websbestgifs.net/kittyonadolphin.gif); }

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

相关文章
|
3天前
|
网络协议 应用服务中间件 nginx
nginx 302 301 设置 url 转跳 nginx 资源重定向 nginx tcp 和 http 转发
nginx 代理后端网站,和 网站资源目录重定向到其他连接地址
39 3
|
4天前
|
缓存 安全 算法
网络原理 HTTP _ HTTPS
网络原理 HTTP _ HTTPS
10 0
|
12天前
|
安全 网络协议 算法
【计算机网络】http协议的原理与应用,https是如何保证安全传输的
【计算机网络】http协议的原理与应用,https是如何保证安全传输的
|
13天前
|
网络协议 安全 算法
HTTP协议与HTTPS协议
HTTP协议与HTTPS协议
|
13天前
|
数据采集 缓存 网络协议
静态代理IP是否支持HTTP和HTTPS?
静态代理IP支持HTTP、HTTPS、FTP、Socks5等协议,HTTP协议因其简单、灵活而常用,通常比HTTPS速度快,因无需加密处理。HTTP代理比SOCKS5代理通常更快,因为HTTP专注于HTTP请求,而SOCKS5处理多种网络流量。静态HTTP代理适合浏览器和爬虫,SOCKS5代理支持更多协议,如TCP、UDP。选择取决于应用场景和需求。
|
14天前
|
网络协议 安全
【专栏】`curl`是广泛用于网络编程和自动化脚本的命令行工具,支持HTTP、HTTPS等协议
【4月更文挑战第28天】`curl`是广泛用于网络编程和自动化脚本的命令行工具,支持HTTP、HTTPS等协议。在处理大文件或慢速服务器时,设置超时参数至关重要。本文介绍了`curl`的超时参数,如`-m`(最大操作时间)、`-c`(连接超时)、`--dns-timeout`(DNS解析超时)和`-t`(时间条件)。通过示例展示了如何设置这些超时,并提到了一些高级技巧和注意事项,如错误处理和带宽限制。合理设置超时能提高效率和可靠性,对编写健壮的自动化脚本非常有用。
|
18天前
|
安全 Go
解决https页面加载http资源报错
请注意,混合内容可能导致安全性问题,因此在使用上述方法时要小心。最好的方式是尽量减少或完全消除混合内容,以确保页面的安全性。
22 0
|
2月前
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
181 0
|
6天前
|
存储 算法 安全
[计算机网络]---Https协议
[计算机网络]---Https协议
|
23天前
|
安全 网络安全 数据安全/隐私保护
HTTPS协议
HTTPS协议
22 0