前端安全：XSS、CSRF攻击与防御
大家好，我是欧阳瑞（Rich Own）。今天想和大家聊聊前端安全这个重要话题。作为一个全栈开发者，我深知前端安全的重要性。一个小小的漏洞可能会导致用户数据泄露、账户被盗甚至整个系统被攻击。
为什么前端安全很重要？
前端是用户与应用交互的第一道防线。随着Web应用越来越复杂，前端安全问题也越来越突出。根据OWASP Top 10，注入攻击（包括XSS）和身份认证失效是最常见的安全风险。
XSS攻击详解
什么是XSS？
XSS（Cross-Site Scripting）跨站脚本攻击，是一种允许攻击者在网页中注入恶意脚本的攻击方式。
XSS的类型
| 类型 | 描述 | 示例场景 |
|---|---|---|
| 存储型XSS | 恶意脚本被存储在服务器 | 论坛帖子、评论区 |
| 反射型XSS | 恶意脚本通过URL参数传递 | 搜索页面、URL参数 |
| DOM型XSS | 恶意脚本通过DOM操作执行 | 客户端JavaScript |
存储型XSS示例
// 攻击者在评论区输入 <script>alert('XSS')</script> // 如果后端没有过滤，这条评论会被存储到数据库 // 其他用户访问时，脚本会被执行反射型XSS示例
// URL: http://example.com/search?query=<script>alert('XSS')</script> // 如果前端直接使用URL参数 const query = new URLSearchParams(window.location.search).get('query'); document.getElementById('results').innerHTML = `搜索结果: ${query}`; // 脚本会被执行DOM型XSS示例
// 前端代码 const userInput = localStorage.getItem('theme'); document.body.innerHTML = `<div class="${userInput}">Content</div>`; // 如果用户输入: "dark"><script>alert('XSS')</script><div class="light" // 脚本会被执行XSS防御策略
1. 输出编码
// 使用textContent而不是innerHTML const userInput = '<script>alert("XSS")</script>'; document.getElementById('output').textContent = userInput; // 使用DOMPurify清理HTML import DOMPurify from 'dompurify'; const cleanHTML = DOMPurify.sanitize(userInput); document.getElementById('output').innerHTML = cleanHTML;2. 输入验证
// 验证邮箱格式 function validateEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(email); } // 验证URL function validateURL(url) { try { const urlObj = new URL(url); return urlObj.protocol === 'https:'; } catch { return false; } }3. 使用CSP（内容安全策略）
<!-- 在HTML头部设置CSP --> <meta http-equiv="Content-Security-Policy" content=" default-src 'self'; script-src 'self' 'strict-dynamic'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; ">4. HttpOnly和Secure Cookie
// 设置HttpOnly和Secure属性 document.cookie = 'session=abc123; HttpOnly; Secure; SameSite=Strict';CSRF攻击详解
什么是CSRF？
CSRF（Cross-Site Request Forgery）跨站请求伪造，是一种利用用户已登录状态发起非预期请求的攻击方式。
CSRF攻击流程
1. 用户登录正常网站A 2. 网站A设置登录Cookie 3. 用户在未退出的情况下访问恶意网站B 4. 恶意网站B发送请求到网站A 5. 浏览器自动带上Cookie 6. 网站A误以为是用户的正常请求CSRF攻击示例
<!-- 恶意网站上的图片标签 --> <img src="http://bank.com/transfer?to=attacker&amount=1000" width="0" height="0"> <!-- 用户访问恶意网站时，浏览器会自动发送请求 -->CSRF防御策略
1. 使用CSRF Token
// 后端生成Token app.get('/csrf-token', (req, res) => { const token = generateToken(); req.session.csrfToken = token; res.send(token); }); // 前端获取并使用Token const token = await fetch('/csrf-token').then(res => res.text()); // 在请求中带上Token fetch('/transfer', { method: 'POST', headers: { 'X-CSRF-Token': token, 'Content-Type': 'application/json' }, body: JSON.stringify({ to: 'friend', amount: 100 }) }); // 后端验证Token app.post('/transfer', (req, res) => { if (req.headers['x-csrf-token'] !== req.session.csrfToken) { return res.status(403).send('Invalid CSRF token'); } // 处理请求 });2. 使用SameSite Cookie
// 设置SameSite属性 document.cookie = 'session=abc123; SameSite=Strict'; // 或 document.cookie = 'session=abc123; SameSite=Lax';3. 验证Referer头
app.post('/transfer', (req, res) => { const referer = req.headers.referer; if (!referer || !referer.startsWith('https://yourdomain.com')) { return res.status(403).send('Invalid referer'); } // 处理请求 });4. 使用双重验证
// 对于敏感操作，要求用户再次验证 async function transferMoney() { const password = prompt('请输入密码确认转账'); if (!password) return; const response = await fetch('/transfer', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ to: 'friend', amount: 100, password }) }); }其他前端安全问题
点击劫持
<!-- 恶意网站使用iframe嵌入目标网站 --> <iframe src="http://bank.com" style="opacity:0; position:absolute; top:0; left:0; width:100%; height:100%"></iframe> <!-- 用户点击时，实际上点击的是iframe中的按钮 -->防御：
<!-- 设置X-Frame-Options --> <meta http-equiv="X-Frame-Options" content="DENY"> <!-- 或使用JavaScript检测 --> if (window !== window.top) { window.top.location = window.location; }敏感信息泄露
// 不好的做法：在前端存储敏感信息 localStorage.setItem('apiKey', 'sk-123456'); // 好的做法：只存储非敏感信息 localStorage.setItem('theme', 'dark');不安全的第三方库
// 使用npm时检查依赖安全性 npm audit // 使用安全的CDN资源 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-..." crossorigin="anonymous"></script>安全开发最佳实践
1. 使用安全的框架和库
// React会自动转义HTML function UserInput({ text }) { return <div>{text}</div>; // 自动转义 } // Vue也会自动转义 <p>{{ userInput }}</p> <!-- 自动转义 -->2. 实施安全的开发流程
1. 代码审查：每个PR必须经过安全审查 2. 自动化测试：使用OWASP ZAP进行扫描 3. 安全培训：定期进行安全培训 4. 漏洞响应：建立漏洞上报和修复流程3. 使用安全工具
# 使用ESLint进行安全检查 npm install eslint eslint-plugin-security # 使用npm audit检查依赖漏洞 npm audit # 使用Snyk进行持续安全监控 npx snyk test实战案例：安全的评论系统
// 安全的评论系统实现 class CommentSystem { constructor() { this.comments = []; } addComment(userInput) { // 1. 输入验证 if (!userInput || userInput.length > 1000) { throw new Error('Invalid comment'); } // 2. 输出编码 const sanitizedInput = this.sanitize(userInput); // 3. 添加到列表 this.comments.push({ id: Date.now(), content: sanitizedInput, timestamp: new Date() }); } sanitize(input) { // 使用DOMPurify清理 return DOMPurify.sanitize(input, { ALLOWED_TAGS: ['b', 'i', 'u', 'a'], ALLOWED_ATTR: ['href'] }); } renderComments() { const container = document.getElementById('comments'); container.innerHTML = ''; this.comments.forEach(comment => { const div = document.createElement('div'); div.innerHTML = comment.content; // 已经过清理 container.appendChild(div); }); } }总结
前端安全是一个持续的过程，需要我们时刻保持警惕。常见的XSS和CSRF攻击虽然可怕，但只要采取正确的防御措施，就能有效保护我们的应用和用户。
我的鬃狮蜥Hash对安全也有自己的理解——它总是选择最安全的角落晒太阳，远离可能的危险。这和我们做安全开发的道理是一样的。
如果你有前端安全方面的问题，欢迎留言交流！我是欧阳瑞，极客之路，永无止境！
技术栈：JavaScript · DOMPurify · CSP · OWASP
