Web Crypto HKDF与密钥派生前端安全使用最佳实践

Web Crypto HKDF与密钥派生前端安全使用最佳实践概述通过HKDF派生密钥，可避免直接使用主密钥进行加密。结合盐与上下文（info），可在不同用途间实现密钥隔离。HKDF派生async function importBaseKey(secret: string): Promise<CryptoKey> {

const raw = new TextEncoder().encode(secret)

return await crypto.subtle.importKey('raw', raw, 'HKDF', false, ['deriveKey'])

}

async function deriveAesKey(baseKey: CryptoKey, salt: Uint8Array, info: Uint8Array): Promise<CryptoKey> {

return await crypto.subtle.deriveKey(

{ name: 'HKDF', hash: 'SHA-256', salt, info },

baseKey,

{ name: 'AES-GCM', length: 256 },

false,

['encrypt', 'decrypt']

)

}

AES-GCM封装async function encrypt(data: Uint8Array, key: CryptoKey): Promise<{ iv: Uint8Array; ct: ArrayBuffer }> {

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

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

return { iv, ct }

}

async function decrypt(iv: Uint8Array, ct: ArrayBuffer, key: CryptoKey): Promise<Uint8Array> {

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

return new Uint8Array(pt)

}

使用建议为不同用途选择不同的info（如 `file:enc`, `session:token`）盐值随机生成并与密文一同存储，主密钥不落盘禁止在不安全上下文（非HTTPS）使用Web Crypto通过HKDF与AES-GCM的组合，可在前端实现安全可控的密钥派生与数据保护。