加解密技术详解:纯前端如何实现 AES / SM4 / RSA / 国密 SM2

加解密技术详解:纯前端如何实现 AES / SM4 / RSA / 国密 SM2

技术方向:前端密码学 | 对称加密 / 非对称加密 / 国密 / node-forge / sm-crypto

文章目录

这些技术解决什么问题

加解密在解决三件事:机密性------别人看不到你的内容;完整性------内容没被偷偷改过;身份认证------对方真就是他说的那个人。下面把加解密工具背后用到的几门技术摊开讲:对称加密、非对称加密与国密算法,以及让它们在浏览器里跑起来的那几个纯前端密码学库。

对称加密:AES / DES / 3DES / SM4 / RC4

对称加密,顾名思义就是加密和解密用同一把密钥。你拿这把密钥把明文变成密文,对方再拿同一把密钥还原回来。它速度快,所以一般拿来加密体积比较大的数据。

AES:现代对称分组密码的事实标准,支持 128/192/256 位密钥(工具里文本口令经 SHA-256 派生成 16/24/32 字节密钥)。

DES / 3DES:早期标准,DES 密钥只有 56 位,现在已经不安全;3DES 用三倍密钥加强,属于怀旧选项。

SM4:咱们自己的商用密码标准(国密)对称算法,安全强度和 AES 相当。

RC4:流密码,没有分组和模式的概念,实现简单,适合轻量场景。

模式与 IV:CBC 模式需要初始化向量 IV(工具里留空会自动生成并回显),ECB 不需要;CBC 比 ECB 更安全。

在工具里的落地

落到工具上,操作很直白:选算法和模式、填入口令(或 HEX 密钥)和明文,点一下就拿到 Base64 或 HEX 的密文。对称加密这一页长这样:

图 1:AES-CBC 对称加密界面(输入明文后一键得到密文,IV 自动生成)

这项技术能支撑哪些工具/场景

加解密工具本身(对称页签)。

文件加密锁:用 AES-256-GCM 在本地加密任意文件或文本,密码走 PBKDF2 派生。

本地保存敏感配置、临时加密一段文本再发出去。

再往外说,HTTPS/TLS、Wi-Fi WPA2、磁盘加密,底层都是对称加密。

非对称加密与签名:RSA / 国密 SM2

对称加密有个麻烦:密钥怎么安全地交到对方手上?非对称加密用一对密钥来化解------公钥公开,用来加密或验签;私钥自己留着,用来解密或签名。

RSA:经典非对称算法,工具用 RSA-OAEP(配合 SHA-256)做加密,用 SHA-256 做签名 / 验签,密钥是 PEM 格式,支持 2048 / 4096 位。

国密 SM2:咱们的椭圆曲线公钥算法,加密采用 C1C3C2 密文格式,签名时对消息做 SM3 杂凑再签,符合 GM/T 0003 系列规范。

签名 / 验签:用私钥对消息摘要签名,任何人拿公钥就能验证「这消息确实出自私钥持有者、而且没被改过」。

在工具里的落地

工具里可以一键生成 RSA 或 SM2 的密钥对,然后用公钥直接加密、私钥解密,也能做签名和验签。SM2 这边生成密钥对后,拿公钥把明文加密,得到的密文长这样:

图 2:国密 SM2 公钥加密,明文经 C1C3C2 编码得到 HEX 密文

这项技术能支撑哪些工具 / 场景

加解密工具(RSA / SM2 页签)。

SSL 证书助手:本地生成 RSA 私钥 / CSR、自签证书。

JWT 解析:本地验签并算过期时间。

文件签名 / 电子签章。

凡是涉及身份认证、防篡改、密钥交换的地方。

背后支撑:纯前端密码学库

node-forge:纯 JavaScript 写的 TLS/密码学工具集,工具拿它做 AES/DES/3DES 的分组加密,以及 RSA 的密钥对、加解密、签名。

sm-crypto:国密算法(SM2/SM3/SM4)的 JS 实现,工具用它落地国密的加解密与签名。

Web 运行环境:所有运算都在浏览器本地完成,没有网络请求,明文/密钥/密文只在内存里走一遭。

小结:这些技术还能延伸到哪

加解密工具用到的技术,基本就三块:对称加密、非对称加密与国密算法,以及一套能在浏览器里跑的密码学库。文件加密、证书签发、Token 验签、电子签章,底层也是同一套。

相关推荐
拖孩1 小时前
代码我能全交给 AI,流量主这 500 个访客它一个都替不了我
前端·后端·微信小程序
2601_963870211 小时前
基于SSM的特产代购系统
java·前端
paopaokaka_luck1 小时前
智慧社区综合服务小程序(人脸识别、AI问答、Echarts图形化分析)
前端·javascript·spring boot·spring·数据分析·echarts
烈风逍遥2 小时前
第七篇:提示词模板管理与 Agent 提示词编排
前端·人工智能·后端
Amos_Web2 小时前
Rspack 源码解析(十二):JavaScript Chunk 是如何被渲染出来的
前端·rust·源码
前端探险家Rick2 小时前
React Native 二级弹出面板 + 键盘适配:从踩坑到正确方案
前端
用户921080262862 小时前
MCP 是什么?用 Figma MCP 辅助还原 Vue 页面
前端
用户921080262862 小时前
用 Figma MCP 还原 Vue 页面时,我遇到的三个问题
前端
修罗王2 小时前
从 React Bits 到 Vue/Svelte Bits:重新定义前端“视觉表达层“
前端