[聊一聊系列]聊一聊HTTPS那些事儿

欢迎你们收看聊一聊系列，这一套系列文章，能够帮助前端工程师们了解前端的方方面面（不只仅是代码）：
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.js与https://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...

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

以上内容仅表明笔者我的观点，若有意见请通知笔者。