XSS攻击 是什么？

XSS（Cross-Site Scripting，跨站脚本攻击） 是一种常见的 Web 安全漏洞，攻击者将恶意脚本注入到网页中，当其他用户浏览该页面时，恶意脚本会在用户的浏览器中执行。

攻击原理

用户输入恶意代码 → 网站未过滤直接存储/显示 → 其他用户访问时执行恶意代码

三种主要类型

1. 反射型 XSS（非持久型）

恶意代码藏在 URL 参数中，服务器未过滤直接返回给用户。

示例链接：https://example.com/search?q=<script>alert('XSS')</script>
用户点击后，脚本在浏览器中执行

2. 存储型 XSS（持久型）

恶意代码被存储到服务器数据库，每次访问页面都会执行。

用户在评论区提交：<script>盗取cookie</script>
后续所有访问该页面的用户都会被执行该脚本

3. DOM 型 XSS

恶意代码通过修改页面 DOM 结构执行，不经过服务器。

前端代码直接使用 location.hash 或 document.write 拼接用户输入

攻击者能做什么

危害 说明
窃取 Cookie 获取用户登录凭证，冒充用户操作
盗取敏感信息 获取表单数据、个人资料等
页面篡改 修改页面内容，植入虚假信息
钓鱼攻击 伪造登录框骗取账号密码
键盘记录 记录用户输入的所有内容

防御措施

1. 输入过滤

// 对用户输入进行转义
function escapeHtml(str) {
    return str
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;')
}

2. 输出编码

在渲染用户内容时，使用安全的编码方式：

  • HTML 实体编码
  • URL 编码
  • JavaScript 编码

3. Content Security Policy（CSP）

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

4. HttpOnly Cookie

设置 Cookie 为 HttpOnly，使 JavaScript 无法读取：

Set-Cookie: sessionId=abc123; HttpOnly

5. 使用框架自带防护

  • React 默认转义 JSX 中的变量
  • Vue 使用 {{ }} 插值会自动转义
  • 需要使用 v-html 时务必确保内容安全

Vue 中的注意事项

<!-- ✅ 安全：Vue 自动转义 -->
<div>{{ userInput }}</div>

<!-- ⚠️ 危险：直接输出原始 HTML -->
<div v-html="userInput"></div>

<!-- ✅ 安全做法：使用前过滤 -->
<div v-html="sanitizeHtml(userInput)"></div>

总结

XSS 就是攻击者往网页里塞了一段恶意脚本，让别人的浏览器替他去干坏事。 防御核心原则：永远不要信任用户输入，对所有外部数据进行过滤和转义。