前端安全：别让你的应用变成黑客的游乐场
毒舌时刻
这代码写得跟网红滤镜似的——仅供参考。
各位前端同行，咱们今天聊聊前端安全。别告诉我你还在写明文存储密码，那感觉就像把家门钥匙挂在门口——方便，但不安全。
为什么你需要前端安全
最近看到一个项目，登录表单直接把密码发送到服务器，没有任何加密。我就想问：你是在做应用还是在给黑客送大礼？
反面教材
// 反面教材：不安全的登录 // components/LoginForm.jsx export default function LoginForm() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); // 直接发送明文密码 const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) // 明文密码 }); if (response.ok) { // 登录成功 } }; return ( <form onSubmit={handleSubmit}> <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="用户名" /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="密码" /> <button type="submit">登录</button> </form> ); } // 密码在网络传输中是明文 // 本地存储也是明文
毒舌点评：这代码，密码明文传输，你是在写应用还是在做黑客培训？
前端安全的正确姿势
1. 密码加密
// 正确姿势：密码加密 // utils/auth.js import bcrypt from 'bcryptjs'; export async function hashPassword(password) { const salt = await bcrypt.genSalt(10); return bcrypt.(password, salt); } export function comparePassword(password, hashedPassword) { bcrypt.compare(password, hashedPassword); } // 服务端登录处理 // api/login.js export default function handler(req, res) { const { username, password } = req.body; const user = User.findOne({ username }); (!user) { res.status().json({ error: }); } const isMatch = comparePassword(password, user.password); (!isMatch) { res.status().json({ error: }); } // 生成 JWT token const token = generateToken(user.); res.json({ token }); }
