https://github.com/volksrat71/react2shellexploitvisualized
Interactive visualization of the React2Shell (CVE-2025-55182) RCE vulnerability with narrated animations for three audiences: Expert, Practitioner, and Stakeholder. Audio synced via ElevenLabs + Whisper.
https://github.com/volksrat71/react2shellexploitvisualized
cve cybersecurity educational elevenlabs flight-protocol rce react security server-components svelte visulization vunerability whisper
Last synced: about 1 month ago
JSON representation
Interactive visualization of the React2Shell (CVE-2025-55182) RCE vulnerability with narrated animations for three audiences: Expert, Practitioner, and Stakeholder. Audio synced via ElevenLabs + Whisper.
- Host: GitHub
- URL: https://github.com/volksrat71/react2shellexploitvisualized
- Owner: VolksRat71
- Created: 2025-12-11T16:23:49.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-12-14T00:18:02.000Z (5 months ago)
- Last Synced: 2025-12-15T16:27:30.181Z (5 months ago)
- Topics: cve, cybersecurity, educational, elevenlabs, flight-protocol, rce, react, security, server-components, svelte, visulization, vunerability, whisper
- Language: Svelte
- Homepage: https://volksrat71.github.io/react2shellexploitvisualized/
- Size: 27.2 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React2Shell (CVE-2025-55182) Visualization
An interactive educational visualization explaining the React2Shell vulnerability - a critical CVSS 10.0 remote code execution flaw in React Server Components.
## What This Is
A 5-step narrated walkthrough that explains:
1. **Traditional SSR** - How server-side rendering works and the "JSON bottleneck" problem
2. **RSC Streaming** - How React Server Components solve this with streaming
3. **The Exploit** - How prototype pollution + gadget chains enable RCE
4. **The Fix** - The one-line `hasOwnProperty` check that prevents the attack
5. **Key Takeaways** - Lessons learned for secure architecture
Each step features:
- Synced audio narration with word-by-word captions
- Keyframe-driven animations timed to the narration
- Video player controls (play/pause, seek, speed, captions)
- Visual highlighting of key concepts
## Mobile Support
The visualization is fully responsive with a mobile-optimized experience:
- **Auto-scrolling**: On mobile viewports (≤1000px), the page automatically scrolls to follow the animation. Scroll targets are driven by Whisper timestamp data, keeping the focal point (browser → network → server → explanation) in view as the narration progresses.
- **Sticky video controls**: Play/pause and timeline controls stay fixed at the bottom for easy access while scrolling.
- **Mobile captions**: Word-by-word captions appear in the video controls area on mobile.
- **Responsive layouts**: Grids stack vertically, font sizes scale appropriately, and touch-friendly controls.
## Multi-Audience Support
The visualization supports three audience levels, each with tailored narration:
| Level | Audience | Style |
|-------|----------|-------|
| **Expert** | Security engineers, senior devs | Precise terminology, deep mechanics |
| **Practitioner** | Developers, IT pros | Concepts with practical examples |
| **Stakeholder** | Leadership, PMs | Business impact, key takeaways |
Users can switch between levels in real-time via the "Target Audience" dropdown in the video controls.
## Tech Stack
- **SvelteKit** with Svelte 5 runes
- **ElevenLabs** for AI voice generation
- **OpenAI Whisper** for audio transcription & timestamp extraction
- **TypeScript** throughout
## Project Structure
```
├── scripts/ # Narration scripts (source of truth)
│ ├── expert/
│ │ ├── ssr-narration.txt
│ │ ├── rsc-narration.txt
│ │ ├── exploit-narration.txt
│ │ ├── fix-narration.txt
│ │ └── lessons-narration.txt
│ ├── practitioner/
│ │ └── ... (same files)
│ ├── stakeholder/
│ │ └── ... (same files)
│ └── transcribe.py # Whisper transcription script
├── static/audio/ # Generated MP3 files
│ ├── expert/
│ │ ├── ssr.mp3
│ │ ├── rsc.mp3
│ │ ├── exploit.mp3
│ │ ├── fix.mp3
│ │ └── lessons.mp3
│ ├── practitioner/
│ │ └── ... (same files)
│ └── stakeholder/
│ └── ... (same files)
├── src/lib/data/ # Whisper JSON output (word timestamps)
│ ├── expert/
│ │ ├── ssr-whisper.json
│ │ └── ...
│ ├── practitioner/
│ │ └── ...
│ └── stakeholder/
│ └── ...
└── src/lib/utils/triggers/ # Animation trigger phrases per level
├── expert/
├── practitioner/
└── stakeholder/
```
## Development
```sh
npm install
npm run dev
```
## Changing the Voice / Narration
### 1. Edit the script
Scripts are in `scripts/{level}/`:
- `ssr-narration.txt`
- `rsc-narration.txt`
- `exploit-narration.txt`
- `fix-narration.txt`
- `lessons-narration.txt`
Each script includes trigger phrase comments at the bottom for animation sync.
### 2. Generate audio with ElevenLabs
Upload the script to ElevenLabs and download the MP3.
### 3. Place the audio file
Drop the MP3 in `static/audio/{level}/` with the step name (e.g., `static/audio/expert/ssr.mp3`).
### 4. Transcribe with Whisper
Single file:
```sh
python scripts/transcribe.py ssr expert
python scripts/transcribe.py rsc practitioner
```
Batch mode (all files for a level):
```sh
python scripts/transcribe.py --batch expert
python scripts/transcribe.py --batch practitioner
python scripts/transcribe.py --batch stakeholder
python scripts/transcribe.py --batch all # All 15 files
```
Options:
- `--model small` - Use a larger Whisper model for better accuracy
- `--dry-run` - Preview what would be transcribed without running
The script outputs JSON to `src/lib/data/{level}/` with word-level timestamps.
### 5. Update trigger phrases (if needed)
If the narration wording changed significantly, update the trigger phrases in `src/lib/utils/triggers/{level}/` to match the new script.
## How the Animation System Works
1. **Whisper JSON** contains word-level timestamps for each audience level
2. **Trigger extraction** (`src/lib/utils/triggers/`) finds key phrases per level
3. **Keyframes** map timestamps to animation states
4. **Timeline controller** (`src/lib/stores/timeline.svelte.ts`) syncs audio with animation
5. **Components** derive visual state from `currentTime` using `getAnimationState()`
6. **Lazy loading** fetches whisper data on-demand and caches it
## Building for Production
```sh
npm run build
npm run preview
```
## Resources
- [react2shell.com](https://react2shell.com/) - Original disclosure
- [Wiz Deep Dive](https://www.wiz.io/blog/nextjs-cve-2025-55182-react2shell-deep-dive)
- [Datadog Security Labs](https://securitylabs.datadoghq.com/articles/cve-2025-55182-react2shell-remote-code-execution-react-server-components/)
## License
Educational purposes. Created for security awareness.