欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码):
https://segmentfault.com/blog...

相信很多前端同学们,都听说过https,现在很多大的站点(如天猫、百度等),均使用了https协议进行传输。但是https如何使用,做什么用的,往往并不十分了解。今天我们就来一起聊一聊HTTPS那些事儿,且不说底层实现(毕竟想深入学习的同学可以自行百度),只来聊一聊我们如何使用这种方式来武装我们的网站~~也谈一谈实际应用时的一些问题。

1. 什么是https

https是http的加密版本,是在http请求的基础上,采用ssl进行加密传输。

咱们平时的http请求是明文传输,也就是说,如果经过电信运营商(电信、移动等,或者方正等),传输过程中,信息是可以被截获的(网站的form表单、html等)。有些运营商甚至会劫持你的网站(稍后详细讲解).那么网页如果进行了加密,在客户端与服务端的传输过程中,咱们的https请求内容即使被截获了,也无法读取其内容,或者加入一些劫持者想要的效果。笔者认为,如果网站有涉及到一些私密信息,或者网站本身的流量比较大,可以产生一些经济价值的话,都尽量使用https进行传输。

2. 做什么用呢?

2.1 加密数据

你的网站如果有登录这种东西的话建议尽量使用https做,这样可以保证用户名、密码不被截获。咱们平时使用的post请求中所带的用户名密码等,非常容易被获取到。这点正如你小时候写小纸条的时候,让同学传递显然不安全,谁知道纸条传到前排同学之前,会不会被老师拦截呢。很多大网站均已采用了https,比如,一号店网站的首页,虽然是http协议的(如图2.1.1),但是登录的页面,使用的却是https协议(如图2.1.2,想必也是为了登录安全性)。


图2.1.1


图2.1.2

2.2 反劫持

劫持这种东西,最典型的例子,应该就是,有的时候手机上浏览网站的时候,会有小圆球提醒你流量已经用了百分之多少了。如果猜的没错的话,应该是移动运营商劫持了网页,并将流量提醒插在这些网页中的。这点也正如,你传了个小纸条给同学,中间说不准就被谁把原话给改掉了。

别以为劫持只是在你的网页里面插一些小广告,既然连广告都插得了,插一些js把你的cookie传到自己服务器上,也不是什么难事儿。亦或者做个钓鱼网页,让用户输入用户名和密码,也是非常容易的。所以,劫持是一件非常恐怖的事情。我们使用了https进行加密的话,则可以在大部分情况下规避这种危害。https加密后,中间商们无法再随意向加过密的html内容中插入的自己的代码了。

2.3 SEO

其实谷歌对于https的网站,搜索结果会给予更高的排名。国内的话,主要还是使用百度搜索引擎,但是百度搜索引擎目前只收录少部分的https网页,目前百度不主动抓取https页面。所以,如果是国内网站需要做seo的话,建议每张网页都提供http/https两种版本的访问方式。或者主页面、需要被抓取的页面使用http方式,而登录等功能采用https方式(就像一号店,或者京东),如我们在百度中搜索京东商城(如图2.3.1),其实点击进入的是京东的http版本(如图2.3.2)。其实,京东是提供https访问的(如图2.3.3),这里怀疑与seo有关。


图2.3.1


图2.3.2


图2.3.3

3. 如何开启https

这里,我们使用nginx来简单的了解一下https的使用方式。

由于我们是在本地实验,所以可以先使用一个本地生成的证书进行实验。

3.1 生成私钥与证书

首先进入一个生成证书的目录下(自己随便建一个就好),你需要执行一下命令(如果接下来,没有权限的话,server.key: Permission denied则加上sodu就好了)

执行下面的命令,并按照提示,输入口令,接下来,凡是提示需要输入口令的地方,都需要输入这个口令:

openssl genrsa -des3 -out server.key 1024
openssl req -new -key server.key -out server.csr
openssl rsa -in server.key -out server.key.out

标记私钥与证书

openssl x509 -req -days 365 -in server.csr -signkey server.key.out -out server.crt

3.2 配置nginx

如下所示,配置nginx,ssl_certificate的路径,写成刚刚生成证书的路径即可,ssl_certificate_key也写为刚刚生成私钥的路径即可,如图3.2.1


图3.2.1

3.3 重启nginx,查看效果

访问https://localhost时,可能会弹出这种警告(如图3.3.1),或者这种警告(如图3.3.2),直接继续就好,这是因为咱们的证书是自己手动生成的。接下来就能看到效果了(如图3.3.3)。


图3.3.1


图3.3.2


图3.3.3

如果想接下来不弹出这种警告,就要在浏览器中安装自己生成的证书了。浏览器安装证书,步骤如下,想了解的同学自行百度一下"chrome导入https证书",把自己的证书crt文件导入即可。使用其他类型的server的同学,可以自己查一下,如何配置server的https服务。还有,需要做线上服务的同学,尽量使用证书机构颁发的证书,(现在有很多免费的证书),这样不会给用户弹出一些奇怪的界面。

4. 网站如何适配?

如果我们想要将自己的网站https化,那么其中的资源肯定是需要均为https协议传输的。否则,如果一个https的网站,使用了http的资源的话,那么这个资源被劫持,整个网站也相当于被劫持了。这就没有意义了。而且,很多http的资源在https的环境下,浏览器甚至都不让其加载。接下来我们就来盘点一下https的网站中引入的资源的一些问题。

4.1 http资源无法加载

在https环境下,http协议的js/css/请求/iframe等资源是根本加载不进来的(如图4.1.1)。


图4.1.1

