如何在前端安全地处理用户密码？

题目

如何在前端安全地处理用户密码？

信息

• 类型：问答
• 难度：⭐

考点

密码安全存储, 数据传输安全, 基础加密原理

快速回答

处理用户密码的核心要点：

• 永远不存储明文密码 - 使用哈希算法处理
• 使用HTTPS传输 - 确保传输过程加密
• 添加盐值（Salt） - 防止彩虹表攻击
• 选择强哈希算法 - 如bcrypt, PBKDF2或Argon2

原理说明

用户密码属于敏感数据，必须保证：
1. 传输安全：通过HTTPS加密通道传输，防止中间人窃听
2. 存储安全：服务器端存储密码的哈希值而非明文，即使数据库泄露攻击者也无法直接获取密码
3. 哈希加盐：为每个密码生成随机盐值，使相同密码的哈希结果不同，抵御彩虹表攻击

代码示例（Node.js）

// 使用bcrypt库安全处理密码
const bcrypt = require('bcrypt');

// 注册时处理密码
async function register(password) {
  const saltRounds = 10; // 计算成本因子
  const hashedPassword = await bcrypt.hash(password, saltRounds);
  // 存储hashedPassword到数据库
}

// 登录时验证密码
async function login(inputPassword, storedHash) {
  return await bcrypt.compare(inputPassword, storedHash);
}

最佳实践

• 前端：仅通过HTTPS提交密码，禁止本地存储密码
• 后端：
  • 使用专门密码哈希算法（如bcrypt）而非普通哈希（如SHA-256）
  • 设置适当的工作因子（建议10+）平衡安全性与性能
  • 每个用户使用独立随机盐值

常见错误

• 使用MD5/SHA-1等快速哈希算法（易被暴力破解）
• 使用全局固定盐值（使盐值失去意义）
• 在前端进行密码哈希（破坏HTTPS保护意义，且暴露哈希逻辑）
• 日志记录密码明文（意外泄露敏感信息）

扩展知识

• 彩虹表：预先计算的哈希对照表，加盐可有效防御
• 慢哈希函数：bcrypt等算法故意设计缓慢以增加暴力破解成本
• OWASP推荐：遵循密码存储规范