前端加密方案对接实践查询对接第三方团队，获取用户个人信息的接口，涉及到敏感数据的传输，例如：姓名、手机号、身份证等信息，

需求背景：

查询对接第三方团队获取用户个人信息的接口，涉及到敏感数据的传输，例如：姓名、手机号、身份证等信息，此过程需要加密处理。

入参需加密字段：姓名、手机号、证件号

第三方团队提供的接口是公共接口且使用 AES 对称加密(BLD-AES-Key)，仅用于我们自己的后台服务与第三方团队的后台服务之间的数据安全加密传输

安全加密方案

基于以上情况，当前的后台服务与第三方服务之间已经建立AES加密方案，但是前端与当前的服后台务之间的数据传输也是需要加密处理的。安全传输有以下两种方案

1. 方案一（对称加密方案）：

每次接口请求前，前端与当前后台服务商定，以统一的方法生成一次性 AES 或 DES 密钥 key（One-Time-Key），使用 SHA1(SessionID + Timestamp + Salt)的方式作为 AES Key 的偏移量 iv，其中 salt 也是前后端商议好的固定值
当前后台服务使用相同的密钥 key和偏移量 iv解密，在与第三方的团队的服务走加密方式调用接口
接口结果返回

One-Time-Key 生命周期只在当前会话中，用完即弃；可以自己定义生成一个类似uuid的规则；

对称加密代码实现

import JSEncrypt from 'jsencrypt';

export function generateRandom16UUID() {
  let codeArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  let res = '';
  for (let i = 0; i < 16; i++) {
    const id = Math.ceil(Math.random() * 61);
    res += codeArr[id];
  }
  return res;
}

/**
 * aes加密方案：key + iv偏移量
 * 1.定义key: xQMNYmKhNuqQ4aAIta
 * 2.使用SHA1(SessionID+Timestamp+Salt)的方式作为偏移量 salt: xQYTRmKhNuqQ4aAIta
 */
export function encrypteData(content, deviceId, timestamp) {
  const keyStr = generateRandom16UUID();
  const saltStr = 'xQYTRmKhNuqQ4aAIta';
  const ivStr = CryptoJS.SHA1(deviceId+timestamp+saltStr).toString().substring(0, 16);
  
  const key = CryptoJS.enc.Utf8.parse(keyStr);
  const iv = CryptoJS.enc.Utf8.parse(ivStr);

  const encrypt = CryptoJS.AES.encrypt(content, key, {
    iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypt.ciphertext.toString();
}

对称加密需要给后端透传 key，通过前端源码反编译是很容易拿到加密方案，故该加密方式容易被破解

2. 方案二（对称加密 + 非对称加密方案）：

服务提前配置一个 RSA 密钥对(Key-Pair)，并将 Public Key 公钥告知前端，前端应用内置在其代码文件中
每次接口请求前，前端生成一个一次性的 AES 或 DES 密钥key(One-Time-Key)，用于加密需保护的字段，再使用内置的 Public Key 加密该对称密钥生成 Encrypted-Key，附带业务数据传给当前的后台服务
当前的后台服务使用 RSA 私钥 Private Key 将 Encrypted-Key 解密，获得key（One-Time-Key），从而将加密字段解密，获取字段的明文
当前的后台服务服务使用 BLD-AES-Key 加密需要保密的字段，随后与第三方的团队的服务走加密方式调用接口
接口结果返回，使用 BLD-AES-Key 解密保密字段，再使用key（One-Time-Key）重新加密，返回给前端

由于 One-Time-Key 只存在于每次的请求会话中，且被 RSA 密钥保护，几乎没有泄露的风险；字段明文也只会出现在当前后台服务内存中，安全可控；注意：日志中不能包含相关敏感字段, 并且该方案的可能会引起性能上的下降

对称加密 + 非对称加密的代码实现

import JSEncrypt from 'jsencrypt';

const publicKeyDev = `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA5/qTnvd5gKfk5u6mQW8b
UNjrS4cCy8kVQRd+3bimIXSXDkH34y0BEmOgNCavToeSEIeLUtz+hqz4tw+5UIU3
W64sy6c+klXEH6aNW+1jkHkeYMXtIRvjem6UDiZDEcCF9aX6h6nUDaEWKnQw9OvD
i6J5Srp9tDlXysrtywLIGKCvd7VRUGD/IxyMz/qlZUyjM175VMXmhTpG2palLBMU
RGVxbKvaw2udcUf1OSrSqRAk+odFB6Hhx2quxm64nq0lLpq9x9Yl5qkNqi02V3Tj
CDSw1gcjI2X3HHVPefTXUziNfk8PHHwgxDzk24jUMsz4sl4J3Ut1xVWPEuY5hvl7
4wIDAQAB
-----END PUBLIC KEY-----`;

const publicKeyProd = `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA6aLR6OlZj7YnXLEgZVX9
vkvHmvN3HUEQ80iKJ69D4/0buq/1/9fWcUy3hUntQxGEYEoChJjAFZH53Ov8v/Xs
MZOdjgdb+EpC1KbE62Eh+StbdmayektQ5zatZxTiEzPsRCeuyl51c1Rbf8IiQzOW
thYdYpvufpC8PZgN2+1HNGvgeXm9FEQEt4nPoJink/oNtsiE+bDfs7TAYcHYN9fP
78roh6fp1x55ZsLw1kw+OUbpFkT8j5MzZHAKxrTZVhIFsSefI5+x9FksAuFe2Oyz
g5Y5uPvU0yZX5gm9AeuE/AWmEODKSd1LbwGE4KwFqEkX/Or1cu83x42xoSGKgsKG
mwIDAQAB
-----END PUBLIC KEY-----`

function getPublicKey() {
  return window._TARGET === 'prd' ? publicKeyProd : publicKeyDev;
}

/**
 * aes 加密方式
 * @param {*} content 加密的内容
 * @param {*} deviceId 设备id
 * @param {*} timestamp 时间戳
 * @param {*} aesKey 生成的随机uuid作为aes 加密的key
 * @returns 
 */
export function encrypteData(content, deviceId, timestamp, aesKey) {
  const keyStr = aesKey;
  const ivStr = CryptoJS.SHA1(deviceId + timestamp).toString().substring(0, 16);

  const key = CryptoJS.enc.Utf8.parse(keyStr);
  const iv = CryptoJS.enc.Utf8.parse(ivStr);

  const encrypt = CryptoJS.AES.encrypt(content, key, {
    iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypt.ciphertext.toString();
}

/**
 * rsa对带过来的 key加密
 * @param {*} aesKey 生成的随机uuid作为aes 加密的key
 * @returns 
 */
export const setRsaCode = function (aesKey) {
  const jsencrypt = new JSEncrypt();
  const publicKey = getPublicKey();
  jsencrypt.setPublicKey(publicKey)
  const result = jsencrypt.encrypt(aesKey);
  return result;
};

export function generateRandom16UUID() {
  let codeArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  let res = '';
  for (let i = 0; i < 16; i++) {
    const id = Math.ceil(Math.random() * 61);
    res += codeArr[id];
  }
  return res;
}