前言
在 Web 开发中，安全始终是绕不开的话题。XSS (Cross-Site Scripting) ，即跨站脚本攻击，是 Web 安全领域最常见的攻击手段之一。它不仅能窃取用户的 Cookie，还能伪造用户操作，甚至导致网页挂马。本文将带你拆解 XSS 的各种姿态及其破解之道。
一、 XSS 攻击的本质
攻击者通过在 Web 页面中注入恶意脚本（通常是 JavaScript），使这些脚本在受害者的浏览器上运行。
二、 XSS 的三大攻击姿态
1. 反射型 XSS（Non-Persistent）
- 原理：攻击代码存在于 URL 参数中。攻击者诱导用户点击一个带恶意参数的链接。例如：
http://test.com?q=<script>alert(1)</script>。 - 特点：属于“即时触发”，服务器将参数直接反射回页面执行。
2. 存储型 XSS（Persistent）—— 危害最大
- 原理：恶意代码被保存到了服务器的数据库中。
- 典型场景：论坛评论、用户笔记、博客回复。
- 特点：具有持久性。任何访问该页面的用户都会中招。
- 示例：存在一个博客网站，每一个用户都可以在该博客网站上发表博客，如果攻击者编写一段攻击代码放在评论区中，而服务端不进行处理的话，这段攻击代码就会保存在服务器的数据库中，当其他用户访问该博客时，浏览器就会执行这段攻击代码，就会造成本地cookie的泄露
3. DOM 型 XSS
- 原理：不经过服务端。前端 JS 代码不小心执行了 URL 或本地存储中的恶意数据。
- 典型诱因：直接使用
innerHTML、document.write或eval()处理来源不明的数据。
三、 针对性防范策略
1. 针对反射型与存储型
这两者的共同点是恶意代码都经过了服务端。
-
纯前端渲染：实现前后端分离，HTML 模板中不包含业务数据，数据通过 Ajax 异步获取并由前端安全地填入。
-
转义 HTML（关键） ：对用户输入的数据进行“消毒”。将特殊字符转义为 HTML 实体：
<变为<>变为>&变为&
2. 针对 DOM 型
- 安全编写 JS：尽量使用
textContent或innerText代替innerHTML。 - 慎用 URL 数据：在使用
location.search或location.hash里的数据前，务必进行严格校验。
四、 通用“杀手锏”：底层防护
1. 开启 HttpOnly 标记（最推荐）
在服务器设置 Cookie 时，在末尾加上 HttpOnly 属性。
- 效果：浏览器端的 JavaScript 将无法通过
document.cookie读取到该 Cookie，即便页面被注入了脚本，黑客也拿不到 Token。
2. 设置内容安全策略 (CSP)
通过 HTTP 响应头 Content-Security-Policy 告诉浏览器哪些外部资源（脚本、图片）是可以加载的，从源头封死恶意脚本的加载。
3. 验证码与 IP 绑定
- IP 绑定：将登录态与用户常用的系统 IP 绑定，一旦 IP 剧烈波动，强制失效。
- 验证码：敏感操作（如转账、修改密码）必须强制用户手动输入验证码，防止脚本自动化操作。
4. 总结
核心思想：永远不要信任用户的输入。 所有的输入都应当被视为潜在的威胁进行转义或过滤。
