常见的 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>

最佳实践清单

1. 安全头部标配：

Content-Security-Policy: default-src 'self'
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000

1. 依赖库管理：

npm audit fix --force # 定期检查漏洞

1. 监控体系：

• 使用Sentry监控前端异常
• 关键操作日志记录（需脱敏）

1. 渗透测试：

• 使用OWASP ZAP进行漏洞扫描
• 定期进行安全代码审计

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

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