所以,如果想要使用这些资源的话,需要把访问这些资源的方式,转换为https,稍后会说道如何解决。我们称这种https页面中引用http资源的方式为"mix content"

4.2 图片/视频/音频的特殊性

为什么要单独拿出这些资源说一下呢,在w3c的规范中,这些资源本应该也和其他静态资源一样---https的环境下,引用http的图片是会被阻止掉的。笔者在去年实践的时候,chrome等主流浏览器还是会阻止这些http资源的加载的。也就是说,https的页面引用http的图片的话,图会裂掉。

可是,新版的chrome并没有按照规范去做。而是在https的环境下,依然可以加载并展示http的图片/视频/音频等资源(如图4.2.1)。这是因为,其实很多目前互联网上的很多网站,还是比较混乱的,为了保证整个互联网的用户体验,chrome等浏览器,对于这种加载还是进行了宽容对待。可是,就算是这样,也不代表我们应该再https的页面中加载http的资源,毕竟,这样会失去我们最初https加密的意义,安全的网页上加载了不安全的资源,整个网页还是不安全的。所以笔者建议,即使加载http的图片资源可以展示,还是规范读者们不要这样做。


图4.2.1

4.3 如何解决混合资源加载问题

1 动态判断与协议相对URL

比如京东商城,在访问http://www.jd.com的时候,css是使用http协议加载的,如图4.3.1


图4.3.1

在使用https://www.jd.com的时候,静态资源均变成了相应域名的https地址,如图4.3.2


图4.3.2

笔者更建议的是,如果自己的静态服务器,两种协议均支持(即http://xxx.com/a.jshttps://xxx.com/a.js均可支持访问)的话,则直接在引用资源的时候,去掉协议头,改为相对协议,如//xxx.com/a.js。这样,请求a.js这个资源的时候,浏览器会按照当前页面的协议,进行请求,这叫做-----"协议相对地址"

比如京东商城中的一个js资源(如图4.3.3),写的便是协议相对地址:


图4.3.3

再http的环境下,请求的便是以http为开头的此资源(如图4.3.4)。在https的环境下,请求的便是https为开头的此资源(如图4.3.5)


图4.3.4


图4.3.5

2 自己做个https代理

如果自己的资源服务,不支持https访问的话,我们可以采用代理的方式,来引入这些文件。最简单的方式就是使用nginx,将引入的静态文件均做个代理。也就是说,访问资源的时候,用的是咱们的代理地址,但是拿文件的时候,还是会去http的源地址去拿的。

5. 速度影响

使用https对网站传输进行加密,虽然有很多好处,但是也有弊端,那就是

5.1 加密/解密的过程是需要消耗时间的

毕竟需要对传输的数据进行加密/解密,算法耗时是肯定有的。

5.2 交换公钥/私钥消耗时间

https传输在传输之前是需要再服务端与客户端交换公钥/私钥的,这个过程也是非常耗时的。有统计称https的链接耗时是http的连接耗时的3倍。

5.3 跳转消耗时间

这里还有一个影响速度的点,那就是用户在浏览器中输入网址的时候,是不会去自己输入https协议头的,如果你在浏览器中输入www.jd.com的话,默认浏览器访问的是http://www.jd.com的,如果我们想要用户访问https的网站的话,就要自己进行一次网页重定向,重定向也是比较耗时的操作。这都会对我们的网站速度造成影响。

6. HSTS

在第5节中,我们提到了,如果用户在浏览器端,输入www.jd.com实际上,浏览器会默认将这个网址补全为http://www.jd.com而不是https://www.jd.com。于是乎,我们如果想让用户访问我们的https版本网站,还得将页面强行重定向(跳转)一下。这是一个比较耗时的操作。而且有些时候,还没等我们重定向网页呢,就被运营商给劫持了。于是,接下来也跳不了了。怎么办?能不能在用户输入www.jd.com的时候,直接就访问到https://www.jd.com呢?当然可以,我们需要介绍一下我们的新武器了-------HSTS。

其实hsts的做法比较简单,只要在用户访问网站的时候,响应头中加入Strict-Transport-Security这个头,浏览器接下来的访问就均会默认采用https的方式进行访问了。我们看到天猫在网站中加入了这个头部(如图6.1),我们下次直接输入网址http://www.tmall.com的时候,就可以看到,浏览器提前做了浏览器的内部跳转,如图6.2


图6.1


图6.2

建议使用https的站长们都加上这个头部,即提升了网站速度,又提高了网站的安全性。何乐而不为呢。

7. 课后作业

  1. 本文中没有详细的描述https是如何加密解密的,同学们可以详细的去学习一下

  2. 回想一下自己的网站使用https是否适合呢?又是否已经使用了呢?

接下来的一篇文章,我将会和读者们一起聊聊web前端安全那些事儿,不要走开,请关注我.....

https://segmentfault.com/a/11...

如果喜欢本文请点击下方的推荐哦,你的推荐会变为我继续更文的动力。

以上内容仅代表笔者个人观点,如有意见请通知笔者。

你可能感兴趣的文章

命中水ヽ · 2016年08月08日

深度好文,涨姿势了!给楼主赞一个

回复

木心 · 2016年08月16日

标记私钥与证书的脚本最前面缺少一个o

回复

侯医生 作者 · 2016年08月21日

多谢提醒,已更改

回复

志刚 · 8月15日

就被运营商给劫持了。于是,接下来也跳不了了? 为什么被运营商劫持了就不能跳转了呢?

回复

载入中...
侯医生 侯医生

2k 声望

发布于专栏

前端小站

讲解前端知识的小站,讲解你不知道的前端

471 人关注

系列文章