Skip to content
KitploitKITPLOIT
ToolsBlog
Submit
ToolsBlog
Submit

Hacking, PenTest, and Cybersecurity Tools for Your Security Arsenal!

Kitploit is a directory of hacking, cybersecurity, and pentesting tools. Discover the latest project updates to find vulnerabilities, analyze systems, automate testing, and strengthen your security.

··Feeds·Contact·Privacy·© 2026 Kitploit

Tool Directory

Categories

View all categories
Loading categories
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. | Kitploit
Tools/GitHubGitHub/volksrat71/react2shellexploitvisualized
Vulnerability AnalysisExploitationWeb SecurityCTFLearning & EducationLabs & Practice
GitHubvolksrat71/react2shellexploitvisualized

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.

View RepositoryWebsite
38 months agoNot yet reviewed

Most Popular

View all →

Discover the most used tools by our community.

Explore all tools

Browse our collection of tools

View all tools →
Share

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:

    LevelAudienceStyle
    ExpertSecurity engineers, senior devsPrecise terminology, deep mechanics
    PractitionerDevelopers, IT prosConcepts with practical examples
    StakeholderLeadership, PMsBusiness 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

    root@kitploit:~
    ├── 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

    root@kitploit:~
    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:

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

    Batch mode (all files for a level):

    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          # 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

    root@kitploit:~
    npm run build
npm run preview

    Resources

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

    License

    Educational purposes. Created for security awareness.

    Download Tool