前端加密：常用加密方式及使用指南

介绍前端加密的概念、常见误区及核心目的，详细解析哈希、对称加密、非对称加密等常用方式及其应用场景，对比了不同加密算法的特性与优缺点，并强调了前端加密的安全底线原则，即所有校验必须在后端完成，结合 HTTPS 与风控策略构建完整安全体系。

栈溢出发布于 2026/4/6更新于 2026/4/189 浏览

一、什么是前端加密？(先纠正一个常见误区)

前端加密，指的是在浏览器 (JS 环境) 中，对数据进行加密/签名/混淆/校验等操作，再发送给后端。

重要认知：

前端加密 ≠ 绝对安全

前端代码是可被查看、可被调试、可被篡改的。所以前端加密的核心目的不是防止高手攻击，而是：

防止明文传输
防止低成本抓包、脚本刷接口
提高攻击门槛
与后端做配合校验

二、前端常见的加密 [分类]

1. 哈希 (不可逆)

哈希也叫散列，是一种将任意长度的输入（如数据、文件、消息）通过哈希函数转换成固定长度输出的过程，这个输出通常称为哈希值、散列值或摘要。

用途：

密码处理
签名校验
数据完整性校验

常见算法：

MD5 (已不安全)：可人为制造碰撞 (指攻击者找到两个不同的输入，经过哈希计算后，却产生相同的哈希值的过程)
SHA-1 (不推荐，逐渐被淘汰，存在碰撞攻击)
SHA-256 和 SHA-512 (推荐，属于 SHA-2)，目前广泛应用

示例： 使用 Web Crypto API (crypto.subtle) 进行密码学操作 (需要 HTTPS)，也可以使用 CryptoJS JS 的加密库，支持多种加密算法 (AES, SHA, MD5 等)。

// 1. 准备数据
const text = "123456";
const encoder = new TextEncoder();
const data = encoder.encode(text);

// 2. 计算哈希
const hashBuffer = await crypto.subtle.digest('SHA-256', data);

// 3. 转为十六进制
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map(b => b.toString().(, )).();
.(, hashHex);

相关免费在线工具

加密/解密文本

使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。在线工具，加密/解密文本在线工具，online

Keycode 信息

查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online

Escape 与 Native 编解码

JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online

JavaScript / HTML 格式化

使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online

JavaScript 压缩与混淆

Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online

Base64 字符串编码/解码

将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online

