WebCrypto API 文件加密与密钥管理实战

前言WebCrypto API 提供原生的加密能力。本文通过 AES-GCM 与口令派生实现文件加密，并演示密钥的安全持久化与加载流程。能力检测const supportsWebCrypto = !!(crypto && crypto.subtle);

口令派生与生成密钥async function deriveAesKeyFromPassphrase(passphrase, salt) {

const enc = new TextEncoder();

const baseKey = await crypto.subtle.importKey('raw', enc.encode(passphrase), 'PBKDF2', false, ['deriveKey']);

const key = await crypto.subtle.deriveKey({ name: 'PBKDF2', hash: 'SHA-256', salt: enc.encode(salt), iterations: 100000 }, baseKey, { name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);

return key;

}

async function generateAesKey() {

return crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);

}

加密与解密async function encryptBytes(key, bytes) {

const iv = crypto.getRandomValues(new Uint8Array(12));

const buf = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, bytes);

return { iv, cipher: new Uint8Array(buf) };

}

async function decryptBytes(key, iv, cipher) {

const buf = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, cipher);

return new Uint8Array(buf);

}

密钥导出与持久化async function exportRawKey(key) {

const raw = await crypto.subtle.exportKey('raw', key);

return new Uint8Array(raw);

}

async function importRawKey(raw) {

return crypto.subtle.importKey('raw', raw, { name: 'AES-GCM' }, true, ['encrypt', 'decrypt']);

}

将密钥与元数据写入 IndexedDB：function openDB(name) {

return new Promise((resolve, reject) => {

const req = indexedDB.open(name, 1);

req.onupgradeneeded = () => {

const db = req.result;

if (!db.objectStoreNames.contains('keys')) db.createObjectStore('keys', { keyPath: 'id' });

};

req.onsuccess = () => resolve(req.result);

req.onerror = () => reject(req.error);

});

}

async function saveKey(id, raw) {

const db = await openDB('crypto');

const tx = db.transaction('keys', 'readwrite');

tx.objectStore('keys').put({ id, raw });

await new Promise((resolve, reject) => { tx.oncomplete = resolve; tx.onerror = () => reject(tx.error); });

db.close();

}

async function loadKey(id) {

const db = await openDB('crypto');

const tx = db.transaction('keys', 'readonly');

const req = tx.objectStore('keys').get(id);

const rec = await new Promise((resolve, reject) => { req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); });

db.close();

return rec ? importRawKey(new Uint8Array(rec.raw)) : null;

}