前端安全：从需求分析到实践，详解加密与验签

前端

2023-09-20 02:25:34

最近在复盘项目的时候，想到了之前做的关于前端加密与验签的需求，感觉这块很少有文章介绍，所以我就把这块内容做一下整理，希望可以帮助到后面有这一块需求的朋友。

需求分析

这里的要求很明确，需要对登录密码做加密处理，所以接下来我们就要找一种合适的加密方案。这里我们没有过多纠结，直接选择目前比较流行的AES加密算法。

加密方案选择

AES加密算法是一种分组密码，具有很高的安全性，而且实现起来也比较简单，所以很适合我们的需求。

加密实现

我们使用JavaScript中的CryptoJS库来实现AES加密，具体代码如下：

// 引入CryptoJS库
var CryptoJS = require("crypto-js");

// 加密函数
function encrypt(message, key) {
  // 将消息转换为字节数组
  var messageBytes = CryptoJS.enc.Utf8.parse(message);

  // 将密钥转换为字节数组
  var keyBytes = CryptoJS.enc.Utf8.parse(key);

  // 创建加密器
  var encryptor = CryptoJS.algo.AES.createEncryptor(keyBytes, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });

  // 加密消息
  var encryptedMessage = encryptor.process(messageBytes);

  // 将加密后的消息转换为字符串
  var encryptedMessageString = encryptedMessage.toString();

  // 返回加密后的消息
  return encryptedMessageString;
}

// 解密函数
function decrypt(encryptedMessage, key) {
  // 将加密后的消息转换为字节数组
  var encryptedMessageBytes = CryptoJS.enc.Hex.parse(encryptedMessage);

  // 将密钥转换为字节数组
  var keyBytes = CryptoJS.enc.Utf8.parse(key);

  // 创建解密器
  var decryptor = CryptoJS.algo.AES.createDecryptor(keyBytes, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7,
  });

  // 解密消息
  var decryptedMessage = decryptor.process(encryptedMessageBytes);

  // 将解密后的消息转换为字符串
  var decryptedMessageString = decryptedMessage.toString(CryptoJS.enc.Utf8);

  // 返回解密后的消息
  return decryptedMessageString;
}

验签方案选择

验签的目的是为了确保数据的完整性，防止数据在传输过程中被篡改。我们选择使用HMAC-SHA256算法来实现验签。

验签实现

我们使用JavaScript中的CryptoJS库来实现HMAC-SHA256验签，具体代码如下：

// 引入CryptoJS库
var CryptoJS = require("crypto-js");

// 验签函数
function sign(message, key) {
  // 将消息转换为字节数组
  var messageBytes = CryptoJS.enc.Utf8.parse(message);

  // 将密钥转换为字节数组
  var keyBytes = CryptoJS.enc.Utf8.parse(key);

  // 创建HMAC-SHA256签名器
  var hmacSha256 = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA256, keyBytes);

  // 计算签名
  var signature = hmacSha256.finalize(messageBytes);

  // 将签名转换为字符串
  var signatureString = signature.toString();

  // 返回签名
  return signatureString;
}

// 验证签名函数
function verifySignature(message, signature, key) {
  // 将消息转换为字节数组
  var messageBytes = CryptoJS.enc.Utf8.parse(message);

  // 将密钥转换为字节数组
  var keyBytes = CryptoJS.enc.Utf8.parse(key);

  // 将签名转换为字节数组
  var signatureBytes = CryptoJS.enc.Hex.parse(signature);

  // 创建HMAC-SHA256签名器
  var hmacSha256 = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA256, keyBytes);

  // 计算签名
  var calculatedSignature = hmacSha256.finalize(messageBytes);

  // 验证签名是否正确
  var isValidSignature = calculatedSignature.toString() === signatureString;

  // 返回验证结果
  return isValidSignature;
}