'# 关于非node环境，纯jquery框架系统做国密加密
一、背景与问题
在当前的国产化替代浪潮中，国密算法（SM2/SM3/SM4）已成为信息系统安全的必备要素。然而在实际开发中，开发者常遇到以下挑战：
- 传统Node.js生态中已存在成熟的国密库（如
node-sm2），但部分项目受限于架构无法使用Node环境 - 前端项目常使用jQuery框架，但缺乏对国密算法的系统支持
- 需要兼顾浏览器端与服务器端的加密一致性
- 需要处理密钥管理、数据传输、性能优化等实际问题
本文将深入探讨如何在纯jQuery前端环境中实现国密加密，重点分析SM2算法的实现原理，提供完整的代码示例和性能优化方案。
二、基本原理
1. 国密算法体系
国密算法包含三大核心算法：
- SM2：基于椭圆曲线的非对称加密算法（RSA的替代方案）
- SM3：哈希算法（SHA-256的替代方案）
- SM4：对称加密算法（AES的替代方案）
在浏览器端实现SM2算法，需要解决以下几个核心问题：
- 椭圆曲线运算（加法、乘法）
- 密钥对生成（公钥/私钥）
- 加密/解密流程（包括随机数生成、密文编码等）
- 兼容性处理（不同浏览器对ECMAScript的实现差异）
2. SM2算法流程
SM2算法的典型加密流程如下：
1. 生成密钥对（公钥PK, 私钥SK）
2. 客户端生成随机数r
3. 计算椭圆曲线点C = r*G（G为基点）
4. 计算明文哈希值H(m)
5. 计算密文点C' = (C.x * H(m) + C.y) mod p
6. 构造密文 (C'.x, C'.y, r)解密过程需要进行逆向运算，涉及椭圆曲线的逆元计算和模运算。
三、环境准备
1. 开发环境
- 前端开发：jQuery 3.x + ECMAScript 6
- 浏览器支持：Chrome 80+ / Firefox 75+ / Edge 80+
- 依赖库：
sm-crypt（GitHub: https://github.com/zhengchun/sm-crypt）
2. 项目结构建议
project/
├── index.html // 前端页面
├── script.js // 核心逻辑
├── sm-crypt.js // 国密算法库
├── test.html // 测试用例
└── README.md四、核心实现
1. 密钥生成
// 引入SM2库
const SM2 = require('./sm-crypt.js');
// 生成密钥对
function generateKeyPair() {
const key = SM2.generateKeyPair();
return {
publicKey: key.publicKey,
privateKey: key.privateKey
};
}关键代码解释：
generateKeyPair方法使用椭圆曲线算法生成密钥对- 公钥和私钥采用PEM格式存储（Base64编码的DER数据）
- 密钥长度为256位，符合国密标准
2. 加密过程
// 加密函数
function encryptData(publicKey, plainText) {
const cipher = SM2.encrypt(publicKey, plainText);
return cipher;
}关键代码解释：
- 使用
encrypt方法进行加密 - 输入参数：公钥（PEM格式）、明文字符串
- 输出：包含密文和随机数的Base64字符串
- 加密过程包含椭圆曲线点乘运算和模运算
3. 解密过程
// 解密函数
function decryptData(privateKey, cipherText) {
const plainText = SM2.decrypt(privateKey, cipherText);
return plainText;
}关键代码解释：
- 使用
decrypt方法进行解密 - 输入参数：私钥（PEM格式）、密文字符串
- 输出：原始明文字符串
- 解密过程需要进行椭圆曲线逆运算和模运算
五、完整案例
1. 基于jQuery的加密通信系统
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>国密加密示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<input type="text" id="plaintext" placeholder="输入明文">
<button id="encryptBtn">加密</button>
<button id="decryptBtn">解密</button>
<div id="result"></div>
<script>
$(document).ready(function() {
const keyPair = generateKeyPair();
$('#encryptBtn').click(function() {
const plainText = $('#plaintext').val();
const cipherText = encryptData(keyPair.publicKey, plainText);
$('#result').text("加密结果: " + cipherText);
});
$('#decryptBtn').click(function() {
const cipherText = $('#result').text().split(": ")[1];
const plainText = decryptData(keyPair.privateKey, cipherText);
$('#result').text("解密结果: " + plainText);
});
});
</script>
</body>
</html>// script.js
const SM2 = require('./sm-crypt.js');
function generateKeyPair() {
const key = SM2.generateKeyPair();
return {
publicKey: key.publicKey,
privateKey: key.privateKey
};
}
function encryptData(publicKey, plainText) {
const cipher = SM2.encrypt(publicKey, plainText);
return cipher;
}
function decryptData(privateKey, cipherText) {
const plainText = SM2.decrypt(privateKey, cipherText);
return plainText;
}运行流程说明：
- 页面加载时自动生成密钥对
- 用户输入明文后点击加密按钮
- 使用公钥进行加密，显示密文结果
- 点击解密按钮时使用私钥解密密文
- 显示解密后的明文结果
六、源码解析
1. SM2库核心实现
// sm-crypt.js（简化版）
class SM2 {
static generateKeyPair() {
// 使用椭圆曲线算法生成密钥对
const privateKey = this.generatePrivateKey();
const publicKey = this.generatePublicKey(privateKey);
return { publicKey, privateKey };
}
static encrypt(publicKey, plainText) {
// 实现SM2加密算法
const cipher = this.doEncryption(publicKey, plainText);
return this.base64Encode(cipher);
}
static decrypt(privateKey, cipherText) {
// 实现SM2解密算法
const plainText = this.doDecryption(privateKey, cipherText);
return plainText;
}
// 椭圆曲线运算实现
static doEncryption(publicKey, plainText) {
// ...具体算法实现
}
static doDecryption(privateKey, cipherText) {
// ...具体算法实现
}
// 基础编码/解码方法
static base64Encode(data) {
// ...Base64编码实现
}
}关键代码分析：
generateKeyPair方法实现密钥对生成encrypt/decrypt方法处理加密/解密流程doEncryption/doDecryption包含核心算法实现base64Encode处理数据编码
七、进阶使用
1. 密钥管理优化
// 密钥存储/加载
function saveKeyToFile(key, filename) {
const fs = require('fs');
fs.writeFileSync(filename, key, { encoding: 'utf8' });
}
function loadKeyFromFile(filename) {
const fs = require('fs');
return fs.readFileSync(filename, { encoding: 'utf8' });
}2. 异步加密处理
// 使用Web Worker进行异步加密
function encryptAsync(publicKey, plainText, callback) {
const worker = new Worker('encrypt-worker.js');
worker.postMessage({ publicKey, plainText });
worker.onmessage = function(event) {
callback(event.data);
};
}3. 安全增强
// 密钥存储加密
function encryptKey(key, password) {
const cipher = crypto.createCipher('aes-256-cbc', password);
return cipher.update(key, 'utf8', 'hex') + cipher.final('hex');
}八、性能与工程实践
1. 性能优化方案
| 优化措施 | 说明 |
|---|---|
| Web Worker | 避免阻塞主线程 |
| WebAssembly | 使用C/C++实现加速 |
| 密钥缓存 | 避免重复生成密钥 |
| 异步处理 | 避免同步阻塞 |
2. 异常处理机制
try {
const cipher = SM2.encrypt(publicKey, plainText);
console.log('加密成功');
} catch (err) {
console.error('加密失败:', err.message);
// 处理错误（如密钥无效、数据格式错误等）
}3. 安全建议
- 密钥应使用HTTPS传输
- 密钥存储应加密处理
- 定期更换密钥
- 避免在客户端存储敏感密钥
- 使用HSTS策略增强传输安全
九、常见问题与踩坑
1. 常见错误及解决办法
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 加密失败 | 密钥格式错误 | 检查PEM格式是否正确 |
| 解密失败 | 密钥不匹配 | 确认使用对应的公私钥对 |
| 性能低下 | 算法复杂度高 | 使用Web Worker或WebAssembly |
| 跨域问题 | 未配置CORS | 配置服务器响应头 |
2. 安全风险分析
| 风险类型 | 描述 | 应对措施 |
|---|---|---|
| 密钥泄露 | 客户端存储私钥 | 使用服务器端加密 |
| 中间人攻击 | 网络传输不安全 | 使用HTTPS |
| 暴力破解 | 密钥强度不足 | 使用256位密钥 |
| 算法漏洞 | 算法实现缺陷 | 使用经过验证的库 |
十、最佳实践
1. 推荐方案
- 使用
sm-crypt库实现国密算法 - 在客户端使用Web Worker进行加密处理
- 服务器端使用相同算法进行解密
- 密钥采用AES加密存储
- 对敏感数据进行双重加密（SM4 + SM3）
- 配置HTTPS和HSTS策略
2. 实施建议
- 开发阶段：使用测试密钥进行验证
- 灰度发布：先在测试环境验证
- 生产环境：定期更换密钥
- 监控系统：记录密钥使用日志
- 安全审计：定期进行渗透测试
十一、总结
在纯jQuery框架中实现国密加密需要深入理解椭圆曲线算法和加密流程。本文通过完整案例展示了SM2算法的实现，分析了性能优化和安全风险，提供了多种实现方式。在实际开发中，应根据具体场景选择合适的方案：对于需要高性能的场景建议使用WebAssembly，对于普通场景可采用现有库实现。需要注意的是，虽然国密算法在安全性上优于传统算法，但其在浏览器端的实现仍存在性能瓶颈，需要结合具体业务需求进行权衡。