XSS 攻击

一、XSS 攻击的本质与原理

XSS 是攻击者通过注入恶意 JavaScript 代码到网页中，当用户访问该页面时，脚本在用户浏览器中执行，从而窃取信息（如 Cookie）、伪造操作或劫持会话的攻击方式。
核心原理：利用网页对用户输入的“未验证/未过滤”，导致恶意代码被当作正常内容渲染执行。

二、三大类型及典型场景

类型	特点	场景示例
存储型 XSS	恶意代码被存储到服务器（如数据库）	论坛评论区注入脚本，所有查看者触发
反射型 XSS	代码通过 URL 参数传入，服务器“反射”回页面	钓鱼链接：?search=<script>...</script>
DOM 型 XSS	纯前端解析漏洞，不经过服务器	前端用 innerHTML 插入 URL 中的恶意代码

三、防御核心策略（多层次防护）

1. 输入过滤：拒绝“脏数据”

• 前端：限制输入格式（如禁止特殊字符），但仅作辅助（不可信任前端验证）。
• 后端：强制过滤，使用成熟库（如 DOMPurify）清理 HTML 标签、事件属性（onclick、onload 等）和 javascript: 伪协议。
  示例（Node.js）：

  import DOMPurify from 'dompurify';
  const safeContent = DOMPurify.sanitize(userInput); // 移除危险代码
  

2. 输出编码：安全渲染“干净数据”

• HTML 场景：渲染时自动编码特殊字符（<→<，>→>）。
  • Vue/React 框架默认对 {{ }}/{} 插值编码，避免直接用 v-html/dangerouslySetInnerHTML。
• 属性/URL 场景：动态拼接 src/href 时，用 encodeURIComponent 编码参数。

3. 安全机制：加固浏览器防护

• Cookie 保护：
  • HttpOnly: true：禁止 JS 读取 Cookie（防会话劫持）；
  • SameSite: Strict：限制跨站发送 Cookie；
  • Secure: true：仅 HTTPS 传输。
• CSP（内容安全策略）：
  通过响应头限制脚本来源：

  Content-Security-Policy: script-src 'self'; object-src 'none'
  

  禁止加载外部脚本，从根源阻止恶意代码执行。
• 禁用危险 API：用 textContent 替代 innerHTML，避免 document.write。

四、框架使用注意事项

Vue/React 并非“免 XSS”：

• 安全场景：{{ content }} 渲染（自动编码）。
• 风险场景：
  • v-html/dangerouslySetInnerHTML 直接插入 HTML；
  • 动态拼接 href="javascript:..." 等危险属性。

五、实战案例（评论系统）

1. 后端用 DOMPurify 过滤评论内容，移除 <script> 和事件属性；
2. 前端用 Vue 的 {{ comment }} 渲染，拒绝 v-html；
3. 配置 CSP：script-src 'self' 禁止外部脚本；
4. 登录 Cookie 设 HttpOnly: true 和 SameSite: Strict。

六、总结

“XSS 防御的核心是‘不信任任何输入’，需结合输入过滤、输出编码和浏览器安全机制：

• 存储型 XSS 重点在服务器过滤和 CSP；
• DOM 型 XSS 需前端避免危险 API 和动态拼接；
• 框架默认防护有限，需手动处理 v-html 等场景。
  项目中通过‘后端过滤+前端安全渲染+Cookie 加固’，可有效抵御绝大多数 XSS 攻击。”