当前位置：首页 > news >正文

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

news 2025/7/12 18:47:31

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

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

需求

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

解决方案

选择tauri框架开发，跨端框架，同时兼顾Windows、Android。（其他设备我也没有，直接不考虑了）
UI框架选择AntDesign，风格简洁大方，老牌开源值得信赖。
使用PBKDF2派生密钥，配合AES-GCM算法对内容进行加密，保证数据库在被攻破的情况下，内容依旧无法解密。
强制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);
}