React客户端应用中保护localStorage数据的最佳方式是什么？

首先给出明确结论：对localStorage做加解密处理是合理的方案，可以有效避免用户敏感数据直接通过调试工具明文泄露，但该方案只能提升攻击门槛，无法做到100%绝对安全，需要配合其他安全措施使用。

加密方案的正确实现方式 #

• 不要硬编码加密密钥在前端代码中，建议用户登录成功后由后端返回一次性临时密钥，密钥仅保存在内存中，页面刷新后重新从后端获取，密钥有效期与用户登录态绑定
• 优先选择成熟的对称加密算法，例如AES-GCM，不要自行实现加密逻辑，可直接使用crypto-js第三方库或者浏览器原生Web Crypto API实现
• 参考实现示例：

// 加密后写入localStorage
const saveEncryptedData = async (storageKey, rawData, secretKey) => {
  const encoder = new TextEncoder();
  const dataBuf = encoder.encode(JSON.stringify(rawData));
  const iv = window.crypto.getRandomValues(new Uint8Array(12));
  const encryptedBuf = await window.crypto.subtle.encrypt(
    { name: "AES-GCM", iv: iv },
    secretKey,
    dataBuf
  );
  // 拼接iv和加密数据后转base64存储
  const resultBuf = new Uint8Array(iv.length + encryptedBuf.byteLength);
  resultBuf.set(iv, 0);
  resultBuf.set(new Uint8Array(encryptedBuf), iv.length);
  localStorage.setItem(storageKey, btoa(String.fromCharCode(...resultBuf)));
};

// 从localStorage读取后解密
const getDecryptedData = async (storageKey, secretKey) => {
  const encryptedStr = localStorage.getItem(storageKey);
  if (!encryptedStr) return null;
  const resultBuf = Uint8Array.from(atob(encryptedStr), c => c.charCodeAt(0));
  // 前12位是iv，后面是加密数据
  const iv = resultBuf.slice(0, 12);
  const encryptedBuf = resultBuf.slice(12);
  const decryptedBuf = await window.crypto.subtle.decrypt(
    { name: "AES-GCM", iv: iv },
    secretKey,
    encryptedBuf
  );
  return JSON.parse(new TextDecoder().decode(decryptedBuf));
};

更高安全等级的优化方案 #

• 高敏感数据不要存储在localStorage中，优先选择sessionStorage存储（页面关闭后自动清除），或者直接保存在React状态管理的内存中，页面刷新后重新向后端请求获取
• 开启全站HTTPS，避免数据传输过程中被窃取，同时防范中间人攻击注入恶意脚本窃取存储数据
• 配置严格的Content Security Policy（CSP）规则，降低XSS攻击风险，一旦出现XSS漏洞，攻击者可以直接获取内存中的密钥和加密数据，加密措施将完全失效
• 密码、支付凭证类极高敏感数据，无论任何情况都不要存储在客户端本地

避坑提醒 #

• 不要依赖客户端加密作为唯一的安全手段，后端必须做严格的权限校验，哪怕前端存储的用户角色等数据被篡改，后端接口也要校验用户的实际权限，避免越权操作
• 不要无差别存储全量用户数据，仅在localStorage中存储非敏感的必要数据，例如用户偏好配置等不涉及隐私的内容，敏感数据按需向后端请求

内容的提问来源于stack exchange，提问作者Manjunath G