常见的Web攻击方式有哪些，如何防御？

一、XSS攻击（跨站脚本攻击）

攻击原理：恶意脚本通过用户输入注入页面，分为存储型（数据库持久化）、反射型（URL参数注入）、DOM型（客户端脚本修改）

防御方案：

// 1. 输入过滤（Node.js示例） const xss = require('xss'); const cleanContent = xss(userInput); // 过滤<script>alert(1)</script>等标签 // 2. 设置CSP响应头（Koa中间件示例） app.use(async (ctx, next) => { ctx.set('Content-Security-Policy', "default-src 'self'"); await next(); }); // 3. Cookie设置HttpOnly（Express示例） res.cookie('sessionID', '123', { httpOnly: true, // 禁止JS读取 secure: true // 仅HTTPS传输 });

开发注意点：

富文本场景使用白名单过滤（如xss库）避免innerHTML直接渲染未过滤内容Vue/React等框架默认转义，但v-html/dangerouslySetInnerHTML需特别注意

---

二、CSRF攻击（跨站请求伪造）

攻击场景：用户登录A站后访问B站，B站伪造A站请求进行转账等操作

防御方案：

// 1. CSRF Token方案（Express中间件） // 服务端生成Token app.use((req, res, next) => { res.locals.csrfToken = generateSecureToken(); next(); }); // 前端表单携带 <form action="/transfer" method="POST"> <input type="hidden" name="_csrf" value="<%= csrfToken %>"> </form> // 2. SameSite Cookie（Koa示例） ctx.cookies.set('session', '123', { sameSite: 'strict' // 禁止跨站携带Cookie });

开发建议：

关键操作使用POST+Token双重验证敏感接口添加验证码（如转账确认）避免GET请求修改数据

---

三、点击劫持（Clickjacking）

攻击方式：透明iframe覆盖诱导按钮，诱导用户点击

防御代码：

// 1. 设置X-Frame-Options响应头 ctx.set('X-Frame-Options', 'DENY'); // 2. JS防御（现代浏览器已支持CSP替代） if (top !== self) { top.location = self.location; }

---

四、SQL注入（前端配合方案）

防御要点：虽然主要在后端，但前端需要做好第一道防线

// 1. 输入格式校验（前端正则示例） const isValid = /^[a-zA-Z0-9_]+$/.test(username); if (!isValid) throw new Error('非法字符'); // 2. 配合后端使用参数化查询（Node.js+pg示例） const query = { text: 'SELECT * FROM users WHERE id = $1', values: [userId] // 避免拼接SQL };

---

五、文件上传漏洞

攻击案例：上传.php/.jsp等可执行文件获取服务器权限

防御方案：

// 1. 前端限制（accept属性） <input type="file" accept=".jpg,.png"> // 2. 服务端校验（Node.js+Multer示例） const upload = multer({ fileFilter: (req, file, cb) => { const ext = path.extname(file.originalname); if (!['.jpg', '.png'].includes(ext)) { return cb(new Error('仅支持图片文件')); } cb(null, true); }, filename: (req, file, cb) => { cb(null, Date.now() + '_sanitized' + ext); // 重命名文件 } });

---

六、DDoS/CC攻击（前端配合方案）

防御策略：

# Nginx限流配置（运维层面） limit_req_zone $binary_remote_addr zone=one:10m rate=10r/s; location /api { limit_req zone=one burst=20; } // 前端验证码集成（Google reCAPTCHA示例） <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit"> 提交 </button>

---

最佳实践清单 安全头部标配： Content-Security-Policy: default-src 'self' X-Content-Type-Options: nosniff Strict-Transport-Security: max-age=31536000 依赖库管理： npm audit fix --force # 定期检查漏洞 监控体系： 使用Sentry监控前端异常关键操作日志记录（需脱敏） 渗透测试： 使用OWASP ZAP进行漏洞扫描定期进行安全代码审计

---

以上方案需要根据具体业务场景组合使用，安全防御是持续过程而非一次性工作。

建议建立SDL（安全开发生命周期）流程，从需求阶段开始考虑安全因素。