JavaScript的Crypto API是浏览器和Node.js环境内置的加密能力接口,无需引入第三方库即可实现多种加密、解密、签名、哈希等操作,是前端安全开发的重要基础。正确使用该API可以有效保障用户敏感信息在传输和存储过程中的安全性。

Crypto API基础特性
Crypto API提供了两类核心能力,一类是随机数生成,另一类是加密相关的算法操作。其中随机数生成是很多加密场景的基础,不安全的随机数会直接导致加密方案被破解。
安全随机数生成
生成加密级别的随机数需要使用getRandomValues方法,该方法生成的随机数符合密码学安全要求,不能用于普通场景的随机数生成。
// 生成16字节的安全随机数,用于后续密钥或者初始化向量生成
const array = new Uint8Array(16);
window.crypto.getRandomValues(array);
console.log("生成的安全随机数:", array);
常见加密算法的安全实现
对称加密实现
对称加密适合对本地存储的敏感数据进行加密,常用的算法是AES-GCM,该算法提供了完整性和机密性保护,比AES-CBC更安全。
// AES-GCM对称加密示例
async function encryptData(plainText, key) {
// 生成12字节的初始化向量,AES-GCM推荐长度
const iv = new Uint8Array(12);
window.crypto.getRandomValues(iv);
// 执行加密操作
const encrypted = await window.crypto.subtle.encrypt(
{
name: "AES-GCM",
iv: iv
},
key,
new TextEncoder().encode(plainText)
);
// 返回iv和加密结果,解密时需要用到iv
return {
iv: Array.from(iv),
encryptedData: Array.from(new Uint8Array(encrypted))
};
}
// 生成AES密钥
async function generateAesKey() {
return await window.crypto.subtle.generateKey(
{
name: "AES-GCM",
length: 256 // 推荐使用256位密钥长度
},
true, // 密钥是否可提取
["encrypt", "decrypt"] // 密钥用途
);
}
哈希算法实现
哈希算法常用于密码存储、数据完整性校验,推荐使用SHA-256及以上强度的算法,避免使用MD5、SHA-1等已被破解的算法。
// SHA-256哈希计算示例
async function calculateHash(data) {
const encoder = new TextEncoder();
const dataBuffer = encoder.encode(data);
const hashBuffer = await window.crypto.subtle.digest("SHA-256", dataBuffer);
// 将哈希结果转换为十六进制字符串
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
return hashHex;
}
安全实现注意事项
- 不要在前端硬编码密钥,前端代码可被用户查看,硬编码的密钥会直接泄露
- 初始化向量(IV)每次加密都需要重新生成,不能重复使用相同的IV
- 密钥长度要选择推荐的安全值,比如AES选择256位,RSA选择2048位及以上
- 不要用加密算法处理超大数据,大文件加密建议分块处理,避免内存溢出
- 敏感操作如密码验证,尽量放在服务端进行,前端仅做传输层的加密保护
常见问题排查
如果加密解密过程中出现错误,可以先检查以下几点:
| 问题现象 | 可能原因 | 解决方案 |
|---|---|---|
| 解密失败返回空结果 | IV或者密钥不匹配 | 确认解密时使用的IV和密钥与加密时完全一致 |
| 算法不支持报错 | 浏览器版本过低不支持该算法 | 检查浏览器兼容性,添加降级方案或者提示用户升级浏览器 |
| 哈希结果每次不一致 | 使用了包含随机因素的算法 | 哈希算法是确定性的,确认输入数据完全一致,没有额外添加随机字符 |
需要注意,Crypto API在HTTP环境下部分能力会被限制,生产环境必须部署在HTTPS环境下才能正常使用完整的加密功能。
// 解密示例,对应上面的AES-GCM加密
async function decryptData(encryptedObj, key) {
const iv = new Uint8Array(encryptedObj.iv);
const encryptedData = new Uint8Array(encryptedObj.encryptedData);
const decrypted = await window.crypto.subtle.decrypt(
{
name: "AES-GCM",
iv: iv
},
key,
encryptedData
);
return new TextDecoder().decode(decrypted);
}
JavaScriptCrypto加密算法安全实现修改时间:2026-07-02 02:36:31