🌋 前言：前端安全是个什么鬼？
想象你在海滩边写一个 Next.js 应用，API、登录、数据全都顺风顺水，突然来了个陌生请求，把你用户的 session 偷了。没错------那就是 CSRF（跨站请求伪造） 在作祟。而另一边，用户输入 <script> 标签在页面上弹出你的名字，这就是 XSS（跨站脚本攻击） 的优雅登场。
现代 Web 应用安全就像玩一场塔防游戏：攻击者只要找到一条缝，你的城堡就塌了。
🧱 一、CSRF：当用户被"借刀杀人"
"你点的是猫猫视频，发的却是转账请求。"
🔍 原理回顾（用人话讲）
CSRF 攻击的核心思想很简单：攻击者诱导用户浏览他们的恶意网站，从而"借"用户的登录凭证（通常是 Cookie），向真正的网站发起请求。
比如用户已登录 bank.com，攻击者在自己的网站上藏了段：
ini
<img src="https://bank.com/transfer?to=hacker&amount=9999" />用户一打开，浏览器乖乖带上了 Cookie，银行以为是你本人发起的请求 🤡
🧰 两步护法：Next.js + csurf
🧩 Step1：安装依赖
npm install csurf cookie-parser🧩 Step2：配置中间件
在 pages/api/_middleware.js 或 Next 13+ 的 middleware.ts 中加入配置逻辑：
javascript
import { NextResponse } from 'next/server';
import csurf from 'csurf';
import cookieParser from 'cookie-parser';
import express from 'express';
const app = express();
app.use(cookieParser());
app.use(csurf({ cookie: true }));
export const config = {
matcher: ['/api/:path*'],
};
export function middleware(req) {
// 可以在此加入 token 注入逻辑
return NextResponse.next();
}💡 提示：CSRF Token 就像访客通行证，每次请求都验证身份，防止"伪装者"。
🕹️ CSRF Token 的工作流程
| 阶段 | 行为 |
|---|---|
| 🧙 生成 | 服务端为每个会话发一个 Token |
| 🧾 注入 | 前端表单请求时带上这个 Token |
| 🔍 验证 | 后端验证 Token 是否匹配 |
| ✅ 通过 | 如果匹配，请求被允许执行 |
你可以这么理解：
"服务端说，我送你一张签名卡，只有我认得的签名卡；你下次来买面包得出示这张卡，否则我打死也不认你。"
🦠 二、XSS：从 <script> 到失控的前端世界
"你以为你在输出 JSON，实际上是在输出一场灾难。"
🐍 XSS 攻击的本质
当用户输入的内容没有被安全过滤，最终被原样渲染在页面上时------攻击者就能注入脚本执行：
ini
const comment = "<script>alert('你被骗了')</script>";
document.body.innerHTML = comment;这就像你让用户在表单写留言，结果 TA 在留言板上开启了天眼通。
🛡️ 用 helmet 给页面加上"头盔"
helmet 是一个 Express 中间件，用来设置各种 HTTP 安全头，阻止常见攻击。
🧩 Step1：安装依赖
npm install helmet🧩 Step2：配置 next.config.js 或自定义服务器
php
import helmet from 'helmet';
import express from 'express';
import next from 'next';
const app = next({ dev: true });
const server = express();
const handle = app.getRequestHandler();
server.use(helmet({
contentSecurityPolicy: {
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "'unsafe-inline'"],
imgSrc: ["'self'", "data:"],
},
},
referrerPolicy: { policy: 'no-referrer' },
}));
server.all('*', (req, res) => handle(req, res));
server.listen(3000);🧠 Tip：CSP（内容安全策略）是浏览器的防护罩，用它限制脚本与外部资源来源，阻止第三方注入。
📋 三、安全清单：Next.js 项目部署前必查表 ✅
| 项 | 检查点 | 是否完成 |
|---|---|---|
| 🔐 CSRF | csurf 已配置并验证 token |
☐ |
| 🧱 XSS | 已使用 helmet / CSP |
☐ |
| 🍪 Cookie | SameSite=strict、HttpOnly、Secure |
☐ |
| 🕵️♂️ 输入验证 | 所有用户输入清理与转义 | ☐ |
| 🚷 CORS | 限制跨域来源 | ☐ |
| 🚨 错误信息 | 不在生产输出敏感堆栈信息 | ☐ |
| 🧰 OWASP | 对照 OWASP Cheat Sheet 检查 | ☐ |
📚 四、参考：OWASP Cheat Sheet 系列（建议收藏）
| 主题 | 推荐阅读 |
|---|---|
| 🔒 CSRF 防护 | OWASP CSRF Prevention Cheat Sheet |
| ⚔️ XSS 防护 | OWASP XSS Prevention Cheat Sheet |
| 🧩 安全头 | OWASP Secure Headers Project |
🎨 五、彩蛋：一张简化安全架构脑图（ASCII 版）
css
🧑 用户浏览器
│
[CSRF Token 验证]
│
┌───► Next.js API Route ◄───┐
│ │
[helmet安全头] [输入过滤]
│ │
[Express Server] [数据库安全层]
│ │
└────→ 🌐 安全的数据流 ───┘🧩 结语：安全，就像代码审美
"代码干净是一种修养，安全意识是一种责任。"
CSRF 与 XSS 看似不起眼，却能敲开整个系统的大门。希望在实现酷炫功能的同时，你能戴上安全的头盔、举起防御的盾牌，让前端世界优雅且坚固。