如果有一项技术可以让网站的访问速度更快、更安全、并且seo权重提升(百度除外),而且程序员不需要改代码就可以全站使用,最重要的是,不需要额外花钱,那有这么好的事情吗?

HTTP通信协议是全球万维网www的基础,是浏览器和网站服务器之间的通信协议,而https是http从1999年发布以来,十六年来的最重要的一次版本升级,这次升级的主要目的就是为了改善浏览器的网页下载速度(Page Load Time)。

耳听为虚眼见为实,以下是测试网站网址:www.proginn.com/robots.txt(默认访问不带https),比较http和https的速度差异,下图来自站长工具的检测:

说起https的历史,就必须要提到SPDY通信协议,随着谷歌的Chrome浏览器占领了庞大的市场,并且在2009-2016年惊醒的大规模网络实验获得了显著的成功,进一步规范了SPDY标准,终于在2015年5月正是发布。目前Chrome、Safari、Firefox、IE等浏览器都已经支持,一些一线大厂网站如Yahoo、Facebook、Google都已经支持https,不知不觉https仿佛就在我们身边。当https正在全面普及的时候,身为一个网站管理员可千万不能别淘汰了。

HTTPS有哪些变动?

https在各种语言基础之下都可以完全兼容,它改进的是底层通信封装操作。Web开发者熟悉的http操作如Get/Post操作、HTTP Status Code和各种HTTP Header都没有改变,完全与http兼容。因此服务器端要使用https,完全不需要修改HTML/CSS/JavaScript网页以及后端程序,只要升级和设定Web服务器软件,加上支持HTTPS的浏览器,就可以使用这个超快的通信协定。

想要知道HTTPS到底有哪些重要的改变,我们先来回顾一下当下网页价值速度的挑战是什么?随着网页内容越来越复杂,造成了要完成一个网页加载(Page Load)的动作,除了要下载HTML之外,还需要下载CSS档案、JavaScript档案、各种图片档案,零零总总加起来需要已经多达上百个对伺服器的Request请求资源,大大影响了网页加载的速度。

据统计,在这一秒钟几十万上下的时代,Amazon的网页加载时间每多一秒,该公司的年度营收就减少16亿美元、Google的搜寻时间每多0.4秒,每天的搜寻次数就会减少8百万网页、KISSmetric分析报告指出等待时间超过4秒,Bounce Rate就会增加25%。人的思绪在等1秒后就开始飘移,如果需要等10秒,就会感觉这东西是不是坏了。

这个问题的最大原因在于,HTTP有一个非常大的缺陷是每个对服务器的Request资源请求,都必须占用一个网路连线(TCP connection),传完一个档案才能再传下一个,浏览器无法同时下载。因此在HTTP时代,浏览器为了加速下载的时间,只好同时允许六个网路连线(TCP connection)并发去连接服务器,好可以达成同时下载六个资源。但是极限也是如此了,并不是说无限制增加网路连线就可以解决这个瓶颈,因为每一次的网路连线,都必须经过三次握手的初始网路连线程序,而且每次初始链接因为流量控制的关系,一开始的网络封包会传输比较慢,后来才逐渐加快。

也因为HTTP的这个限制,当今Web开发者针对网站性能优化时,发展出了各种奇技怪招来加快网页下载速度,稍候我们会提到这些在新的HTTPS技术下,完全是多余的。

那么,HTTPS是如何改良的呢?它采用的方法包括:

1,只需要单一网络连线(Single TCP connection),就可以连接网站服务器,下载所有需要的资源。大大节省HTTP需要一直建立多个网路连线时的启动时间浪费。

2,链接多工(Multiplexing),在单一网路连线上,就可以同时传输多个HTTP Request和Response,并发请求CSS/JS/Images等等资源。它的原理是将Requests/Responses都拆碎成小frames进行传输,而这些frames是可以交错的,因此档案再多也不怕,不会发生占用网络连线(TCP connection)的情况。这就是为什么在图片很多的情况下,HTTPS特别有优势。

3,优先权设计(Prioritization),服务器可以决定例如CSS或JavaScript档案,哪些要优先传送。

4,Header压缩,在HTTP的Headers其实是没有压缩的,大小占了约200 bytes到2KB不等,而且同一浏览器的每个Requests其实绝大部份的Headers都是重复的。HTTPS用了HPACK压缩技术,大大减少每次都要重复传输一样的Headers。

5,Binary二进位的封包结构设计,对服务器和浏览器来说,可以更快的解析这些数据。PS:在HTTP定义了四种解析信息的方式,在HTTPS只需要一种。