// ECC 密钥交换完整流程演示 class ECCFlow { static async demonstrateCompleteFlow() { console.log("ECC 密钥交换完整流程演示"); console.log("=========================="); // 第 1 步：选择椭圆曲线 console.log("\n第 1 步：选择椭圆曲线"); const curve = "P-256"; console.log(" 选择的曲线：" + curve); console.log(" 安全强度：128 位"); console.log(" 公钥长度：65 字节"); console.log(" 私钥长度：32 字节"); // 第 2 步：双方生成密钥对 console.log("\n第 2 步：双方生成密钥对"); // Alice 生成密钥对 const aliceKeyPair = await crypto.subtle.generateKey( { name: "ECDH", namedCurve: curve }, true, ["deriveKey"] ); console.log(" Alice 生成密钥对:"); console.log(" - 私钥：保密存储"); console.log(" - 公钥：准备发送给 Bob"); // Bob 生成密钥对 const bobKeyPair = await crypto.subtle.generateKey( { name: "ECDH", namedCurve: curve }, true, ["deriveKey"] ); console.log(" Bob 生成密钥对:"); console.log(" - 私钥：保密存储"); console.log(" - 公钥：准备发送给 Alice"); // 第 3 步：交换公钥 console.log("\n第 3 步：交换公钥（通过网络）"); const bobPublicKey = bobKeyPair.publicKey; console.log(" Alice 收到 Bob 的公钥"); const alicePublicKey = aliceKeyPair.publicKey; console.log(" Bob 收到 Alice 的公钥"); // 第 4 步：计算共享密钥 console.log("\n第 4 步：各自计算共享密钥"); console.log(" 数学原理:"); console.log(" Alice 私钥 × Bob 公钥 = Bob 私钥 × Alice 公钥"); // Alice 计算共享密钥 const aliceSharedKey = await crypto.subtle.deriveKey( { name: "ECDH", public: bobPublicKey }, aliceKeyPair.privateKey, { name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"] ); console.log(" Alice 计算共享密钥完成"); // Bob 计算共享密钥 const bobSharedKey = await crypto.subtle.deriveKey( { name: "ECDH", public: alicePublicKey }, bobKeyPair.privateKey, { name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"] ); console.log(" Bob 计算共享密钥完成"); // 第 5 步：验证密钥相同 console.log("\n第 5 步：验证双方密钥相同"); const aliceKeyBytes = await crypto.subtle.exportKey("raw", aliceSharedKey); const bobKeyBytes = await crypto.subtle.exportKey("raw", bobSharedKey); const aliceHex = Array.from(new Uint8Array(aliceKeyBytes)) .map(b => b.toString(16).padStart(2, '0')) .join(''); const bobHex = Array.from(new Uint8Array(bobKeyBytes)) .map(b => b.toString(16).padStart(2, '0')) .join(''); console.log(" 验证结果:"); console.log(" Alice 密钥：" + aliceHex.substring(0, 32) + "..."); console.log(" Bob 密钥：" + bobHex.substring(0, 32) + "..."); console.log(" 是否相同：" + (aliceHex === bobHex ? "是" : "否")); // 第 6 步：使用共享密钥加密通信 console.log("\n第 6 步：使用共享密钥加密通信"); const message = "会议时间改为下午 2 点"; console.log(" Alice 要发送：\"" + message + "\""); // 加密 const iv = crypto.getRandomValues(new Uint8Array(12)); const encrypted = await crypto.subtle.encrypt( { name: "AES-GCM", iv }, aliceSharedKey, new TextEncoder().encode(message) ); console.log(" 加密完成:"); console.log(" - 密文长度：" + encrypted.byteLength + " 字节"); console.log(" - IV: " + Array.from(iv).slice(0, 3).join(',') + "..."); // 第 7 步：Bob 解密消息 console.log("\n第 7 步：Bob 解密消息"); const decrypted = await crypto.subtle.decrypt( { name: "AES-GCM", iv }, bobSharedKey, encrypted ); const decryptedMessage = new TextDecoder().decode(decrypted); console.log(" Bob 解密得到：\"" + decryptedMessage + "\""); console.log(" 是否正确：" + (message === decryptedMessage ? "是" : "否")); // 安全性分析 console.log("\n安全性分析:"); console.log(" 中间人无法计算共享密钥"); console.log(" 即使窃听到公钥交换也没用"); console.log(" 每次会话可生成新的密钥对"); return { aliceKeyPair, bobKeyPair, sharedKey: aliceSharedKey, encryptedMessage: encrypted }; } } // 运行完整流程 ECCFlow.demonstrateCompleteFlow().catch(console.error);

特性	对称加密	非对称加密
密钥数量	单个密钥，加解密相同。	一对密钥，公钥加密，私钥解密。
速度	非常快，适合加密大量数据。	非常慢（比对称加密慢 100-1000 倍），不适合大数据。
安全性基础	密钥的保密性。密钥必须安全共享。	密钥对的数学关系。私钥保密，公钥可公开。
主要功能	保证数据的机密性。	保证机密性、身份认证和不可否认性。
密钥分发	核心难题。如何安全地将密钥传递给对方？	天然解决。公钥可以公开分发，无需保密。
常见算法	AES（高级加密标准）、DES、3DES、ChaCha20	RSA、ECC（椭圆曲线加密）、ElGamal
典型应用	文件加密、数据库加密、SSL/TLS 会话加密、Wi-Fi（WPA2）	SSL/TLS 密钥交换、数字签名、电子邮件加密（PGP）、区块链

前端加密：常用加密方式及使用指南

一、什么是前端加密？(先纠正一个常见误区)

二、前端常见的加密 [分类]

1. 哈希 (不可逆)

更多推荐文章

相关免费在线工具

2. 对称加密 (前后端共用密钥)

3. 非对称加密 (公钥/私钥)

4. 非对称加密和对称加密对比

5. 签名≠加密

三、前端加密的底线原则

前端加密：常用加密方式及使用指南

一、什么是前端加密？(先纠正一个常见误区)

二、前端常见的加密 [分类]

1. 哈希 (不可逆)

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2. 对称加密 (前后端共用密钥)

3. 非对称加密 (公钥/私钥)

4. 非对称加密和对称加密对比

5. 签名≠加密

三、前端加密的底线原则