用 // 代替 http:// 有什么好处(自适应https)

2019-01-14 13:07:20 来源:互联网作者:佚名 人气: 次阅读 739 条评论

随着国内运营商等的大肆劫持导致大家在访问网站的时候插入大量的低俗广告,降低用户体验,所以各大搜索引擎都希望大家尽量将站点转换为https方式...

  //缺省协议

  /缺省协议的使用,代表资源访问的协议和当前页面保持一致,如果当前页面是http ,采用http协议访问,如果是https,则使用 https 协议访问。这样用就不管是http还是升级到https都不用改动代码,现在很多CDN资源都是这样引用。一般使用在内链中,外链的协议头具有不确定性的原因。

  //的含义?

  //是缺省协议的写法,例如

  //baiid.net/css/

  缺省协议默认使用当前协议

  当前页面为HTTP时,等效

  http://baiid.net/css/

  当前页面为HTTPS时,等效

  https://baiid.net/css/

  使用 // 代替 http:// 的条件和好处?

  当前页面和目标资源同时支持HTTP和HTTPS正在从http升级到https

  这样的好处就是能根据用户打开页面的方式自适应的选择资源的请求协议,

  对于https页面的内容,浏览器默认会组织非https内容,可以避免这种情况

  // 缺点

  直接打开本地文件调试时,使用的协议是文件协议(file://)

  这个时候这个协议会变成 file://baiid.net/css/显然是不存在的

  与当前网站的协议保持一致,快速发布与你当前协议相匹配的版本,同时减少SSL或其它协议版本的部署成本。开发者不需要管服务器云端提供什么协议,只要用//符号来代表一切最适应的匹配,这和nodeJS的思维是一脉相承的。

  优点如下:

  因为很多网站都将http升级为https,这样就可以防止我们的网址被劫持,前期为了在转换过程中我出差错我们没有强制跳转,就是当用户访问http或https都可以正常访问,那么里面的js,图片,链接等都不能用https或http,那么有什么解决方法呢,那么解决方法来了就是用//,不要带http:与https这样就可以了。

  //这种写法是根据你请求的协议自动添加协议的。举个栗子:你的网站是http协议,那么其实你访问的就是http://xxxx 如果你的网站是https协议的,那么请求的地址会变成https://xxxx 要知道,如果你写成了http://xxx. 那么如果你们的网站线上是https,那么可能会报安全警告,有的浏览器甚至没法正常加载页面。如果你直接写成https,要知道,本地开发可是http啊...

  下面的内容是来自知乎的一些经典回复

  好处很多人都答过了。升级 https 当然最能感受到这种好处。我只是补充一个为什么前人不这么写的理由。当然,确实有很多前端并不知道这种写法。不过,就算知道也很可能无法这么写。因为 UC 浏览器的许多较早版本不支持这种写法,会把 //a.b/ 直接理解为 /a.b/,也就是说,如果你在 http://example.com 的页面里写了 //example-cdn.net/static-file 的地址,UC 实际访问的是 http://example.com/example-cdn.net/static-file 。UC 过去的市占率大家是知道的。所以……

  一看你就没做过「全站 HTTPS 升级改造」。我给全站做 HTTPS 升级的时候,真的想把写 http:// 的人砍死。尤其是数据库里的链接和 JS 里拼接出来的 url。期间用了各种正则,还要人工核查。奈何写 http:// 的程序员太多,只能作罢。有人还在评论里问原因,原因就是如果你全写 //,我就不用改造数据库里的数据和源码了,直接升级 https 就行了。你可能会说 https 改造这种事情很少发生吧,巧了,我在腾讯和阿里都遇到了 https 改造 ಥ_ಥ 而且在阿里的时候我要负责 1688 整站(个别部门自行改造)的前端代码改造(不只是 HTML,还有 CSS 、JS、Velocity 模板等!简直就是脏活累活,我 TM 为什么要接这个活儿),你猜我骂写 http:// 的人骂了多少次?有的前端还直接在 JS 里写 http,沿用一下当前页面的协议你会死啊?

  还有的前端用正则判断 url 时居然只接受 http:// 和 https:// 不接受 //,真的是没常识。太多程序员,太智障了。也有可能是因为他们没听说过 HTTPS 而已。如果你还不懂,我就问你几个问题:如果你用 http:// ,那你就是默认当前页面是 http 协议了,你一个前端凭什么决定当前页面的协议?难道你不知道 http 链接在 https 页面里会报错啊?你应该沿用当前页面的协议,所以你要写 //如果你用 https://,也是一样的问题,你怎么知道三年后会不会出现一个 httpshe://,难道到时候你再全部改成 httpshe:// ?不要做任何明显是错误的假设!你根本就不知道当前页面会用什么协议打开!所以你要用 // 啊!类似的错误假设还有很多,比如很多中国程序员都以为电话号码只含数字和括号,不含字母。真的是这样吗?

  有人说全局替换不就完了吗?举例说明吧,假设淘宝要升级 https于是你将 http:// 全部替换成 //

  第一个 bug:

  你把 替换成了 ,然而当时 http://tmail.com 还不支持 https于是你将一定范围内的域名替换,http://(taobao|taobao2|taobao3).com 替换成 //$1.com

  第二个 bug:

  有些 JS 是这样写的 url = "http://" + location.hostname + '/' + path,还有写 JS 是这样写的 /^http://///.test(input)。你说这个就没法用正则了,在所有 JS 里全局搜索 http 然后人工审查吧。你知道淘宝有多少 JS 文件吗…… 而且这些文件是缓存十年的……就算你改了,也不一定能更新。而且一旦你改错了,影响用户下单,马云损失一个亿你赔得起吗?

  第三个 bug:

  有些数据根本就不在代码里,在数据库里,比如 user.image 的值是 http 开头的。于是你将 user.image 写成 user.image.replace('http://', '//') 或者你直接改数据库里的数据(当数据量很大的时候,这基本是不可能的)

  第四个 bug:你忘了改 nginx、crossdomain 里面的域名第五个 bug:你忘了改配置系统里面的 base_url第六个 bug:你的 https 页面嵌入了一个外部的 http iframe……你就哭吧,这很难解决,运气好直接改成 // (外部支持 https 即可),运气不好就要改页面逻辑了。

  第 N 个 bug……

  HTTPS 升级就是脏活累活,你说简单你来做,你开始做就知道牵连的地方有多少了。最好的方案还是把协议做成很容易变更的方式,比如遵循当前页面,或者用变量,反正写死 http:// 肯定不好。有些程序员写代码的时候,明明知道有 HTTPS 却不去兼容,心理想着「反正我在这个公司呆两年就走了,HTTPS 至少还有三年呢」然后就写出了垃圾代码。

  越来越多的开发者,在链接文件时,采用//来代替http://,即如< a href="http://baiid.net……一般写为 < a href = " //http://baiid.net……,这与传统带http有什么区别?

  原本你的网站是http的,所有的src都是 http开头,以为遭到狗屎运营商大量劫持,在你的页面塞了一大堆少儿不宜/和单纯广告的内容的时候,有人告诉你替换https可以改善这个问题,那么这个时候你就知道 之前的src和ajax写得//而不是http://是当初多么明智的决定。。。

  逐浪CMS官方

  随着越来越多开源和云平台的涌现以及SSL协议的广泛导入(如逐浪CMS已经全面启用了SSL协议支持),人们在进行开发时不得不面对http协议的选择和识别。众所周知,过多的ssl引用,可能会造成普通站点的效率低下,但我们不能为此再去重新设计一个纯SSL版本。表现在开源库上,一般平台都同时提供SSL版和非SSL版。如这两个库:https://code.z01.com/js/jquery-3.2.1.slim.min.js

  http://code.z01.com/js/jquery-3.2.1.slim.min.js

  其引用效果是一致的。于是开发者们直接用"//网址/文件"方法来替代前面的协议,使之自动识别。即具体是SSL协议还是普通http协议,交给浏览器去自动识别并自动与当前站点匹配,从而实现最佳的安全请求和最高效的加载方法。概言之,这是一种开发方法和开发思维,云计算的web与移动开发日益壮大。

您可能感兴趣的文章

相关文章

  • 详解移动端网页设计实现内滚动的四种解决方案

    详解移动端网页设计实现内滚动的四种解决方案

    这篇文章主要介绍了关于移动端实现内滚动的四种解决方案,实现的效果就是在一个区域内只允许部分区域产生滚动的效果,而其余部分则不能移动,需要的朋友可以参考借鉴,下面来一起看看吧。...

  • 网页设计如何优雅的实现垂直居中

    网页设计如何优雅的实现垂直居中

    这篇文章主要给大家介绍了关于如何优雅的实现垂直居中的相关资料,文中分别给大家介绍了已知宽高的元素、未知宽高的元素以及基于 Flexbox 的解决方案,都分别给出了示例代码供大家参考学习,需要的朋友们下面随着小编来一起学习学习吧...

  • 网页设计:浅谈网页基本性能优化规则小结

    网页设计:浅谈网页基本性能优化规则小结

    这篇文章主要介绍了浅谈网页基本性能优化规则小结的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    心得技巧 2019-01-14
  • 用户需求导致营销型网页设计

    用户需求导致营销型网页设计

    我们的每期话题,团队在内部都会通过邮件进行一番讨论,随着讨论的激烈,往往能碰撞出很多有意义的观点,因此,将讨论内容分享出来,有兴趣的朋友可以接着话题讨论下去。Junchen:期望不是从石头里面蹦出来的,所有期望都是受到外界影响、结合自身需求的一个外在表现...

  • 网页设计栅格就是你对页面版式的规划

    网页设计栅格就是你对页面版式的规划

    英文原文:http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm栅格就是你对页面版式的规划你日常所见的许多页面都有栅格存在。你可能注意不到,但它确实存在,并且支撑着设计内容,建立整体的架构,引导着页面的元素。栅格是隐形的架构,用于指导你页面...

    心得技巧 2019-01-14
  • 网页设计内容网页中关于图片预览的设计

    网页设计内容网页中关于图片预览的设计

    之前有写过《内容页页码的预览导航》跟《照片预览导航分析》两个文章,想说明的是预览这一功能在用户心理所占有的比重是很大的,如果仅仅只是给出一排顺序数字做为链接的标题,用户的心理会产生不安全感。虽然给出一排顺序数字做为链接几乎是整个互联网的默认分页链接模...

  • 网页设计:脚本素材重构用户体验

    网页设计:脚本素材重构用户体验

    设计网站的同志背景主要有两种:学计算机、学艺术。基本上会写代码的不懂设计,会设计的不懂代码,这个格局似乎到今天还没变。某些学计算机的同学,有自己的审美品位,也能够做出看起来不错的网站,但学艺术的同学普遍难搞懂代码...

  • Html布局左右宽度固定中间自适应解决方案

    Html布局左右宽度固定中间自适应解决方案

    文章主要介绍了详解左右宽度固定中间自适应html布局解决方案的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 a.使用浮动布局html结构...

  • 利用nginx和腾讯云免费证书制作https的方法

    利用nginx和腾讯云免费证书制作https的方法

    文章主要介绍了利用nginx和腾讯云免费证书制作https的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧之前一直在研究,https怎么弄。最近看到...

  • WPS表格中自适应成绩查询系统

    WPS表格中自适应成绩查询系统

    菜单式成绩查询
    每个学校都会用到成绩查询。常规的查询查询方式是输入待查询对象的相关信息后让系统提取成绩资料。这种方式有两个缺点:
    1.需要录入文字,对于不会打字或者字符录入速度慢者不方便;
    2.如果录入了错别字、...

    WPS教程 2016-06-27 WPS表格