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 会下载文件两次。


相关文章
|
2月前
|
Ubuntu Linux Shell
(已解决)Linux环境—bash: wget: command not found; Docker pull报错Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled
(已成功解决)Linux环境报错—bash: wget: command not found;常见Linux发行版本,Linux中yum、rpm、apt-get、wget的区别;Docker pull报错Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled
461 68
(已解决)Linux环境—bash: wget: command not found; Docker pull报错Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled
|
3月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
97 3
|
4天前
|
缓存 安全 网络安全
代理协议解析:如何根据需求选择HTTP、HTTPS或SOCKS5?
本文详细介绍了HTTP、HTTPS和SOCKS5三种代理协议的特点、优缺点以及适用场景。通过对比和分析,可以根据具体需求选择最合适的代理协议。希望本文能帮助您更好地理解和应用代理协议,提高网络应用的安全性和性能。
31 17
|
14天前
|
网络协议 安全 网络安全
Introduction to the HTTP and HTTPS Protocol
HTTP protocol is the foundation of the Internet, and HTTPS is the secure version of HTTP. HTTP is an application layer protocol based on TCP/IP protocol. It does not involve packet (packet) transmission, mainly specifying the communication format between the client and the server, and the default po
62 25
|
1月前
|
安全 搜索推荐 网络安全
HTTPS与HTTP:区别及安全性对比
HTTP和HTTPS是现代网络通信中的两种重要协议。HTTP为明文传输,简单但不安全;HTTPS基于HTTP并通过SSL/TLS加密,确保数据安全性和完整性,防止劫持和篡改。HTTPS还提供身份验证,保护用户隐私并防止中间人攻击。尽管HTTPS有额外的性能开销和配置成本,但在涉及敏感信息的场景中,如在线支付和用户登录,其安全性优势至关重要。搜索引擎也更青睐HTTPS网站,有助于提升SEO排名。综上,HTTPS已成为大多数网站的必然选择,以保障用户数据安全和合规性。
63 1
|
2月前
|
应用服务中间件 Linux 网络安全
nginx安装部署ssl证书,同时支持http与https方式访问
为了使HTTP服务支持HTTPS访问,需生成并安装SSL证书,并确保Nginx支持SSL模块。首先,在`/usr/local/nginx`目录下生成RSA密钥、证书申请文件及自签名证书。接着,确认Nginx已安装SSL模块,若未安装则重新编译Nginx加入该模块。最后,编辑`nginx.conf`配置文件,启用并配置HTTPS服务器部分,指定证书路径和监听端口(如20000),保存后重启Nginx完成部署。
683 7
|
2月前
|
安全 算法 网络安全
HTTP和HTTPS的区别
本文介绍HTTP与HTTPS的区别、HTTPS链接建立过程及常见加密算法。HTTP为明文传输,易被窃听;HTTPS通过SSL/TLS协议加密,确保数据安全。HTTPS使用端口443,提供认证机制。文中还详细讲解了对称加密(如AES、DES)和非对称加密(如RSA、ECC)算法的特点及应用场景。
|
3月前
|
Web App开发 Linux 应用服务中间件
【DrissionPage】Linux上如何将https改为http
通过上述步骤,可以在Linux上将DrissionPage从HTTPS改为HTTP。关键在于修改DrissionPage配置、代码中的HTTPS设置、URL以及Web服务器配置,确保所有部分都正确使用HTTP协议。通过合理配置和测试,能够确保系统在HTTP环境下稳定运行。
90 1
|
3月前
|
缓存 安全 网络安全
HTTP/2与HTTPS在Web加速中的应用
HTTP/2与HTTPS在Web加速中的应用
116 11
|
3月前
|
前端开发 JavaScript 数据库
https页面加载http资源的解决方法
https页面加载http资源的解决方法
93 5