基于 Vue.js 的普通 http 网站如何实现帐号、密码的加密传输？

背景

现在大部分网站都采用 https 协议来传输数据，客户端和服务端自动通过证书完成密钥协商和数据加密传输的过程。

但是，https 证书一般都是要收费的，因此有些网站开发时还会直接使用 http 协议，这种情况下就需要对敏感数据比如帐号、密码等信息进行加密传输。这个过程其实就是一个 https 协议传输的过程，只是需要网站自己实现加密传输逻辑。

考虑到加密解密的效率问题，可以只对网站的敏感数据加密传输。本文来探讨基于 Vue.js + Java Web 的网站实现敏感数据加密传输的流程及重要逻辑。

https 通信流程

要实现加密传输，需要先了解 https 的通讯流程，其本质就是前后端协商非对称加密公钥和 对称加密私钥对过程，详细可参考这篇：

目前密钥协商的非对称加密算法主要有两种 RSA 和 DH 算法，这里以大家熟悉的 RSA 算法为例来介绍协商流程：

流程说明：

1. 客户端发起 https 请求。
2. 服务器端收到请求后，生成 RSA 密钥对，私钥自己保留，公钥发送给客户端。
3. 客户端随机选用一个字符串，作为数据加密的密钥，并用公钥对该密钥加密，传递给服务器端。
4. 服务器收到加密后的密钥后，使用私钥解密，得到密钥信息。

接下来二者就可以通信了：客户端用密钥对数据加密，服务端用相同密钥进行解密。第 3、4 步就是双方交换密钥的过程，从这个流程可以看出，服务器端的私钥一旦泄露，密钥也就泄露了。为什么服务器端的私钥会有泄露的风险呢？私钥通常是以文件形式存在的，如果文件系统被攻破，私钥泄露，那么数据当然就不安全了。

http 协议加密传输流程

如果网站直接使用 https 证书构建，那么加密过程会自动完成，客户端和网站的所有数据传输都自动走加密传输。如果没有能力使用 https 协议，那么直接按照 https 的握手流程实现密钥协商过程即可。

协商过程使用非对称加密算法 RSA 和 对称加密算法 AES ，它们的作用是：

• RSA 非对称加密：公钥加密是、私钥解密，加密效率低，用来传输 AES 算法的密钥
• AES 对称加密：加密解密共用相同密钥，效率高，用来传输敏感数据

前后台提供一致的加密算法，Java 本身提供了 RSA 和 AES 算法支持，而前端在 package.json 中添加下面依赖即可：

    "crypto-js": "^3.1.9-1", // AES 对称加密算法的实现
    "jsencrypt": "3.0.0-rc.1", // RSA 非对称加密算法的实现。

后台需要提供三部分逻辑：

1. getPublicKeys：获取 RSA 加密公钥的请求
2. handshake：解密前端的 AES 密钥，并存储到全局会话中
3. decrypt：用 handshake 阶段收到的密钥，对有加密数据的请求参数进行解密

整个流程跟第二部分的 https 协议一致：

1. 浏览器发送 getPublicKeys 请求给后台
2. 后台生成一对 RSA 公钥对，并将公钥返回给浏览器；
3. 浏览器随机生成一个 AES 密钥串，并用第 2 步收到的公钥加密后，再发送 handshake 请求给后台
4. 后台用第 2 步留存的私钥解密，的到 AES 私钥，并在此用 AES 私钥对该私钥加密，将加密结果传递给前端；
5. 前端用 AES 密钥对收到的指纹进行解密，将得到的 AES 密钥和第 3 步的密钥对比，如果相同，则未篡改就可以进行通讯，否则提示密钥指纹异常。

总结

在压缩成本的情况下，自己实现 https 协议也并不复杂，在了解 https 协议的流程后，接下来就可以实现 Vue.js + JavaWeb 后台的加密传输过程了。