Shred-Security/hackviz
GitHub: Shred-Security/hackviz
一个用于交互式学习和可视化Web3安全漏洞的教育平台，帮助用户理解攻击模式以构建更安全的区块链协议。
Stars: 1 | Forks: 0
# 黑客可视化
用于研究现实世界 Web3 安全漏洞的交互式可视化平台。专为安全研究人员、审计员和开发者设计，旨在理解攻击模式并构建更安全的协议。
## 概述
此单一代码仓库包含用于分析主要加密货币黑客事件和安全事件的教育工具。主要应用是 **Web3HackViz** - 一个基于 React 的交互式可视化平台。
## 项目结构
```
hackviz/
├── artifacts/
│ └── web3hackviz/ # Main visualization app
│ ├── src/
│ │ ├── data/hacks.ts # All hack data definitions
│ │ ├── pages/ # Route pages
│ │ └── components/ # UI components
│ └── README.md # App-specific docs
├── lib/ # Shared libraries
├── scripts/ # Build/utility scripts
├── package.json # Workspace root config
├── pnpm-workspace.yaml # pnpm workspace definition
└── tsconfig.base.json # Shared TypeScript config
```
## 快速开始
**前提条件：**
- Node.js 24+
- pnpm 10+
**安装依赖项：**
```
pnpm install
```
**启动开发服务器：**
```
cd artifacts/web3hackviz
pnpm dev
```
**对整个工作区进行类型检查：**
```
pnpm run typecheck
```
**为生产环境构建：**
```
pnpm run build
```
## 主要应用：Web3HackViz
一个交互式教育平台，功能包括：
- **漏洞卡片**：可搜索/过滤的主要漏洞网格
- **详情页**，包含 6 个教育标签页：
- **概述**：通俗解释和技术解释
- **时间线**：包含伪代码的攻击步骤进度
- **攻击流**：交互式 React Flow 图表
- **代币流向**：D3 力导向资金移动可视化
- **经验教训**：缓解措施和防御策略
- **测验**：针对每个漏洞的知识测试
- **进度跟踪**：通过 localStorage 掌握/已审计徽章
### 已涵盖漏洞 (2025-2026)
| 漏洞名称 | 链 | 类型 | 影响金额 |
|----------|----|------|----------|
| Bybit | Ethereum | 供应链攻击 | $1.46B |
| Cetus Protocol | Sui | 整数溢出 | $223M |
| GMX V1 | Arbitrum | 重入攻击 | $42M |
| Balancer V2 | Ethereum | 数学漏洞 | $126M |
| Drift Protocol | Solana | 预言机操纵 | $285M |
| Truebit Protocol | Ethereum | 访问控制 | $26M |
| CrossCurve Bridge | 多链 | 桥接漏洞 | $3M |
| Abracadabra Finance | Ethereum | 闪电贷 | $13M |
## 文档
- [添加新漏洞](ADDING_HACKS.md) - 贡献新漏洞数据的完整指南
- [Web3HackViz README](artifacts/web3hackviz/README.md) - 应用特定详情
## 技术栈
- **框架**：React 19 + Vite 6
- **语言**：TypeScript 5.9
- **样式**：Tailwind CSS 4 + shadcn/ui
- **状态管理**：React hooks + localStorage
- **路由**：wouter
- **可视化库**：
- @xyflow/react（攻击流图表）
- D3.js（代币流向）
- Recharts（图表）
- **包管理器**：pnpm 工作区
## 贡献指南
1. Fork 仓库
2. 创建功能分支
3. 遵循[添加新漏洞](ADDING_HACKS.md)指南进行数据贡献
4. 确保 `pnpm run typecheck` 通过
5. 提交拉取请求
## 免责声明
此平台仅用于**防御性学习**。所有数据均来自公开的事后分析、区块链浏览器和已发布安全研究。目标是帮助审计员和开发者理解攻击模式，以构建更安全的协议。
标签：D3.js可视化, DeFi安全, Node.js后端, pnpm包管理, React框架, TypeScript语言, Web3安全, 交互式教育, 前端开发技术, 区块链安全, 可视化分析, 安全研究工具, 情报收集, 攻击模式分析, 教育平台, 数据库接管, 智能合约安全, 桥接漏洞, 治理攻击, 漏洞模拟, 漏洞研究, 知识测试, 自动化攻击, 进度管理, 闪贷攻击, 预言机操纵, 黑客攻击分析