前端使用Web Cryptography API进行内容加密，几乎无法破解

这两天换了个小电脑，原来那个电脑不咋行了，还是16年的本。新换了个Mini主机，结果很多密码都是存储在那个电脑上的。

思来想去决定做个程序，将密码存储在云上，然后做个App，同时兼顾PC端和手机端。

需求

使用跨端框架，能同时支撑PC和手机端。(开发效率要高)
UI风格要简单大方，最好是扁平化设计。(看习惯了)
内容要加密存储在云上，需要保证在数据库被攻破的情况下内容不泄露。
服务部署在云端，传输数据的过程中不能有数据泄露。即使泄露，也是密文，而非明文。

解决方案

选择tauri框架开发，跨端框架，同时兼顾Windows、Android。（其他设备我也没有，直接不考虑了）
UI框架选择AntDesign，风格简洁大方，老牌开源值得信赖。
使用PBKDF2派生密钥，配合AES-GCM算法对内容进行加密，保证数据库在被攻破的情况下，内容依旧无法解密。
强制https连接，确保数据在传输过程中被窃密或修改。即便被窃走，也是密文，而非明文。

运行流程图

css 复制代码

[用户输入主密码] 
       ↓
[本地使用 salt + password → deriveKey()]
       ↓
[本地使用 key + IV + data → encryptData()]
       ↓
[将 salt, IV, encrypted_data, auth_tag 上传至服务端数据库]

代码

生成密钥

本地设置一个主密码 (Master Password)，随机生成一个盐值 (Salt)，借助PBKDF2派生密钥。

请注意，这里建议Salt仅初始化的时候生成一次，将其保存在localStore中。

js 复制代码

async function deriveKey(masterPassword) {
    const salt = crypto.getRandomValues(new Uint8Array(16));
    const enc = new TextEncoder();
    const keyMaterial = await crypto.subtle.importKey(
        "raw",
        enc.encode(password),
        { name: "PBKDF2" },
        false,
        ["deriveBits", "deriveKey"]
    );

    return await crypto.subtle.deriveKey(
        {
            name: "PBKDF2",
            salt: salt,
            iterations: 100000, // 迭代次数越高越好，但要考虑性能影响
            hash: "SHA-256"
        },
        keyMaterial,
        { name: "AES-GCM", length: 256 }, // 我们将使用 AES-GCM 加密算法
        true,
        ["encrypt", "decrypt"]
    );
}

注意：这里不建议将迭代次数调的非常高，对性能影响较大，但产生的效果有限。

加密

根据密钥使用AES-GCM算法对明文进行加密，这里需要注意，如果是表单形式的建议直接转为String，可以在后期再转回来。

js 复制代码

async function encryptData(key, data) {
    const iv = crypto.getRandomValues(new Uint8Array(12)); // 初始化向量，GCM模式下建议长度为12字节
    const encryptedData = await crypto.subtle.encrypt(
        {
            name: "AES-GCM",
            iv: iv
        },
        key,
        new TextEncoder().encode(data)
    );

    return {
        iv: Array.from(iv), // 将Uint8Array转换为数组以便于存储或传输
        encryptedData: Array.from(new Uint8Array(encryptedData))
    };
}

这里还可以添加AuthTag作为认证标签，校验当前数据库中的数据是否完整且未篡改。

解密

根据主密码+Salt重新生成密钥，然后用密钥对数据进行解密操作。

js 复制代码

async function decryptData(key, iv, encryptedData) {
    const decryptedData = await crypto.subtle.decrypt(
        {
            name: "AES-GCM",
            iv: new Uint8Array(iv)
        },
        key,
        new Uint8Array(encryptedData)
    );

    return new TextDecoder().decode(decryptedData);
}

有兴趣的朋友可以考虑一下我这套方案，目前来看安全性还是比较高的。

主密码只要是保存好，几乎不存在攻破的可能性。如果嫌麻烦其实完全可以将主密码写入代码，毕竟PC和Android端都是打包好的App。

即便是安装包泄露了，我想也没几个人会想着去解包看看。当然，更安全的方案肯定是存在localStore或者本地配置文件中。