基于 Vue.js 的普通 http 网站如何实现帐号、密码的加密传输?__Vue.js
发布于 3 年前 作者 banyungong 1392 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

背景

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

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

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

https 通信流程

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

目前密钥协商的非对称加密算法主要有两种 RSADH 算法,这里以大家熟悉的 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 后台的加密传输过程了。

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 毕小宝 原文链接:https://juejin.im/post/6924072069026021383

回到顶部