JavaScript加密解密技巧与WebCryptoAPI解析

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《JavaScript加密解密方法及Web Crypto API详解》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

现代标准做法是使用Web Crypto API，它基于硬件加速和系统级随机数生成器，提供密钥管理、加解密操作和算法绑定三大核心功能，支持AES-GCM对称加密和RSA-OAEP公钥加密，强调密钥安全与运行时兼容性检测。

JavaScript 中的加密解密，现代标准做法是使用 Web Crypto API —— 它是浏览器原生支持的安全接口，基于硬件加速和系统级随机数生成器，比手写算法或第三方库更可靠、更高效，也更符合安全规范。

Web Crypto API 的核心工作方式

它不是提供一个“加个密、解个密”就完事的黑盒，而是围绕三个关键环节组织：

• 密钥管理：通过 crypto.subtle.generateKey()、importKey()、exportKey() 等方法创建、导入、导出密钥；密钥默认不可导出（尤其是私钥），防止意外泄露
• 加密/解密操作：用 encrypt() 和 decrypt() 方法配合指定算法（如 AES-GCM、RSA-OAEP）执行运算；所有操作返回 Promise，异步执行，避免阻塞主线程
• 算法绑定与约束：每个操作必须显式声明算法（如 { name: "AES-GCM", iv: iv }），且密钥需提前用 extractable: false 等选项限制用途，确保密钥不能被滥用

常见场景：AES-GCM 对称加解密（适合前端加密敏感数据）

AES-GCM 是 Web Crypto 推荐的默认对称方案，自带认证，防篡改。注意：密钥不能硬编码，IV（初始向量）必须唯一且不重复使用。

• 生成密钥：const key = await crypto.subtle.generateKey("AES-GCM", true, ["encrypt", "decrypt"])
• 加密时传入随机 IV（12 字节推荐）：const encrypted = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, encoder.encode("hello"))
• 解密时必须用完全相同的 IV 和密钥，否则失败或返回乱码

公钥场景：RSA-OAEP（适合加密小数据，如传输对称密钥）

前端可用公钥加密，后端用私钥解密。注意：RSA 加密长度受限（例如 2048 位最多加密约 214 字节），不适合直接加密长文本。

• 生成密钥对：const { publicKey, privateKey } = await crypto.subtle.generateKey("RSA-OAEP", true, ["encrypt"], ["decrypt"])
• 公钥加密：await crypto.subtle.encrypt({ name: "RSA-OAEP" }, publicKey, data)
• 私钥解密需在安全环境（如服务端）完成，浏览器中不应持有可导出的私钥

注意事项与避坑点

Web Crypto API 看似简单，但几个细节极易出错：

• 所有参数必须是 ArrayBuffer 或 TypedArray，字符串要先用 TextEncoder 编码，二进制结果常用 Uint8Array 处理
• 不同浏览器对算法支持略有差异（如 Safari 对某些 ECDSA 曲线支持较晚），建议用 crypto.subtle.digest() 或 generateKey() 做运行时检测
• 不要用它替代 HTTPS —— Web Crypto 解决的是“数据落地加密”或“端到端加密”问题，而非传输过程保护
• 密钥本身不加密，只是控制访问权限；若密钥从服务器下发，仍需 TLS 保障传输安全

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~