6,服务器主动推送资源(Server Push),允许服务器除了HTML之外,连同需要的CSS/JavaScript/Images档案,主动推到浏览器的缓存之中。不过,这个功能比较有争议,一来他需要Web开发者额外描述有哪些档案需要随着HTML一起推送给浏览器,不是Web服务器升级HTTPS就自动会有。二来它不管浏览器是不是已经有缓存这个资源,都会推送而造成频宽浪费。因此综上所述个人认为可以改用浏览器的Prefetch功能,让客户端的浏览器自己处理即可。

透过这些技术,让浏览器的网页下载时间大大降低。而我们网站主需要做的,就是升级Web服务器到支持HTTPS。

对网站开发者会有什么影响吗?

刚才提到Web开发者在HTTP限制下,为了改善网页下载速度发展出了各种招数,其中因为HTTP一个Requests请求,就会占用一个网络连线,所以有很多方法都是想减少Requests的数量,让我们来看看有哪些:

1,合并图片(Image Sprites),为了减少浏览器发送Requests的数量,就把很多小图(例如Icon)合并成一张大图下载,然后透过CSS样式去切出其中一个小图。这一招用起来其实很麻烦,因为每次新增小图或修改,整张大图都要重新产生过。

2,合并CSS和JavaScript档案,也是为了减少浏览器发送Requests的数量。但是开发的时候一定会拆成不同档案才比较好维护,而最后布署到服务器时,需要额外去进行把档案合并的动作。

3,内插CSS、JavaScript或图片,也是为了减少浏览器发送Requests的数量,就把原本应该独立的档案,直接内插到HTML里面。图片会用Base64编码成纯文字后置入。但这招会破坏浏览器缓存机制,本来是可以单独缓存这些静态资源的,内插后反而没有缓存了,而且图片实际大小会变大浪费频宽。

4,Domain切分(Domain Sharding),浏览器针对同一个网址只能开六个网路连线,为了突破这个限制,网站者可能会拆多个子网域,用不同网址来下载图片。另外也因为拆分不同Domain的关系,可以让浏览器的Cookie不会送到这些次要网域,减少一点频宽浪费。

以上这些技巧,都会让网站开发和布署增加不少额外的麻烦,而在HTTPS通信协定下,都已经变得不需要了。

你的网站需要HTTPS

为了能够顺利让浏览器能兼容现存的HTTP网站(使用通信端口Port 80),所以HTTPS选择布署在HTTPS(使用通信端口Port 443)上,因此在安装HTTPS的步骤中,要先拥有TLS/SSL安全性凭证。另一方面,这也是全面推广网站安全的契机,除了有更快速度,同时也要求了更好的网络安全。

使用HTTPS的好处有:

保护浏览器和服务器之间的传输,不会被别人修改。这不一定指恶意的黑客攻击,也可能只是想插入广告。例如有些咖啡店的免费Wifi会在网页上面插入广告。但是如果是HTTPS网站就没办法了。

保护了使用者的隐私安全,不会被人窃听。特别是需要登入的网站,没有HTTPS加密,非常容易就可以被人窃取帐号密码。

Google把HTTPS的网站当作SEO加分

很多新的浏览器功能也开始把HTTPS当作必要条件,例如Geolocation定位、ServiceWorker等等功能

Apple宣布2016年底,所有iOS app的网路连线都必须用加密链接HTTPS,不可以用HTTP了。

综合以上,HTTPS加密可说是当今应用程序网站必备的基本安全需求。

如何安装HTTPS?

第一步:取得TLS/SSL安全性凭证

首先要取得TLS/SSL安全性凭证档案。这个凭证是不能自己签发的,这样浏览器会有警告画面:

之前TLS/SSL安全性凭证一定是向凭证机构购买,这样浏览器才会认得你是合法的凭证(这些浏览器在出厂时就已经设定好要相信哪些凭证机构),例如www.proginn.com是在letsencrypt免费获得证书。为了推广HTTPS,去年由许多大公司以及各大非营利团体共同赞助推出Let’s Encrypt这个服务,免费发布TLS/SSL凭证。详细使用说明可以参考https://letsencrypt.org/,或是用certbot这个工具。不过因为它的使用方式,跟一般我们在凭证机构网站上购买的步骤不太一样,需要在主机上下指令来取得凭证,所以也有人设计了一个在线工具SSL For Free可以在线上就完成凭证申请。

第二步:设定Web服务器

