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

发布于:2025-07-11 ⋅ 阅读:(24) ⋅ 点赞:(0)

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

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

需求

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

解决方案

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

运行流程图

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

代码

生成密钥

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

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

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,可以在后期再转回来。

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重新生成密钥,然后用密钥对数据进行解密操作。

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或者本地配置文件中。


网站公告

今日签到

点亮在社区的每一天
去签到