React2Shell (CVE-2025-55182) 可视化

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

这是什么

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

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

每个步骤包含：

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

移动端支持

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

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

多受众支持

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

用户可通过视频控件中的“目标受众”下拉菜单实时切换级别。

技术栈

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

项目结构

├── 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/

开发

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 进行转录

单个文件：

python scripts/transcribe.py ssr expert
python scripts/transcribe.py rsc practitioner

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

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 数据并缓存

构建生产版本

npm run build
npm run preview

资源

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

许可证

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