Web安全防护实战：从XSS到CSRF的完整防御方案

系统梳理Web安全的核心威胁和防御策略，包含XSS、CSRF、SQL注入、点击劫持等常见攻击的防护方案

张三

2024/1/22 · 14分钟 · 324 · 28

Web安全XSSCSRF网络安全前端

Web安全防护实战指南

Web安全是每个开发者必须掌握的核心技能。本文将帮你建立完整的安全防护体系。

🎯 XSS攻击防护

1. 反射型XSS

// ❌ 危险做法
element.innerHTML = userInput;

// ✅ 安全做法
element.textContent = userInput;
// 或使用DOMPurify
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInput);

2. 存储型XSS

// 输入验证
function sanitizeInput(input) {
  return input.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
}

// Content Security Policy
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' 'unsafe-inline'">

🛡️ CSRF防护

Token验证

// 后端生成CSRF Token
app.use((req, res, next) => {
  res.locals.csrfToken = generateCSRFToken();
  next();
});

// 前端验证
fetch('/api/data', {
  method: 'POST',
  headers: {
    'X-CSRF-Token': getCSRFToken(),
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});

// 设置SameSite属性
app.use(session({
  cookie: {
    sameSite: 'strict',
    secure: true
  }
}));

🔐 其他安全威胁

SQL注入防护

// ❌ 危险做法
const query = `SELECT * FROM users WHERE id = ${userId}`;

// ✅ 安全做法 - 使用参数化查询
const query = 'SELECT * FROM users WHERE id = ?';
db.query(query, [userId]);

点击劫持防护

// X-Frame-Options
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  next();
});

// 或使用CSP
<meta http-equiv="Content-Security-Policy" 
      content="frame-ancestors 'none'">

🚨 安全检测工具

自动化扫描

OWASP ZAP: 开源Web应用安全扫描器
Burp Suite: 专业Web安全测试工具
SonarQube: 代码安全质量检测

手动测试

// 安全测试Payload
const xssPayloads = [
  '<script>alert("XSS")</script>',
  '<img src=x onerror=alert("XSS")>',
  'javascript:alert("XSS")'
];

// 自动化测试
function testXSS(input) {
  return xssPayloads.some(payload => 
    input.includes(payload)
  );
}

📊 安全最佳实践

前端安全清单

后端安全清单

🎪 实战案例

构建安全API

// 安全中间件
app.use(helmet());
app.use(rateLimit({
  windowMs: 15 * 60 * 1000, // 15分钟
  max: 100 // 限制每个IP 100次请求
}));

// 输入验证
app.post('/api/user', [
  body('email').isEmail().normalizeEmail(),
  body('password').isLength({ min: 8 })
], (req, res) => {
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ errors: errors.array() });
  }
  // 处理用户创建
});