前端安全：别让你的网站变成黑客的游乐场
毒舌时刻
这代码写得跟筛子似的，到处都是漏洞。
各位前端同行，咱们今天聊聊前端安全。别告诉我你还在忽略安全问题，那感觉就像在没有锁的房子里放贵重物品——能放，但随时可能被偷。
为什么你需要关注前端安全
最近看到一个项目，直接在前端存储用户密码，没有任何加密措施。我就想问：你是在做网站还是在做慈善？
反面教材
// 反面教材：不安全的代码 function Login() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.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 }) }); const data = await response.json(); // 直接存储 token 在 localStorage localStorage.setItem('token', data.token); }; return ( <form onSubmit={handleSubmit}> <input type="text" placeholder="用户名" value={username} onChange={(e) => setUsername(e.target.value)} /> <input type="password" placeholder="密码" value={password} onChange={(e) => setPassword(e.target.value)} /> <button type="submit">登录</button> </form> ); } export default Login;
毒舌点评：这代码，就像在大街上裸奔，一点隐私都没有。
正确姿势
1. 密码安全
// 正确姿势：密码安全 // 1. 使用 HTTPS // 2. 密码加密传输 function Login() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const handleSubmit = async (e) => { e.preventDefault(); // 使用 HTTPS 传输 const response = await fetch(, { method: , headers: { : }, body: JSON.stringify({ username, password }) }); const data = await response.json(); // 使用 httpOnly cookie 存储 token // 服务端设置: res.cookie(, token, { httpOnly: , secure: }); }; ( <form onSubmit={handleSubmit}> <input = placeholder= value={username} onChange={(e) => setUsername(e.target.value)} /> <input = placeholder= value={password} onChange={(e) => setPassword(e.target.value)} /> <button =>登录</button> </form> ); } default Login;