接着设定Web服务器。Apache可以使用mod_https,而Nginx在1.10 stable后就内置支持了。设定SSL的设定档可以参考Mozilla SSL Configuration Generator的建议,其中除了设定你凭证的档案位置之外,还可以让服务器打开HSTS这个HTTP Header,告诉浏览器这个网站只用HTTPS加密链接,不要用HTTP,这样使用者就不会不小心用到HTTP不安全的链接了。但是要注意一旦启用,期限内就没有办法让使用者改回用HTTP,建议可以在最后全站检查没问题后再启用。另外还有一点要注意,就是服务器上的OpenSSL函式库需要升级到1.0.2g,你可以在编译Nginx时特别搭配这个版本,或是干脆使用较新的Ubuntu Linux 16.04服务器操作系统。

如果上述的两个步骤还是太麻烦,或是你没有管理服务器的经验,推荐可以使用CloudFlare这个网站加速服务(CDN),它有免费方案提供TLS/SSL凭证以及HTTPS链接。也就是说你的网站服务器可以什么都不用改,只需要修改DNS让使用者的链接会先经过CloudFlare服务器即可。使用者到CloudFlare的这一段传输,就会是有加密的HTTPS链接。CloudFlare在全球各地都有节点,所以网络速度非常好。

第三步:替换HTTP网址为HTTPS

我们需要将所有HTTP网址都换成HTTPS网址。网页上所有连到自己网站的超链接、图片、JavaScript和CSS等等网址,都必须修改成https://开头。而所有外部系统中你的网址,例如Facebook广告、Google Analytics和其他网站分析追踪工具,都必须把网址改成https://开头。

第四步:最后检查

先检查TLS/SSL安全性凭证安装正确,可以使用SSL Server Test这个在线工具。接着检查HTTPS有启用,使用Chrome浏览器在网址输入chrome://net-internals/#https观察有哪些网站在使用HTTPS,或是你可以安装HTTPS and SPDY Indicator。在线测试工具则可以用HTTPS Test。更多工具可以参考Tools for debugging,testing and using HTTPS。

第五步:全面启用

检查没有问题后,我们可以设定Web服务器只允许HTTPS链接,所有链接到HTTP的情求,全部转址(301 Redirect)到HTTPS链接,并且打开HSTS这个HTTP Header强制使用者浏览器只能用HTTPS链接。

最后的成果就是会有一个绿色的Icon出现在地址栏:

导入的困难点是?

看起来好像很简单,就是设定就可以了,有没有什么困难点呢?个人认为处理TLS/SSL安全性凭证只是小麻烦而已,更何况如果用CloudFlare连申请凭证的步骤都不需要。真正麻烦的地方,恐怕还是从HTTP改成HTTPS的这个过程会比较辛苦。如果你本来就不是全站支持HTTPS通信协议,一旦从HTTP换成HTTPS,就很容易碰到Mixed content混合内容的浏览器警告,意思是说你在加密的HTTPS的网页之中,使用到非加密的HTTP的资源,这个资源可能是JavaScript、CSS、图片或是iframe(不包括超链接)。

如果只是图片和视频用到非加密的HTTP网址,那么浏览器的绿色安全钥匙Icon就会不见:

但如果是CSS或JavaScript的话,那浏览器就根本不加载了,你的网页就会破版无法正常运作。

因此,为了不要让浏览器出现这个警告,让所有平台下的浏览器下都可以正常运作,你得将HTTPS网页中的所有资源,都一一检查将HTTP替换成HTTPS。如果当初是用相对网址就没事,但是如果有用到绝对网址http://开头的,例如直接连接使用其他网站的资源,那改起来可能就会很麻烦费事,而且容易百密一疏。另外,也要提醒一下相关编辑的同行,不然一不小心绿色安全钥匙Icon又不见了。

如果是很多年的老站,这样升级可能是真的改不完,一个过度的方案是使用upgrade-insecure-requests帮忙,透过在Web服务器上设定这个HTTP header,浏览器就会自动将网页上的HTTP资源自动替换成HTTPS网址、站内的超链接也会自动替换成HTTPS。

以上一些HTTPS通信协议的简单介绍,希望有越来越多的网站都开始使用HTTPS,让我们的网络环境更快更安全。

