前端安全问题？XSS和CSRF？

一、XSS（跨站脚本攻击）

🔥 本质

攻击者把恶意 JS 注入到页面里执行。

👉 你的网站，被别人“插代码”

---

🧨 常见类型

1️⃣ 存储型 XSS（最危险）

恶意代码被存进数据库

流程：

1. 攻击者提交评论：

<script>alert('被黑了')</script>

2. 后端存库
3. 用户打开页面 → 代码执行

---

2️⃣ 反射型 XSS

恶意代码在 URL 里

https://test.com?q=<script>alert(1)</script>

后端直接返回到页面 ⇒ 执行

---

3️⃣ DOM 型 XSS

前端自己写出来的漏洞（你最容易踩）

document.body.innerHTML = location.search

---

🛡️ 防御方案（重点！！！）

✅ 1. 转义（最核心）

<div>{userInput}</div>  // React 自动转义 ✔

避免：

<div dangerouslySetInnerHTML={{ __html: html }} />

---

✅ 2. 使用白名单过滤

常用库：

• dompurify

import DOMPurify from 'dompurify'
DOMPurify.sanitize(html)

---

✅ 3. CSP（内容安全策略）

HTTP 头：

Content-Security-Policy: script-src 'self'

👉 禁止外部脚本执行

---

✅ 4. Cookie 设置 HttpOnly

Set-Cookie: token=xxx; HttpOnly

👉 JS 拿不到 cookie ⇒ 防止被盗

---

⚠️ 前端高危点（你要特别注意）

• innerHTML
• dangerouslySetInnerHTML
• URL 参数直接渲染
• 富文本编辑器（最常见）

---

二、CSRF（跨站请求伪造）

🔥 本质

攻击者诱导用户在已登录状态下发起请求

👉 利用“你的身份”去干坏事

---

🧨 攻击流程

1. 用户登录了银行网站（cookie 已存在）
2. 打开恶意网站
3. 自动发请求：

<img src="https://bank.com/transfer?money=1000" />

👉 浏览器自动带 cookie
👉 银行以为是你操作的

---

🛡️ 防御方案（重点！！！）

✅ 1. CSRF Token（最有效）

流程：

1. 服务端生成 token
2. 前端请求时带上

axios.post('/api', data, {
  headers: {
    'X-CSRF-Token': token
  }
})

👉 攻击者拿不到 token ⇒ 无法伪造

---

✅ 2. SameSite Cookie（现代推荐）

Set-Cookie: session=xxx; SameSite=Strict

作用：

值	说明
Strict	完全禁止跨站
Lax	部分允许（推荐）

---

✅ 3. 验证 Referer / Origin

后端校验：

Origin: https://yourdomain.com

---

✅ 4. 避免 GET 修改数据

❌ 错误：

GET /deleteUser?id=1

✔ 正确：

POST /deleteUser

---

三、XSS vs CSRF 对比（面试高频）

	XSS	CSRF
本质	注入 JS	伪造请求
攻击对象	用户浏览器	服务器
是否需要登录	❌ 不一定	✅ 必须
是否执行 JS	✅	❌
主要防御	转义 / CSP	Token / SameSite

---

四、结合你实际开发（重点建议 🚀）

你做 React / Vue + axios，可以这样落地：

✅ axios 全局加 CSRF

axios.interceptors.request.use(config => {
  config.headers['X-CSRF-Token'] = getToken()
  return config
})

---

✅ 富文本必须过滤

DOMPurify.sanitize(content)

---

✅ 不信任任何输入

包括：

• URL 参数
• 表单输入
• 后端返回数据（是的，也要防）

---

五、一句话总结（面试用）

👉 XSS：让页面执行恶意 JS
👉 CSRF：让用户“在不知情下”发请求