前端密码加密的必要性

用户密码在前端进行加密处理是保护敏感数据的重要环节。即便数据传输采用HTTPS协议，前端加密仍能减少明文密码在传输过程中暴露的风险。多一层加密措施可以提升整体安全性，防范中间人攻击或日志意外泄露。

常见前端加密方案

Base64编码
Base64并非加密算法，而是一种编码方式。它能够将二进制数据转换为ASCII字符串，但容易被解码还原。适合简单场景，但不推荐单独用于密码保护。

const encoded = btoa('password123'); 
const decoded = atob(encoded);

单向哈希算法
SHA家族（如SHA-256）和MD5（已不推荐）属于单向哈希函数。通过加盐（salt）可提升安全性，但彩虹表攻击仍存在风险。

async function hashPassword(password) {
  const encoder = new TextEncoder();
  const data = encoder.encode(password + 'salt');
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  return Array.from(new Uint8Array(hashBuffer)).map(b => b.toString(16).padStart(2, '0')).join('');
}

PBKDF2算法
基于密码的密钥派生函数，通过多次迭代增加破解难度。适合密码存储场景，但需配合服务端验证。

async function pbkdf2Encrypt(password, salt, iterations = 100000) {
  const keyMaterial = await crypto.subtle.importKey(
    'raw',
    new TextEncoder().encode(password),
    { name: 'PBKDF2' },
    false,
    ['deriveBits']
  );
  const derivedBits = await crypto.subtle.deriveBits(
    {
      name: 'PBKDF2',
      salt: new TextEncoder().encode(salt),
      iterations,
      hash: 'SHA-256'
    },
    keyMaterial,
    256
  );
  return Array.from(new Uint8Array(derivedBits)).map(b => b.toString(16).padStart(2, '0')).join('');
}

进阶加密方案

bcrypt算法
专为密码哈希设计的算法，内置盐值并自动处理迭代次数。虽然前端实现较复杂（通常需依赖库），但安全性较高。

// 使用bcryptjs库示例
import bcrypt from 'bcryptjs';
const salt = bcrypt.genSaltSync(10);
const hashedPassword = bcrypt.hashSync('password123', salt);

RSA非对称加密
利用公钥加密数据，私钥解密。确保只有服务端能解密密码，但性能开销较大。

async function rsaEncrypt(password, publicKey) {
  const encrypted = await crypto.subtle.encrypt(
    { name: 'RSA-OAEP' },
    publicKey,
    new TextEncoder().encode(password)
  );
  return btoa(String.fromCharCode(...new Uint8Array(encrypted)));
}

综合实施方案

混合加密策略
结合哈希与非对称加密的优势：先对密码进行加盐哈希，再用RSA加密哈希值。这种方法既隐藏原始密码，又防止重放攻击。

async function hybridEncrypt(password) {
  const hashed = await hashPassword(password);
  const rsaEncrypted = await rsaEncrypt(hashed, serverPublicKey);
  return rsaEncrypted;
}

Web Crypto API最佳实践
现代浏览器提供的Web Crypto API支持多种加密操作。使用时需注意：

• 选择适合的算法（如AES-GCM用于对称加密）
• 妥善管理密钥生命周期
• 处理可能的异步错误

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

安全注意事项

避免固定盐值
每次加密应生成随机盐值，防止攻击者使用预计算哈希表。盐值可随加密结果一起传输至服务端。

防范时间攻击
确保加密操作时间恒定，避免通过时间差推断密码信息。例如使用crypto.timingSafeEqual进行哈希比较。

HTTPS强制要求
前端加密不能替代HTTPS。所有安全措施都应建立在SSL/TLS加密通道基础上，防止传输层窃听。

服务端二次验证
前端加密后的数据到达服务端后，仍需进行二次处理（如解密后加盐哈希存储）。避免完全依赖前端安全性。

性能优化建议

Web Worker分流计算
将耗时的加密操作放入Web Worker，防止主线程阻塞导致页面卡顿。

算法参数调优
根据设备性能动态调整PBKDF2迭代次数或bcrypt成本因子。移动设备可适当降低复杂度。

缓存公钥机制
非