web开发必看:你的网站支持https吗?的更多相关文章

  1. Java编程思想重点笔记(Java开发必看)

    Java编程思想重点笔记(Java开发必看)   Java编程思想,Java学习必读经典,不管是初学者还是大牛都值得一读,这里总结书中的重点知识,这些知识不仅经常出现在各大知名公司的笔试面试过程中,而 ...

  2. vagrant三网详解(团队/个人开发必看) 转

    vagrant三网详解(团队/个人开发必看)   Vagrant 中一共有三种网络配置,下面我们将会详解三种网络配置各自优缺点. 一.端口映射(Forwarded port) 顾名思义是指把宿主计算机 ...

  3. Linux驱动开发必看详解神秘内核(完全转载)

    Linux驱动开发必看详解神秘内核 完全转载-链接:http://blog.chinaunix.net/uid-21356596-id-1827434.html   IT168 技术文档]在开始步入L ...

  4. [转载] PHP开发必看 编程十大好习惯

    适当抽象 但是在抽象的时候,要避免不合理的抽象,有时也可能造成过渡设计,现在只需要一种螺丝刀,但你却把更多类型的螺丝刀都做出来了(而且还是瑞士军刀的样子..): 一致性 团队开发中,可能每个人的编程风 ...

  5. 如何让你的网站支持https

    如何让你的网站支持https 当今世界的主流网站基本都是使用https对外界提供服务,甚至有某些公司建议完全使用https, 那么https是什么呢?请参考如下的图解,https是在我们通常说的tcp ...

  6. 17个Web前端开发工程师必看的国外网站

    Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具,设计博客都是很不错的去处. 1. Smashing Magazine S ...

  7. 【资料目录收藏】.NET开发必看资料53个 经典源码77个

    简单描述:为大家整理了下载中心.net资料,都是比较热的,好评率比较高的,做了一个可收藏的下载目录,希望大家喜欢~ 基于.net构架的留言板项目大全源码 http://down.51cto.com/z ...

  8. .NET开发必看资料53个+经典源码77个

    目录0豆下载:http://down.51cto.com/data/426019 附件预览: 基于.net构架的留言板项目大全源码 http://down.51cto.com/zt/70 ASP.ne ...

  9. 写给Web开发人员看的Nginx介绍

    译者注:不知道其他开发者是否和我一样,参与或者写了很多Web项目,但是却没有真正的去完整的部署应用,很多时候都是交给ops即运维的同学帮忙来做.而作为一个有节操的开发者,我认为了解一些服务器方面的知识 ...

随机推荐

  1. 关闭编辑easyui datagrid table

    var rows = dg.datagrid('getRows');    for (var i = 0; i < rows.length; i++) {        dg.datagrid( ...

  2. SQL Server 常用函数

    1.DATEADD 在向指定日期加上一段时间的基础上,返回新的 datetime 值. 语法 DATEADD ( datepart , number, date ) 参数 datepart 是规定应向 ...

  3. maven相关

    1. 创建/导入maven项目时 eclipse默认jdk版本配置:http://blog.csdn.net/lzj0470/article/details/42292021 2. eclipse 使 ...

  4. Wix安装包权限问题

    Wix在安装完成之后,如果遇到非管理员用户(域用户或Win7+系统,UAC权限问题等),修改配置文件(setting.ini)文件时,会遇到文件权限为只读,无法修改问题: 解决方案有两种: 首先添加U ...

  5. Java 数组初始化与定义的解惑

  6. Android之应用市场排行榜、上架、首发

    文章大纲 一.应用市场排行榜介绍二.应用市场上架介绍三.应用市场首发介绍四.参考文档   一.应用市场排行榜介绍   iiMedia Research(艾媒咨询)权威发布<2017-2018中国 ...

  7. Spring Cloud简介

    一.本文介绍 Web应用由最早的单体应用发展成为集群式的部署,再到现在的分布式系统.尤其是这两年分布式相关的技术发展的很快,一方面是以Dubbo为代表的,另一方面则是以Spring Cloud系列为代 ...

  8. 如何删除GitHub中已经建好的仓库(repository)

    我们有时候可能需要清理 GitHub 中一些不维护的或不需要的项目,此时就要用到delete操作了,很多新手可能不知道如何删除已有仓库,下面将简单介绍下,需要注意的是删除操作不能恢复,一旦执行此操作, ...

  9. sqlmap注入常见用法一条龙 【转】

    sqlmap是一个灰常强大的sql注入检测与辅助工具,但是由于没有图形界面,基本上用起来比较麻烦,导致很多人可能宁愿用havij或者是pangonlin也不愿意麻烦去翻帮助界面,我自己也是把很多语句贴 ...

  10. Python第三方库官网

    Python第三方库官网 https://pypi.python.org/pypi 包下载后的处理: 下载后放到Python的scripts文件夹中(D:\Python3.5\Scripts),用cm ...