一、前言

本文适合对 HTTP 传输原理有一定了解，并有意进一步了解 HTTPS 传输原理的人。

关于 HTTP 原理的了解，建议阮一峰老师的文章 HTTP 协议入门

二、HTTP 和 HTTPS

HTTPS 不是一个新鲜的协议，它仍然是基于 HTTP 协议，可以把 HTTPS 协议看成是穿着防弹衣的 HTTP 协议，协议层对比如下图：

HTTP 和 HTTPS 协议层对比

基于 HTTP 协议的网络传输是明文的，对响应的内容也不加验证，这意味着只要传输内容被黑客截获，黑客就能知道传输内容，甚至能够返回一段修改后的内容给用户。这就是常说的 HTTP 劫持，一些运营商会使用这种手段往用户的网页里注入广告。

连接不安全 WiFi 后被窃取个人信息，以及被一些运营商注入广告是 HTTP 劫持的两种常见场景。所以棍子哥提醒您：不要随意连接使用陌生 WiFi 哦~

HTTP 劫持示意图

三、了解 HTTPS 传输原理前储备知识

讲解 HTTPS 传输原理前，让我们来先了解几个故事轻松一下（已了解对称加密和非对称加密的朋友可以跳过这个段落）。

1. HTTP 的故事

小马读小学的时候就开始给小燕写情书，每次都是把折好的情书交给小明，由小明转交给小燕，最后小燕读到小马的情书。

这其实就是 HTTP 传输原理最简单的描述。小马代表浏览器，小明代表网络传输过程，小燕代表服务器。从这个故事很容易看出，小明可以轻而易举地偷看小马的情书。

2. HTTPS 的故事

很快，小马和小燕读初中了，他们也开始意识到情书可能会被小明偷看，于是小马想了一个办法。小马和小燕私下里协商好一套文字映射表，比如用 A 代表“我”，用 B 代表“爱”，用 C 代表“你”。当小马想在情书里写“我爱你”的时候，小马就写“ABC”，当小燕收到情书后就拿出文字映射表，把“ABC”翻译成“我爱你”。这样，即使小明偷看情书，小明也只知道情书的内容是“ABC”，并不知道真实的内容。

这就是 HTTPS 的基本原理，但过程会稍微复杂一点，接下来我们再了解几个概念做知识储备。

两种加密算法

对称加密

加密和解密使用同样秘钥的加密算法称之为对称加密。像上述小马和小燕之间使用同样的文字映射表进行的加密方式就属于对称加密。对称加密算法的优点是执行快，缺点是安全性较低，如果秘钥被第三方知道的话就泄密了。

非对称加密（又称为公开秘钥加密）

加密和解密使用不同秘钥的加密算法称之为非对称加密。非对称加密有两个秘钥——公开秘钥和私有秘钥（下文简称公钥和私钥），公钥用来加密，私钥用来解密，以公钥加密的内容只能使用私钥解密。这样的话，私钥只会让自己知道，公钥的话可以让任何人知道，保证了安全。但非对称加密的的缺点是执行慢。

非对称加密的原理异常复杂，非三言两语能够解释清楚，这里大家只需要知道公钥加密只有私钥能够解密就足够了。如果有求知欲特别强的朋友硬要了解非对称加密的原理，棍子哥个建议阅读阮一峰老师的 RSA 算法原理

四、HTTPS 传输原理详解

时序图真的是个好东西，让我们先以时序图的方式瞧一瞧 HTTPS 的整体流程，然后再一一做解释：

如果你能完全看懂时序图，那么恭喜你，可以不用浪费时间往下看了，如果你对时序图心存疑问，那么我们就来一一了解时序图中的每一个步骤。

图3-1 HTTPS 传输时序图

细心的朋友可能会问：服务器的公钥、私钥从何而来？浏览器如何校验公钥的正确性？如果你有这样的疑问，说明你对 HTTP 的传输过程还是很了解的。

1. 浏览器获取公钥

对应如图的红框①区域，浏览器在整个通信的最开始会请求服务器的公钥（其实是证书，下文会说明），这里的公钥就是我们常说的 SSL 证书的一部分了。关于 SSL 证书，一般是由专门机构（CA 机构）颁发，其实也就是颁发几个文件，其中有包含私钥信息的文件和包含公钥信息的文件，私钥文件一直秘密地保存在服务器，不会公布出去，公钥文件会在这次请求中下发给浏览器。

公钥文件除了包含有公钥信息外，还有其他信息比如域名、颁发机构、有效期等等。具体大家在 Chrome 上点击任意带有绿色锁图标的网站的绿色锁图标，然后展开细节查看。

谷歌 SSL 证书示例

2. 校验证书

对应图 3-1 的绿色框区域②。图中为了简单易懂，说服务器返回的是公钥，这并不准确，服务器其实是返回了包含公钥的证书。每一个证书都包含域名信息，操作系统也维护了一个可信的证书列表。当浏览器获得服务器返回的证书后，提取证书里的域名、办法机构等信息，然后根据本地的可信证书列表判断该证书是否可信，然后才提取证书里的公钥并接着和服务器通信，否则给出警告。以 Chrome 为例，当证书不可信时，Chrome 会提示如下图所示的界面，并且在地址栏显示红色的不安全警告，当用户点击“高级 - 继续前往 xxx （不安全）”后才可以打开该网页。

不被信任的 HTTPS 网页示例

一般来说，高质量的 SSL 证书需要购买，而且价格不菲。如果对站点的要求没有那么高，也可以在一些网站上申请免费证书，比如SSL证书选购 - 腾讯云、SSL For Free。

3. 交换临时传输公钥

对应图 3-1 的蓝色框部分③。当浏览器信任证书并提取证书里的公钥后，会随机再生成一条临时公钥。然后浏览器用证书的公钥加密临时公钥并发送给服务器，服务器收到后用证书里私钥解密内容得到临时公钥。这这里开始进入第④步后，浏览器和服务器都知道了临时公钥的值，之后的通信，浏览器和服务器都将使用该临时公钥对传出内容进行对称加解密。

临时公钥的用途是为了加解密之后真正的传输内容，它在每次 HTTPS 的传输过程都不同，而证书里的公钥是始终保持不变的（除非更换了证书）。

4. 内容传输

对应图 3-1 的黄色框部分④。以上三步其实都处于握手阶段，到这一步 HTTPS 才真正进入内容传输阶段。这之前，浏览器和服务器已经通过非对称加密的方式交换了一个临时公钥，保证没有第三方知道这个临时公钥，之后进行内容传输的时候浏览器和服务器双方都将使用该临时公钥对称加密。之所以到传输阶段选择使用对称加密的方式是因为对称加密的方式执行快。

这就是 HTTPS 的基本原理啦，如果对您有帮助的话请动动手指转发给更多有需要的人。如果有说错的地方，还请评论留言，大家一起改进。

---

下期预告：webpack 实战教程