如何防止和修复跨站脚本攻击（XSS）？

题目

如何防止和修复跨站脚本攻击（XSS）？

信息

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

考点

XSS攻击原理,防御措施,编码实践

快速回答

防止XSS的核心是对不可信数据进行严格编码：

• 在HTML上下文中使用HTML实体编码
• 在JavaScript上下文中使用Unicode转义
• 在URL参数中使用URL编码
• 启用CSP（内容安全策略）
• 避免使用innerHTML等危险API

一、XSS攻击原理

跨站脚本攻击（XSS）是攻击者向网页注入恶意脚本（通常为JavaScript），当其他用户访问该页面时脚本执行，可能导致：

• 窃取用户会话Cookie
• 劫持用户账户
• 钓鱼攻击
• 传播恶意软件

示例攻击场景：

<!-- 未过滤的用户输入直接输出 -->
<div>
  <!-- 用户输入：<script>stealCookie()</script> -->
  <script>alert('XSS!')</script>
</div>

二、防御措施与最佳实践

1. 上下文相关编码

• HTML内容编码：将特殊字符转为HTML实体

  function encodeHTML(str) {
    return str.replace(/[&<>"']/g, 
      char => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;'
      }[char]));
  }
  // 输出：&lt;script&gt;alert(1)&lt;/script&gt;

• JavaScript上下文：使用Unicode转义

  const userInput = '\';alert(1);//';
  const script = `var data = '${userInput.replace(/[\\'"]/g, '\\$&')}';`;
  // 输出：var data = '\\';alert(1);//';

• URL参数：使用encodeURIComponent

  const userURL = 'javascript:alert(1)';
  const safeURL = `https://example.com?redirect=${encodeURIComponent(userURL)}`;
  // 输出：https://example.com?redirect=javascript%3Aalert(1)

2. 内容安全策略（CSP）

通过HTTP头限制脚本来源：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;

阻止内联脚本执行，有效缓解XSS影响。

3. 安全API使用

• 避免使用innerHTML，改用textContent
• 使用安全的模板框架（如React的自动转义）

三、常见错误

• 部分编码：仅在客户端编码而忽略服务端
• 错误上下文：在JavaScript中使用HTML编码
• 过度信任库函数：如$.html()同样危险
• 忽略DOM型XSS：如location.hash未过滤

四、扩展知识

• XSS分类：存储型（持久化）、反射型（URL参数）、DOM型（客户端解析）
• 现代框架防护：React/Vue默认转义插值表达式，但dangerouslySetInnerHTML需谨慎使用
• 自动化工具：使用OWASP ZAP或Burp Suite进行XSS扫描

五、修复示例

<!-- 漏洞代码 -->
<div>${userContent}</div>

<!-- 修复方案 -->
<div>${encodeHTML(userContent)}</div>
<!-- 同时设置CSP头 -->