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

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

特点:

• 加密解密使用同一个 key
• 性能好，适合大量数据

常见算法:

• AES(主流): 是目前全球最常用的对称加密算法，美国国家安全局用来保护绝密级信息的算法
• DES(已过时): 被破解

示例:

// 最简单的 AES 加密解密
async function aesSimple() {
    // 1. 生成密钥
    const key = await crypto.subtle.generateKey(
        {name: "AES-GCM", length: 256}, 
        true, 
        ["encrypt", "decrypt"]
    );
    
    // 2. 加密
    const iv = crypto.getRandomValues(new Uint8Array(12));
    const encrypted = await crypto.subtle.encrypt(
        {name: "AES-GCM", iv}, 
        key, 
        new TextEncoder().encode("你好世界")
    );
    
    // 3. 解密
    const decrypted = await crypto.subtle.decrypt(
        {name: "AES-GCM", iv}, 
        key, 
        encrypted
    );
    console.log("结果:", new TextDecoder().decode(decrypted)); // 你好世界
}
aesSimple();

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

先用它安全的交换对称密钥，然后用对称加密处理数据!

特点:

• 前端：公钥加密
• 后端：私钥解密
• 私钥不暴露

适合:

• 密码
• 关键字段
• 初始密钥交换

缺点:

• 慢
• 不适合大量数据

常见算法: ECC(更安全，少见) 加密原理来自于椭圆双曲线

// 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);

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

RSA(最常见): 原理来自于大数的质因数分解

async function generateRSAKeys () {
    // 生成 RSA 密钥对
    const keyPair = await crypto.subtle.generateKey(
        { 
            name: "RSA-OAEP", // RSA 算法 
            modulusLength: 2048, // 2048 位 
            publicExponent: new Uint8Array([0x01, 0x00, 0x01]), // 65537 
            hash: "SHA-256" // 使用的哈希 
        }, 
        true, // 可导出 
        ["encrypt", "decrypt"] // 用途 
    );
    return { publicKey: keyPair.publicKey, privateKey: keyPair.privateKey };
}

async function rsaEncryptDecrypt () {
    console.log("=== RSA 加密解密示例 ===");
    // 1. 生成密钥对
    const { publicKey, privateKey } = await generateRSAKeys();
    console.log("密钥对生成完成");
    
    // 2. 准备要加密的数据
    const message = "这是一条秘密消息";
    const data = new TextEncoder().encode(message);
    
    // 3. 用公钥加密
    const encrypted = await crypto.subtle.encrypt(
        { name: "RSA-OAEP" }, 
        publicKey, 
        data
    );
    console.log("加密完成，密文长度:", encrypted.byteLength, "字节");
    
    // 4. 用私钥解密
    const decrypted = await crypto.subtle.decrypt(
        { name: "RSA-OAEP" }, 
        privateKey, 
        encrypted
    );
    const decryptedMessage = new TextDecoder().decode(decrypted);
    console.log("解密结果:", decryptedMessage);
    return { publicKey, privateKey, encrypted };
}
// 运行示例
rsaEncryptDecrypt().catch(console.error);

5. 签名≠加密

签名的本质是: 证明数据是"你"发的，且未被篡改

常见做法:

sign = hash(params + secret + timestamp)

//前端

sign = sha256(a=1&b=2&secret=xxx&ts=123

后端:

• 用同样规则计算
• 对比 sign 是否一致

三、前端加密的底线原则

1. 前端加密永远不是安全的终点
2. 所有安全校验，必须在后端完成
3. 前端加密的价值是：降低成本攻击，而不是消灭攻击
4. 真正的安全 = https + 前端处理 + 后端校验 + 风控策略