crypto-js 测试策略：如何使用 test.html 进行浏览器端加密验证

在Web开发中，加密功能的正确性直接关系到用户数据安全。本文将详细介绍如何利用 crypto-js 项目中的 test/test.html 文件在浏览器环境中验证加密算法的正确性，帮助开发者快速定位加密问题，确保生产环境中的加密功能稳定可靠。

测试环境准备

文件结构解析

crypto-js 的测试体系主要通过 test 目录下的文件实现，核心测试入口为 test/test.html。该文件整合了所有加密模块的测试用例，包括：

• 核心加密算法：AES、TripleDES、Rabbit 等实现，对应源码文件如 src/aes.js、src/tripledes.js
• 编码模块：Base64、UTF-16 等编码转换，对应 src/enc-base64.js
• 哈希函数：MD5、SHA 系列等，对应 src/md5.js、src/sha256.js

测试文件通过有序加载脚本构建完整测试环境，典型加载顺序如下：

<!-- 核心依赖 -->
<script src="../src/core.js"></script>
<script src="../src/lib-typedarrays.js"></script>
<!-- 加密算法 -->
<script src="../src/aes.js"></script>
<script src="../src/tripledes.js"></script>
<!-- 测试用例 -->
<script src="aes-test.js"></script>
<script src="tripledes-test.js"></script>

浏览器兼容性

test.html 使用 YUI Test 框架执行测试，兼容所有现代浏览器。对于特殊加密需求（如 src/enc-base64url.js 中的 URL 安全 Base64 编码），可通过 test/test1.html 进行专项验证，该文件包含 HMAC-SHA256 等算法的实战示例。

执行测试流程

基本测试步骤

1. 克隆项目

   git clone https://gitcode.com/gh_mirrors/cry/crypto-js.git
   

2. 启动本地服务器
   推荐使用 Python 快速启动 HTTP 服务：

   cd crypto-js
   python -m http.server 8000
   

3. 访问测试页面
   在浏览器中打开 http://localhost:8000/test/test.html，页面将自动执行所有测试用例并显示结果。

测试结果解读

测试结果通过 YUI Console 组件展示，分为三个状态：

• ✅ 通过：算法实现符合预期
• ❌ 失败：需检查对应测试文件（如 test/aes-test.js）中的用例定义
• ⚠️ 跳过：部分环境特定测试可能被跳过

典型测试输出示例：

[PASS] AES CBC Mode Encryption
[FAIL] TripleDES ECB Mode Decryption (see tripledes-test.js:45)

自定义测试用例

修改现有测试

以 AES 加密测试为例，打开 test/aes-test.js，添加自定义密钥和明文的测试用例：

"AES Custom Test": function() {
    var key = CryptoJS.enc.Utf8.parse('my-secret-key-16');
    var plaintext = CryptoJS.enc.Utf8.parse('test-custom-case');
    var encrypted = CryptoJS.AES.encrypt(plaintext, key, { mode: CryptoJS.mode.ECB });
    this.assertEquals('expected-ciphertext', encrypted.ciphertext.toString());
}

创建独立测试页面

参考 test/test1.html 的结构，创建自定义测试页面 test/custom-test.html，实现特定业务场景的加密验证：

<script src="../src/core.js"></script>
<script src="../src/aes.js"></script>
<script>
    // 测试微信支付签名算法
    var message = "appid=wxd930ea5d5a258f4f&body=test&device_info=1000&mch_id=10000100";
    var key = "192006250b4c09247ec02edce69f6a2d";
    var sign = CryptoJS.HmacSHA256(message, key).toString().toUpperCase();
    console.log("微信支付签名:", sign);
</script>

高级测试技巧

性能测试

通过 test/profile.html 可进行加密性能基准测试，支持：

• 算法执行时间统计
• 内存占用监控
• 不同加密模式的效率对比

跨环境一致性验证

为确保浏览器端与 Node.js 环境加密结果一致，可使用以下流程：

1. 在浏览器中通过 test1.html 获取加密结果
2. 在 Node.js 环境中执行相同加密逻辑
3. 对比两次结果是否一致

示例 Node.js 代码：

const CryptoJS = require('./src/index');
const key = CryptoJS.enc.Base64url.parse('u-rXsMB_aegAnzC_CJt27plLGNqOfR2EHI5o2ro1NO');
const message = "152999073894506063@http://localhost:3000/protected/index";
const hash = CryptoJS.HmacSHA256(message, key);
console.log(CryptoJS.enc.Base64url.stringify(hash));

常见问题排查

测试失败处理流程

1. 定位失败用例
   在 test.html 控制台中查看失败用例的具体文件和行号，如 aes-test.js:120

2. 检查算法实现
   对比失败用例与 src/aes.js 中的对应实现，特别注意：

   • 密钥长度是否符合算法要求（AES-128 需 16 字节密钥）
   • 填充模式是否匹配（如 src/pad-pkcs7.js 与 ZeroPadding 的区别）

3. 验证依赖加载顺序
   确保测试文件在依赖脚本之后加载，例如：

   <script src="../src/core.js"></script> <!-- 先加载核心库 -->
   <script src="lib-base-test.js"></script> <!-- 再加载测试用例 -->
   

特殊字符加密问题

当加密包含中文或特殊符号的数据时，需确保编码统一。推荐使用 UTF-8 编码：

// 正确示例
var plaintext = CryptoJS.enc.Utf8.parse('中文测试');
// 错误示例（可能导致加密结果不一致）
var plaintext = '中文测试'; // 依赖浏览器默认编码

测试体系扩展

添加新算法测试

如需贡献新算法（如 SM4），需遵循以下规范：

1. 在 src 目录添加实现文件（如 sm4.js）
2. 在 test 目录创建对应测试文件（sm4-test.js）
3. 在 test.html 中添加脚本引用：

   <script src="../src/sm4.js"></script>
   <script src="sm4-test.js"></script>
   

集成 CI 测试

通过修改 Gruntfile.js 配置，可将 test.html 的测试结果集成到 CI 流程，确保每次提交不会破坏现有加密功能。

总结

crypto-js 的测试体系通过 test.html 提供了完整的浏览器端加密验证方案，结合 test/test1.html 的实战示例和 src/ 目录下的模块化实现，开发者可快速验证从基础编码到复杂加密算法的正确性。建议在开发加密相关功能时，先通过测试页面验证算法行为，再集成到生产环境，以最大限度降低安全风险。

官方文档：docs/QuickStartGuide.wiki
测试用例全集：test/
核心加密模块：src/cipher-core.js