WebCrypto 加密存储实践：IndexedDB 与 OPFS

`title: WebCrypto 加密存储实践：IndexedDB 与 OPFS``categories: Web 开发/前端/数据管理``keywords: WebCrypto,SubtleCrypto,AES-GCM,加密,密钥管理,IndexedDB,OPFS``description: 使用 WebCrypto 的 AES-GCM 在浏览器端对数据加密后存储到 IndexedDB 或 OPFS，并提供密钥生成与导出导入的实践。`密钥生成与导出async function genKey() {

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

}

async function exportRawKey(key) {

return new Uint8Array(await crypto.subtle.exportKey('raw', key));

}

async function importRawKey(raw) {

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

}

加密与解密async function encrypt(key, data) {

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

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

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

}

async function decrypt(key, iv, cipher) {

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

return new Uint8Array(dec);

}

存储到 OPFS 与 IndexedDBasync function saveCipherToOPFS(name, bytes) {

const root = await navigator.storage.getDirectory();

const handle = await root.getFileHandle(name, { create: true });

const writable = await handle.createWritable();

await writable.write(bytes);

await writable.close();

}

function openKeyDB() {

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

const req = indexedDB.open('crypto-db', 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 storeKey(db, id, raw) {

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

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

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

tx.oncomplete = () => resolve();

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

});

}