Sploitus

react2shellexploitvisualized

CVE-2025-55182

kitploit · 2026-09-04

Exploit Code

MARKDOWN199 lines
## https://sploitus.com/exploit?id=KITPLOIT:TOOLS-GITHUB-VOLKSRAT71-REACT2SHELLEXPLOITVISUALIZED
# React2Shell (CVE-2025-55182) 可视化

一个交互式教育可视化工具，用于解释 React2Shell 漏洞——一个影响 React 服务器组件的 CVSS 10.0 严重远程代码执行缺陷。

## 这是什么

一个包含 5 个步骤的带旁白讲解，解释以下内容：

  1. **传统 SSR** \- 服务器端渲染的工作原理及“JSON 瓶颈”问题
  2. **RSC 流式传输** \- React 服务器组件如何通过流式传输解决此问题
  3. **漏洞利用** \- 原型污染 + 组合链如何导致 RCE
  4. **修复方案** \- 一行 `hasOwnProperty` 检查如何阻止攻击
  5. **关键要点** \- 安全架构的经验教训



每个步骤包含：

  * 同步音频旁白，带逐词字幕
  * 与旁白时间同步的关键帧驱动动画
  * 视频播放器控制（播放/暂停、进度拖拽、倍速、字幕）
  * 关键概念的视觉高亮



## 移动端支持

该可视化完全响应式，提供移动端优化体验：

  * **自动滚动** ：在移动视口（≤1000px）上，页面自动滚动以跟随动画。滚动目标由 Whisper 时间戳数据驱动，确保焦点（浏览器 → 网络 → 服务器 → 解释）随着旁白推进始终可见。
  * **固定视频控件** ：播放/暂停和时间线控件固定在底部，便于滚动时操作。
  * **移动端字幕** ：在移动端，逐词字幕显示在视频控件区域。
  * **响应式布局** ：网格垂直堆叠，字体大小自适应，控件适合触摸操作。



## 多受众支持

该可视化支持三种受众级别，每种级别配有定制旁白：

级别| 受众| 风格  
---|---|---  
**专家**|  安全工程师、高级开发者| 精确术语，深入机制  
**实践者**|  开发者、IT 专业人士| 概念结合实例  
**利益相关者**|  管理层、产品经理| 业务影响，关键要点  
  
用户可通过视频控件中的“目标受众”下拉菜单实时切换级别。

## 技术栈

  * **SvelteKit** 配合 Svelte 5 Runes
  * **ElevenLabs** 用于 AI 语音生成
  * **OpenAI Whisper** 用于音频转录及时间戳提取
  * **TypeScript** 贯穿全程



## 项目结构

root@kitploit:~
    
    
    ├── scripts/                    # 旁白脚本文本（事实来源）
    │   ├── expert/
    │   │   ├── ssr-narration.txt
    │   │   ├── rsc-narration.txt
    │   │   ├── exploit-narration.txt
    │   │   ├── fix-narration.txt
    │   │   └── lessons-narration.txt
    │   ├── practitioner/
    │   │   └── ... (相同文件)
    │   ├── stakeholder/
    │   │   └── ... (相同文件)
    │   └── transcribe.py           # Whisper 转录脚本
    ├── static/audio/               # 生成的 MP3 文件
    │   ├── expert/
    │   │   ├── ssr.mp3
    │   │   ├── rsc.mp3
    │   │   ├── exploit.mp3
    │   │   ├── fix.mp3
    │   │   └── lessons.mp3
    │   ├── practitioner/
    │   │   └── ... (相同文件)
    │   └── stakeholder/
    │       └── ... (相同文件)
    ├── src/lib/data/               # Whisper JSON 输出（单词级时间戳）
    │   ├── expert/
    │   │   ├── ssr-whisper.json
    │   │   └── ...
    │   ├── practitioner/
    │   │   └── ...
    │   └── stakeholder/
    │       └── ...
    └── src/lib/utils/triggers/     # 每级别动画触发短语
        ├── expert/
        ├── practitioner/
        └── stakeholder/
    

## 开发

root@kitploit:~
    
    
    npm install
    npm run dev
    

## 更换声音/旁白

### 1\. 编辑脚本

脚本位于 `scripts/{level}/` 目录下：

  * `ssr-narration.txt`
  * `rsc-narration.txt`
  * `exploit-narration.txt`
  * `fix-narration.txt`
  * `lessons-narration.txt`



每个脚本底部包含用于动画同步的触发短语注释。

### 2\. 使用 ElevenLabs 生成音频

将脚本上传至 ElevenLabs 并下载 MP3 文件。

### 3\. 放置音频文件

将 MP3 文件放入 `static/audio/{level}/` 目录，文件名与步骤名称一致（例如 `static/audio/expert/ssr.mp3`）。

### 4\. 使用 Whisper 进行转录

单个文件：

root@kitploit:~
    
    
    python scripts/transcribe.py ssr expert
    python scripts/transcribe.py rsc practitioner
    

批量模式（处理一个级别的所有文件）：

root@kitploit:~
    
    
    python scripts/transcribe.py --batch expert
    python scripts/transcribe.py --batch practitioner
    python scripts/transcribe.py --batch stakeholder
    python scripts/transcribe.py --batch all          # 全部 15 个文件
    

选项：

  * `--model small` \- 使用更大的 Whisper 模型以获得更高准确度
  * `--dry-run` \- 预览将要转录的内容而不实际运行



脚本会输出 JSON 到 `src/lib/data/{level}/` 目录，包含单词级时间戳。

### 5\. 更新触发短语（如有必要）

如果旁白措辞发生显著变化，请更新 `src/lib/utils/triggers/{level}/` 目录中的触发短语以匹配新脚本。

## 动画系统工作原理

  1. **Whisper JSON** 包含每个受众级别的单词级时间戳
  2. **触发提取** (`src/lib/utils/triggers/`) 在每个级别中查找关键短语
  3. **关键帧** 将时间戳映射到动画状态
  4. **时间线控制器** (`src/lib/stores/timeline.svelte.ts`) 同步音频与动画
  5. **组件** 使用 `getAnimationState()` 从 `currentTime` 推导视觉状态
  6. **懒加载** 按需获取 whisper 数据并缓存



## 构建生产版本

root@kitploit:~
    
    
    npm run build
    npm run preview
    

## 资源

  * react2shell.com \- 原始披露
  * Wiz 深入分析
  * Datadog 安全实验室



## 许可证

仅用于教育目的。为安全意识提升而创建。