前几天刷到快手被黑客攻击的新闻。
作为一个写了几年代码的前端，说实话，看到这种新闻第一反应是：这跟我有什么关系？安全不是后端和运维的事吗？
但仔细想想，XSS、CSRF、点击劫持... 这些攻击的入口，不都在前端吗？
我们每天写的代码，可能就藏着下一个漏洞。
前端真的需要懂安全吗？
说几个真实场景：
- 用户输入直接
innerHTML渲染 → XSS 漏洞 - 表单提交没有 CSRF Token → 跨站请求伪造
- 敏感操作只做前端权限校验 → 越权访问
- JWT 存 localStorage 且不校验签名 → Token 被篡改
这些都是前端代码层面的问题，后端再怎么加固也防不住。
安全不是某个岗位的事，是整个链路的事。
于是我做了一个安全实验平台
与其纸上谈兵，不如亲手攻击一次。
我花了一些时间，做了一个可交互的 Web 安全实验平台，覆盖 14 种常见漏洞，每个都能亲手操作攻击 + 学习防御。
🔗 在线体验：web-security-lab-server.vercel.app/
🔗 GitHub：github.com/name718/web…
能学到什么？
平台覆盖了 OWASP Top 10 的大部分漏洞类型：
注入类：XSS 跨站脚本、SQL 注入
认证类：CSRF 跨站请求伪造、JWT 漏洞、撞库攻击、Token 重放
权限类：IDOR 越权访问、RBAC 权限缺陷
其他：点击劫持、钓鱼攻击、DDoS、文件上传漏洞、中间人攻击、敏感信息泄露
每个实验都包含：
- 🔴 攻击演示：真实可利用的漏洞场景
- 🟢 防御方案：安全实现的对比
- 📖 原理说明：为什么会有这个漏洞
举个例子：XSS 攻击
最经典的前端安全问题。在搜索框输入：
<script>alert('你被 XSS 了')</script>
如果页面直接把用户输入渲染出来，脚本就会执行。
更危险的是存储型 XSS —— 攻击者在评论区注入脚本，所有访问这个页面的用户都会中招，Cookie 被偷、账号被盗。
平台里可以完整体验这个攻击链路，同时学习 textContent、CSP、HttpOnly 等防御手段。
再比如：CSRF 攻击
模拟一个银行转账场景：
- 你登录了银行网站（Cookie 已存储）
- 攻击者诱导你点击一个链接
- 这个链接偷偷向银行发起转账请求
- 浏览器自动带上你的 Cookie，转账成功
整个过程你毫无感知。
平台里可以体验完整的攻击流程，以及 CSRF Token 是如何防御的。
技术栈
项目非常轻量，方便学习：
- 后端：Express.js
- 前端：原生 HTML/CSS/JS（零框架）
- 数据库：sql.js（浏览器端 SQLite）
- 部署：Vercel
本地运行：
git clone https://github.com/name718/web-security-lab.git
cd web-security-lab
pnpm install
pnpm dev
# 访问 http://localhost:4000
写在最后
快手被攻击这件事，让我意识到安全离我们并不远。
作为前端，我们写的每一行代码都可能成为攻击入口。与其等出了事再补救，不如现在就了解这些漏洞是怎么回事。
先攻击，再防御，才能真正理解。
希望这个平台对你有帮助。
⭐ 觉得有用的话，欢迎 Star：github.com/name718/web…
⚠️ 免责声明：本项目仅供学习研究，请勿用于非法用途。
