JavaScript前端AES加密解密实现详解（CryptoJS）

前端AES加密解密概述

本文通过具体实例，详细讲解如何在JavaScript环境中实现前端的AES加密与解密功能，供开发者参考学习。

JavaScript前端AES加密实现

近期在项目开发中进行中间人（MITM）测试时，发现即便使用了HTTPS协议，数据传输的安全性仍无法得到绝对保障。攻击者若能实施中间人攻击，即可直接截获HTTP协议层的所有通信内容。因此，尝试对数据进行基础加密处理，以在一定程度上提升通信安全性显得尤为必要。

本方案选用AES算法对数据进行加密，要求客户端与服务器端使用相同的密钥进行加解密操作（注：此处仅为演示用途，实际生产环境中建议采用RSA等非对称加密算法）。

首先，需要准备好待加密的明文数据以及用于加密的密钥（KEY）。

var source = "ABCDEFG";
var aesKey = "8NONwyJtHesysWpM";

加密参数配置与处理

在使用JS进行加密时，必须确保填充方式（padding）和加密模式（mode）与服务器端保持一致，否则将导致无法正确解密。

若密钥为字符串类型，需先进行相应处理后再使用。

注意：PKCS5Padding与PKCS7Padding在AES加密中效果相同。

上述代码执行后生成的encryptedData即为最终的加密结果。

解密流程与代码实现

JavaScript解密代码实现

encryptedData代表加密后的数据。直接通过JS加密后得到的通常是一个对象，无法直接进行解密操作，必须先将其转换为Base64格式的字符串方可解密。因此，服务器端应当返回经过Base64编码后的加密数据。

encryptedData = encryptedData.ciphertext.toString();
var encryptedHexStr = CryptoJS.enc.Hex.parse(encryptedData);

以下是代码运行的实际效果展示：

相关的aes.js文件可在此处下载。

完整的测试代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net aes.js</title>
</head>
<script src="aes.js"></script>
<body>
<script>
  var key = CryptoJS.enc.Utf8.parse("8NONwyJtHesysWpM");
  var plaintText = 'ABCDEFGH'; // 明文
  var encryptedData = CryptoJS.AES.encrypt(plaintText, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  console.log("加密前："+plaintText);
  console.log("加密后："+encryptedData);
  encryptedData = encryptedData.ciphertext.toString();
  var encryptedHexStr = CryptoJS.enc.Hex.parse(encryptedData);
  var encryptedBase64Str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  var decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  var decryptedStr = decryptedData.toString(CryptoJS.enc.Utf8);
  console.log("解密后:"+decryptedStr);
   var pwd = "PCsUFtgog9/qpqmqXsuCRQ==";
  //加密服务端返回的数据
  var decryptedData = CryptoJS.AES.decrypt(pwd, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  console.log("解密服务端返回的数据:"+decryptedStr);
</script>
</body>
</html>

上述代码中已包含aes.js的完整实现。您可以使用在线HTML/CSS/JavaScript代码运行工具（如http://tools.jb51.net/code/HtmlJsRun）直接运行，即可看到前述的运行结果。

相关在线工具推荐

补充说明：对加密解密感兴趣的朋友，还可以参考本站提供的以下在线工具：

在线AES加密/解密工具： http://tools.jb51.net/password/aes_encode

文字在线加密解密工具（支持AES、DES、RC4等多种算法）： http://tools.jb51.net/password/txt_encode

在线编码转换工具（支持utf-8/utf-32/Punycode/Base64等）： http://tools.jb51.net/transcoding/decode_encode_tool

BASE64编码解码工具： http://tools.jb51.net/transcoding/base64

在线MD5/hash/SHA-1/SHA-2/SHA-256/SHA-512/SHA-3/RIPEMD-160加密工具： http://tools.jb51.net/password/hash_md5_sha

在线sha1/sha224/sha256/sha384/sha512加密工具： http://tools.jb51.net/password/sha_encode

更多关于JavaScript的相关内容，可查看本站专题：《JavaScript加密解密技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述的实现方法能对各位JavaScript程序员的开发工作有所助益。