前端安全必修课：XSS与CSRF攻击，到底差在哪？

XSS（跨站脚本攻击）和CSRF（跨站请求伪造）
作为前端开发者，“XSS”和“CSRF”是绕不开的安全关键词。很多新手容易把这两种攻击混为一谈——毕竟都带“跨站”，又都是针对Web应用的攻击手段。但实际上，二者的攻击原理、目标和防护方式天差地别。这篇文章就用通俗的语言拆解它们的核心区别，帮你彻底搞懂这两种最常见的前端安全威胁。

一、先搞懂：什么是XSS攻击？

XSS的全称是跨站脚本攻击（Cross-Site Scripting），为了和CSS（层叠样式表）区分，业界简称XSS。

核心原理（通俗比喻）

就像你去餐厅吃饭，攻击者偷偷往你的餐盘里放了一颗变质的糖果，你吃下去（浏览器执行脚本）就会出问题。
本质是：攻击者往Web页面中注入恶意JavaScript代码，当用户访问该页面时，恶意代码会在用户的浏览器中自动执行。

常见类型（按危害程度排序）

1. 存储型XSS：最危险的类型。恶意脚本被永久存储到服务器（比如评论区、留言板、用户资料页），所有访问该页面的用户都会中招（比如某论坛的恶意评论）。
2. 反射型XSS：恶意脚本通过URL传递，只有点击特定钓鱼链接的用户会中招（比如https://xxx.com?name=<script>偷Cookie的代码</script>）。
3. DOM型XSS：不经过服务器，直接通过前端DOM操作注入恶意脚本（比如用innerHTML渲染用户输入的内容），属于前端自身的漏洞。

攻击后果

窃取用户Cookie、劫持用户登录会话、篡改页面内容（比如仿冒登录框）、诱导用户转账/输入密码等。

核心防护方式

• 输入/输出过滤：转义特殊字符（如<、>、&、"等），比如把<script>转成<script>；
• 禁用危险API：优先用textContent代替innerHTML，避免使用eval、setTimeout执行字符串；
• 配置安全属性：给Cookie加HttpOnly（防止JS读取Cookie），开启CSP（内容安全策略）限制脚本执行来源；
• 前端校验+后端校验：前端做基础过滤，后端必须二次校验（前端校验可被绕过）。

二、再理解：什么是CSRF攻击？

CSRF的全称是跨站请求伪造（Cross-Site Request Forgery），也被称为“一键式攻击”。

核心原理（通俗比喻）

你登录了银行APP（已授权，服务器保存了你的登录会话），攻击者骗你点击了一个链接，这个链接偷偷向银行服务器发送了“转账1000元”的请求。银行以为是你本人操作，就执行了转账——攻击者没偷你的密码，只是“借”了你的已登录身份。
本质是：攻击者诱导已登录的用户，在不知情的情况下向目标网站发送恶意请求，利用用户的身份权限完成非法操作。

常见攻击场景

• 诱导用户点击邮件/短信里的恶意链接；
• 在恶意网站嵌入<img src="https://xxx.com/transfer?money=1000">（图片加载时自动发送GET请求）；
• 利用iframe嵌套目标网站，诱导用户点击隐藏的按钮。

攻击后果

冒充用户发帖子、转账、修改密码、删除数据等（完全取决于用户在目标网站的权限）。

核心防护方式

• 加CSRF Token：每个请求附带随机生成的令牌，服务器验证令牌是否有效（核心方案）；
• 验证请求来源：检查请求的Referer/Origin字段，确认请求来自合法域名；
• 配置Cookie的SameSite属性：限制Cookie跨站发送（如设置为SameSite=Lax/Strict）；
• 敏感操作二次验证：比如转账、改密码时要求输入验证码/支付密码。

三、核心区别：一张表看懂XSS vs CSRF

四、容易混淆的关键提醒

1. 都带“跨站”，但目的不同：XSS是“跨站注入脚本”，CSRF是“跨站伪造请求”；
2. 都利用用户身份，但方式不同：XSS是直接窃取用户身份凭证（如Cookie），CSRF是借用用户已有的登录会话；
3. 防护逻辑完全不同：XSS是“堵漏洞，不让恶意代码跑”，CSRF是“验身份，确认是用户本人操作”。

总结

1. XSS的核心是脚本注入与执行，攻击发生在客户端浏览器，防护重点是过滤恶意输入、限制脚本执行；
2. CSRF的核心是请求伪造与身份冒用，攻击针对服务器，防护重点是验证请求合法性、防止身份被滥用；
3. 二者虽同属跨站攻击，但原理和防护逻辑完全不同，前端开发中需针对性做好防护，才能有效保障Web应用的安全。