防御 XSS 的最佳实践

理解 XSS 攻击的本质

XSS（跨站脚本攻击）的核心在于攻击者通过注入恶意脚本到网页中，使其在用户浏览器中执行。这种攻击通常分为三类：存储型、反射型和 DOM 型。存储型 XSS 将恶意代码永久存储在服务器上，反射型 XSS 通过 URL 参数即时反射回页面，而 DOM 型 XSS 则完全在客户端完成攻击。

// 一个典型的反射型 XSS 示例
const search = new URLSearchParams(window.location.search).get('q');
document.getElementById('results').innerHTML = `您搜索的是: ${search}`;

输入验证与过滤

对所有用户输入进行严格验证是防御 XSS 的第一道防线。前端和后端都应实施验证规则，确保输入符合预期格式。

1. 白名单验证：只允许已知安全的字符通过
2. 数据类型验证：确保数字输入确实是数字
3. 长度限制：防止过长的输入导致缓冲区溢出

// 输入验证示例
function sanitizeInput(input) {
  return input.replace(/[<>"'&]/g, ''); // 移除危险字符
}

const userInput = '<script>alert("XSS")</script>';
const safeInput = sanitizeInput(userInput);
console.log(safeInput); // 输出: scriptalert("XSS")/script

输出编码

即使输入被验证过，输出时仍应进行编码。不同的上下文需要不同的编码方式：

1. HTML 上下文：使用 <, > 等实体编码
2. 属性上下文：除 HTML 实体外还需引号编码
3. JavaScript 上下文：使用 Unicode 转义序列
4. URL 上下文：百分号编码

// HTML 编码函数
function htmlEncode(str) {
  return str.replace(/[&<>'"]/g, 
    tag => ({
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      "'": '&#39;',
      '"': '&quot;'
    }[tag]));
}

使用 CSP 策略

内容安全策略（CSP）是强大的防御层，通过 HTTP 头指定哪些资源可以被加载执行：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src *; media-src 'none'

关键指令包括：

• default-src: 默认资源加载策略
• script-src: 控制 JavaScript 执行
• style-src: 控制 CSS 加载
• report-uri: 违规报告地址

安全 Cookie 设置

防止通过 XSS 窃取 Cookie：

// 安全的 Cookie 设置
document.cookie = `sessionId=abc123; Secure; HttpOnly; SameSite=Strict; Path=/; Max-Age=3600`;

重要属性：

• HttpOnly: 阻止 JavaScript 访问
• Secure: 仅通过 HTTPS 传输
• SameSite: 防止 CSRF 攻击

现代框架的安全实践

主流框架如 React、Vue 和 Angular 都内置了 XSS 防护：

// React 自动转义示例
function UserProfile({ username }) {
  // React 会自动转义 userInput
  return <div>{username}</div>;
}

// 危险的情况：使用 dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{ __html: userProvidedHTML }} />

避免危险的 API 和模式

某些 JavaScript API 和模式特别容易导致 XSS：

1. 避免 innerHTML：使用 textContent 代替
2. 谨慎使用 eval()：几乎永远不需要
3. 小心动态脚本创建：确保脚本来源可信
4. 模板字符串风险：不要直接插入未处理数据

// 不安全的做法
element.innerHTML = `<a href="${userProvidedUrl}">点击</a>`;

// 更安全的做法
const a = document.createElement('a');
a.href = sanitizeUrl(userProvidedUrl);
a.textContent = '点击';
element.appendChild(a);

定期安全审计和测试

建立持续的安全检查机制：

1. 自动化扫描：使用 OWASP ZAP 或 Burp Suite
2. 代码审查：重点关注数据处理流程
3. 渗透测试：模拟真实攻击场景
4. 依赖检查：确保第三方库没有已知漏洞

用户教育和社会工程防御

技术措施之外，还需考虑人为因素：

1. 培训开发人员安全编码实践
2. 教育用户识别可疑链接和内容
3. 实现敏感操作的多因素认证
4. 建立安全事件响应流程

防御 DOM 型 XSS 的特殊考虑

DOM 型 XSS 需要特别关注，因为攻击完全在客户端完成：

// 不安全的 DOM 操作
const hash = window.location.hash.substring(1);
document.write(`<div>${hash}</div>`);

// 更安全的处理方式
const hash = window.location.hash.substring(1);
const div = document.createElement('div');
div.textContent = hash;
document.body.appendChild(div);

防御策略：

• 避免使用 document.write()
• 谨慎处理 location 对象的各个属性
• 使用 textContent 而非 innerHTML
• 实现客户端输入验证

处理富文本的特殊情况

对于需要保留 HTML 格式的富文本输入，需要更精细的处理：

// 使用专门的库如 DOMPurify
const clean = DOMPurify.sanitize(dirtyHtml, {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
  ALLOWED_ATTR: ['href', 'title'],
  ALLOWED_URI_REGEXP: /^(https?|mailto):/i
});

关键配置：

• 严格定义允许的标签和属性
• 验证 URL 协议
• 考虑使用 iframe 沙箱隔离危险内容

监控和应急响应

建立有效的监控体系：

1. 实现 CSP 违规报告
2. 日志记录可疑的输入模式
3. 准备应急响应预案
4. 保持安全补丁及时更新

// 报告 CSP 违规
document.addEventListener('securitypolicyviolation', (e) => {
  fetch('/csp-report', {
    method: 'POST',
    body: JSON.stringify({
      violatedDirective: e.violatedDirective,
      blockedURI: e.blockedURI,
      documentURI: e.documentURI,
      timestamp: Date.now()
    })
  });
});