前端安全：别让你的网站变成黑客的游乐场
前端安全：别让你的网站变成黑客的游乐场
毒舌时刻
这代码写得跟筛子似的，到处都是漏洞。
各位前端同行，咱们今天聊聊前端安全。别告诉我你还在忽略安全问题，那感觉就像在没有锁的房子里放贵重物品——能放，但随时可能被偷。
为什么你需要关注前端安全
最近看到一个项目，直接在前端存储用户密码，没有任何加密措施。我就想问：你是在做网站还是在做慈善？
反面教材
// 反面教材：不安全的代码 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('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); const data = await response.json(); // 使用 httpOnly cookie 存储 token // 服务端设置: res.cookie('token', token, { httpOnly: true, secure: true }); }; 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; 2. XSS 防护
// 正确姿势：XSS 防护 // 1. 使用 dangerouslySetInnerHTML 时要小心 // 2. 对用户输入进行转义 function CommentList({ comments }) { return ( <div> {comments.map(comment => ( <div key={comment.id}> {/* 安全的方式：直接渲染文本 */} <p>{comment.content}</p> {/* 不安全的方式 */} {/* <p dangerouslySetInnerHTML={{ __html: comment.content }} /> */} </div> ))} </div> ); } // 后端转义 // server.js app.post('/api/comments', (req, res) => { const { content } = req.body; // 转义用户输入 const escapedContent = escapeHtml(content); // 存储转义后的内容 db.insert({ content: escapedContent }); res.json({ success: true }); }); function escapeHtml(text) { return text .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } 3. CSRF 防护
// 正确姿势：CSRF 防护 // 1. 使用 CSRF token // 2. 验证 Origin/Referer 头 function Form() { const [csrfToken, setCsrfToken] = React.useState(''); React.useEffect(() => { // 从服务端获取 CSRF token async function getCsrfToken() { const response = await fetch('/api/csrf-token'); const data = await response.json(); setCsrfToken(data.token); } getCsrfToken(); }, []); const handleSubmit = async (e) => { e.preventDefault(); const response = await fetch('/api/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken }, body: JSON.stringify({ /* 表单数据 */ }) }); const data = await response.json(); console.log(data); }; return ( <form onSubmit={handleSubmit}> <input type="hidden" name="_csrf" value={csrfToken} /> {/* 表单字段 */} <button type="submit">提交</button> </form> ); } // 服务端验证 // server.js app.post('/api/submit', (req, res) => { const csrfToken = req.headers['x-csrf-token'] || req.body._csrf; if (!csrfToken || !validateCsrfToken(csrfToken)) { return res.status(403).json({ error: 'CSRF token invalid' }); } // 处理请求 res.json({ success: true }); }); 4. 依赖安全
// 正确姿势：依赖安全 // 1. 定期更新依赖 // 2. 使用 npm audit 检查漏洞 // 3. 使用 Snyk 等工具监控 // package.json { "name": "my-app", "version": "1.0.0", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "scripts": { "audit": "npm audit", "update": "npm update" } } // 运行命令 // npm run audit // npm run update 毒舌点评：这才叫前端安全，让你的网站固若金汤，再也不用担心黑客攻击了。
