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

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:

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

Batch mode (all files for a level):

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

npm run build
npm run preview

Resources

• react2shell.com - Original disclosure
• Wiz Deep Dive
• Datadog Security Labs

License

Educational purposes. Created for security awareness.