如何用JavaScript进行客户端数据加密与安全存储？_技术教程

使用Web Crypto API可在前端实现数据加密，通过AES-GCM与PBKDF2结合密码加密字符串，生成密钥、salt和iv，确保数据在浏览器中临时安全存储，防止明文暴露。

在前端使用JavaScript进行数据加密和安全存储，虽然不能替代服务端安全措施，但在某些场景下可以增强用户体验和数据保护。由于浏览器环境的开放性，所有代码对用户可见，因此客户端加密主要用于防止明文数据暴露、提升临时数据安全性，而不是对抗恶意攻击者。

1. 使用Web Crypto API进行加密

现代浏览器提供了Web Crypto API，这是一个强大的内置加密工具，支持AES-GCM、RSA、SHA等算法，可用于对称和非对称加密。

示例：使用AES-GCM加密字符串

async function encryptData(plainText, password) {
  const encoder = new TextEncoder();
  const data = encoder.encode(plainText);
  const salt = crypto.getRandomValues(new Uint8Array(16));
  const iv = crypto.getRandomValues(new Uint8Array(12)); // GCM需要12字节IV

  // 从密码生成密钥（PBKDF2）
  const keyMaterial = await crypto.subtle.importKey(
    'raw',
    encoder.encode(password),
    { name: 'PBKDF2' },
    false,
    ['deriveKey']
  );

  const aesKey = await crypto.subtle.deriveKey(
    {
      name: 'PBKDF2',
      salt: salt,
      iterations: 100000,
      hash: 'SHA-256'
    },
    keyMaterial,
    { name: 'AES-GCM', length: 256 },
    false,
    ['encrypt']
  );

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

  // 返回salt、iv和密文（便于解密）
  return {
    salt: arrayBufferToBase64(salt),
    iv: arrayBufferToBase64(iv),
    cipherText: arrayBufferToBase64(encrypted)
  };
}

function arrayBufferToBase64(buffer) {
  const bytes = new Uint8Array(buffer);
  let binary = '';
  for (let i = 0; i < bytes.length; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return btoa(binary);
}

2. 安全地存储加密数据

加密后的数据仍需妥善保存。常见的前端存储方式包括localStorage、sessionStorage和IndexedDB，但它们都不安全，因为任何脚本都可以读取。

建议做法：

避免将敏感信息长期存在localStorage中，尤其是登录凭证或加密密钥。
若必须本地存储，应结合短期会话（如sessionStorage）与自动过期机制。
不要把加密密钥硬编码或明文存入前端，最好由用户输入口令动态生成。

例如，用户每次打开页面时输入一个“主密码”，用于解密本地加密数据，关闭后清除内存中的密钥。

3. 解密数据并清理内存

解密过程是加密的逆操作，同样使用Web Crypto API。

async function decryptData(encryptedData, password) {
  const decoder = new TextDecoder();
  const salt = base64ToArrayBuffer(encryptedData.salt);
  const iv = base64ToArrayBuffer(encryptedData.iv);
  const cipherText = base64ToArrayBuffer(encryptedData.cipherText);

  const encoder = new TextEncoder();
  const keyMaterial = await crypto.subtle.importKey(
    'raw',
    encoder.encode(password),
    { name: 'PBKDF2' },
    false,
    ['deriveKey']
  );

  const aesKey = await crypto.subtle.deriveKey(
    {
      name: 'PBKDF2',
      salt: salt,
      iterations: 100000,
      hash: 'SHA-256'
    },
    keyMaterial,
    { name: 'AES-GCM', length: 256 },
    false,
    ['decrypt']
  );

  const decrypted = await crypto.subtle.decrypt(
    { name: 'AES-GCM', iv: iv },
    aesKey,
    cipherText
  );

  return decoder.decode(decrypted);
}

function base64ToArrayBuffer(base64) {
  const binary = atob(base64);
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  return bytes.buffer;
}

注意：解密后得到的数据应尽快使用并从内存中清除，特别是密钥和明文敏感内容。可手动设置变量为null以帮助垃圾回收。