跳到主要内容

1 篇博文 含有标签「数据加密」

查看所有标签

前端敏感数据加密方案

· 阅读需 5 分钟
Torres Li
Torres Li
Maintainer of https://doc.torli.top/

前言​

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

数据泄露​

插件​

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

中间人攻击​

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

加密算法​

对称加密​

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

对称加密常用的算法有：

  • AES
  • 3DES

非对称加密​

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

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

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

常见的算法主要有：

  • RSA
  • Elgamal

散列算法​

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

常见的算法主要有：

  • MD4
  • MD5
  • SHA

方案​

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

  1. 上面也提到了，对称加密由于需要后端返回密钥，反而降低了安全系数，所以是行不通的。
  2. 非对称加密，前端用公钥加密，服务端用私钥解密，看起来没什么问题，但是如果到客户端接收数据时，需要服务端用公钥加密，然后客户端用私钥解密。这样的话，不管是客户端还是服务端，都需要生成自己的公钥私钥。
  3. 两者结合，第一点中提到了，需要后端返回密钥。
  • 客户端生成一个对称加密的 密钥 ①
  • 传输内容通过 密钥 ① 进行对称加密传输给服务端
  • 同时要把 密钥 ① 利用公钥进行非对称加密给到服务端
  • 服务端通过 私钥 把对称加密的 密钥 ① 解密出来，然后用过改密钥 ① 解密出内容 上面是服务端接收，如果是客户算接收的话，就是
  • 响应数据跟对称加密的 密钥 ① 进行加密
  • 然后客户端接收到密文，通过客户端的 密钥 ① 进行解密

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

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

实现​

实现的话，我们选用 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);
};

总结​

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