如何防止反射型XSS攻击？

题目

如何防止反射型XSS攻击？

信息

• 类型：问答
• 难度：⭐⭐

考点

XSS攻击原理,输入验证,输出编码,安全响应头

快速回答

防御反射型XSS的核心策略：

• 严格验证用户输入：过滤特殊字符
• 输出编码：根据上下文使用HTML实体编码
• 设置安全响应头：启用Content Security Policy (CSP)
• 避免危险API：如innerHTML/innerText

1. 反射型XSS原理

攻击者构造恶意链接诱导用户点击，服务端未过滤直接将恶意脚本返回到页面执行。例如：

// 恶意URL示例（用户点击后触发弹窗）
https://example.com/search?query=<script>alert(1)</script>

// 服务端危险代码（Node.js示例）
app.get('/search', (req, res) => {
  res.send(`<div>搜索结果：${req.query.query}</div>`); // 直接输出未编码
});

2. 防御措施

2.1 输入验证

在服务器端对输入进行严格校验：

// Node.js验证示例（使用validator库）
const validator = require('validator');

app.get('/search', (req, res) => {
  const query = req.query.query;
  if (!validator.isAlphanumeric(query, 'en-US', {ignore: ' -_'})) {
    return res.status(400).send('非法输入');
  }
  // ...后续处理
});

2.2 输出编码

根据输出位置采用不同编码方式：

• HTML正文：将 < > & " ' 转为实体
• HTML属性：额外编码空格和引号
• JavaScript上下文：使用\xXX格式

// 前端编码示例（使用textContent代替innerHTML）
document.getElementById('result').textContent = userInput;

// 服务端编码（Java示例使用OWASP Encoder）
import org.owasp.encoder.Encode;
String safeOutput = Encode.forHtml(userInput);

2.3 内容安全策略（CSP）

通过HTTP头限制脚本来源：

// Nginx配置示例
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline';";

3. 最佳实践

• 使用现代框架（如React/Angular/Vue）的自动转义机制
• 避免拼接HTML：改用textContent或createElement
• 关键Cookie设置HttpOnly属性
• 定期使用XSS扫描工具（如OWASP ZAP）

4. 常见错误

• 只在客户端验证（可绕过）
• 错误位置编码（如JS中使用HTML编码）
• 过度依赖黑名单（应使用白名单）
• CSP配置过于宽松（如允许unsafe-inline）

5. 扩展知识

• DOM型XSS：客户端直接操作DOM导致，防御需避免eval()等危险方法
• 存储型XSS：恶意脚本存入数据库，需结合数据库过滤
• XSS攻击危害：窃取Cookie、钓鱼攻击、键盘记录等