codejupiter/frontguard

# FrontGuard — 前端安全演练场 **在线应用:** [frontguard-nine.vercel.app](https://frontguard-nine.vercel.app) · **本地着陆页:** `/landing` · **本地应用:** `/` ## 文档 - [FrontGuard Suite](./docs/FRONTGUARD_SUITE.md) — 连接演练场、运行时 agent、未来事件摄取和仪表盘路线图的生态系统叙述。 - [Architecture](./docs/ARCHITECTURE.md) — 产品边界、请求流、模块架构、CSP 设计、状态模型、生产强化路径和面试要点。 - [Deployment](./DEPLOY.md) — Vercel/Netlify 部署指南。 ## 概述 FrontGuard 让开发者能够**在安全的沙箱中触发真实的漏洞利用** —— 然后准确了解如何修复它们。每个模块都包含： - ⚡ 一个你可以实际执行的、实时且交互式的漏洞利用 - 🛡️ 一个并排的安全实现 - 📖 教育背景：是什么、为什么、修复方法、真实案例 - 📋 带有颜色编码事件类型的实时安全日志 - 💡 针对不同模式更新的、对初学者友好的提示 ## 快速开始 ``` npm install && npm run dev # 打开 http://localhost:3000/landing ``` 有关 Vercel/Netlify 的部署，请参阅 [DEPLOY.md](./DEPLOY.md)。 ## 功能特性 | | 功能 | 描述 | |---|---|---| | 🌐 | **着陆页** | 位于 `/landing` 的公开营销页面，带有动画终端、数据泄露时间线和模块概述 | | 🎓 | **新手引导** | 首次访问时的 4 步引导式模态框。可通过 `?` 按钮重新打开 | | 💡 | **提示栏** | 针对每个模块、每种模式的上下文“试试这个”提示 —— 非常适合新手 | | 🔴 | **攻击模式** | 包含漏洞的实现。漏洞利用会实际执行 | | 🟢 | **安全模式** | 已修复的实现。相同的漏洞利用会被中和 | | 📋 | **安全日志** | 每个页面上的实时日志面板，用于跟踪漏洞利用、拦截、请求和错误 | | 📡 | **安全事件分类** | Suite v2 事件摄取 API 和仪表盘，用于 FrontGuard Agent 的运行时发现 | ## 安全模块 ### A · XSS 演练场 `/xss` **漏洞：** 通过 `innerHTML` 产生的跨站脚本攻击 (XSS) 攻击模式将用户输入作为 `innerHTML` 直接注入 —— 任何嵌入的 `