前端敏感数据加密方案

2022年9月20日 · 阅读需 7 分钟

Torres Li

Maintainer of https://jamesli-dev.github.io/

前言

作为一名前端开发工程师，最近在做一款应用，涉及到了前端的数据加密需要研究下。

数据泄露

插件

现在有很多的插件，类似于 google 插件这种，可以捕获到前端发送的请求数据，所以如果涉及到了用户信息的，还是得对数据进行特殊处理。

中间人攻击

中间人攻击是常见的攻击方式。过程就是中间人通过 DNS 欺骗等手段劫持了客户端与服务端的会话。客户端、服务端之间的信息都会经过中间人，中间人可以获取和转发两者的信息。在 HTTP 下，前端数据加密还是避免不了数据泄露，因为中间人可以伪造密钥。为了避免中间人攻击，一般采用 HTTPS 的形式传输。

加密算法

对称加密

也可称为共享密钥加密。意思就是在加密解密都是公用一个密钥，发送和接收双方均使用这个密钥进行数据的加密和解密。这就要求在加密解密前必须知道密钥，对前端来说，势必需要从后端获取密钥，这样也不是太安全。

对称加密常用的算法有：

AES
3DES

非对称加密

也称为公开密钥加密算法。它需要两个密钥，一个称为公开密钥，也就是常说的公钥，另外一个称为私有密钥，常叫私钥。两者是配对生成的，就像钥匙和锁的关系。

因为加密和解密使用的是两个不用的密钥，所以叫做非对称加密。

优点：算法强度复杂，安全性高
缺点：没有对称算法快

常见的算法主要有：

RSA
Elgamal

散列算法

也成为哈希函数，散列函数。是把数据压缩称为摘要，从而使数据量变小，将数据的格式固定成特定长度的值。一般用于校验数据的完整性，下载文件就可以校验 MD5 来判断下载数据是否完整。

常见的算法主要有：

方案

上面介绍了常见的加密解密算法，下面就需要选择使用哪一种了。

上面也提到了，对称加密由于需要后端返回密钥，反而降低了安全系数，所以是行不通的。
非对称加密，前端用公钥加密，服务端用私钥解密，看起来没什么问题，但是如果到客户端接收数据时，需要服务端用公钥加密，然后客户端用私钥解密。这样的话，不管是客户端还是服务端，都需要生成自己的公钥私钥。
两者结合，第一点中提到了，需要后端返回密钥。

客户端生成一个对称加密的密钥 ①
传输内容通过密钥 ① 进行对称加密传输给服务端
同时要把密钥 ① 利用公钥进行非对称加密给到服务端
服务端通过私钥把对称加密的密钥 ① 解密出来，然后用过改密钥 ① 解密出内容上面是服务端接收，如果是客户算接收的话，就是
响应数据跟对称加密的密钥 ① 进行加密
然后客户端接收到密文，通过客户端的密钥 ① 进行解密

上面三种方案，第二种最简单，但是需要维护两套公钥私钥，公钥变化，就必须通知对方有变化，不够灵活。方案三应该最理想，密钥 ① 更加灵活，而且只需要在客户端维护，也不需要通知服务端，而且如果数据量很大，对称加密又要比非对称快速。

所以最终选用方案三来实现。

实现

实现的话，我们选用 AES 对称加密，RSA 非对称加密，

利用 crypto-js 来进行 AES 加密利用 JSEncrypt RSA 加密

RSA 生成密钥

import JSEncrypt from "jsencrypt";

// 初始化
const keyPair = new JSEncrypt();

const genKeyPair = () => {
  const genKeyPair = {};
  genKeyPair.privateKey = rsaUtil.keyPair.getPrivateKey(); // 生成RSA密钥
  genKeyPair.publicKey = rsaUtil.keyPair.getPublicKey(); // 生成RSA公钥
  return genKeyPair;
};

RSA 公钥加密

/**
 * rsa公钥加密
 * @param {*} content 需要加密内容
 * @param {*} publicKey 服务端的公钥
 * @returns
 */
const encryptByRsa = (content, publicKey) => {
  const newValue = typeof content === 'string' ? content : content.toString();

  keyPair.setPublicKey(publicKey);

  return keyPair.encryptLong(newValue); // 注意：加密类型为string
},

RSA 私钥解密

/**
 * rsa私钥解密
 * @param {*} content 解密的内容
 * @param {*} privateKey 解密私钥
 * @returns
 */
const decryptByRsa = (content, privateKey) => {
  keyPair.setPrivateKey(privateKey);
  return keyPair.decryptLong(content);
};

AES 加密

import CryptoJS from "crypto-js";

/**
 * data 加密内容
 * key AES密钥
 */
const cryptoData = (data, key) => {
  const aesKey = CryptoJS.enc.Utf8.parse(key);
  const newValue = typeof data === "string" ? cipherContent : JSON.stringify(data);

  const encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(newValue), aesKey, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });
  return encrypted.toString();
};

AES 解密

import CryptoJS from "crypto-js";

/**
 * data 解密内容 string
 * key AES密钥
 */
const deCryptoData = (data, key) => {
  const aesKey = CryptoJS.enc.Utf8.parse(key);

  const decrypt = CryptoJS.AES.decrypt(data, aesKey, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });

  const decString = CryptoJS.enc.Utf8.stringify(decrypt).toString();

  return decString instanceof Object ? decString : JSON.parse(decString);
};

总结

上面的内容，主要介绍了针对当前需求，需要对信息加密及解密，保护客户的隐私数据，虽然会有一点点的性能损失，但是数据安全更重要吧，也为了给破解的人增加一些攻击难度。

前言​

数据泄露​

插件​

中间人攻击​

加密算法​

对称加密​

非对称加密​

散列算法​

方案​

实现​

RSA 生成密钥​

RSA 公钥加密​

RSA 私钥解密​

AES 加密​

AES 解密​

总结​

前言