React2Shell (CVE-2025-55182) Visualisierung

Eine interaktive Lernvisualisierung, die die React2Shell-Schwachstelle erklärt – ein kritischer Remote-Codeausführungsfehler (CVSS 10.0) in React Server Components.

Was das ist

Ein geführter Rundgang in 5 Schritten mit Erzählung, der Folgendes erklärt:

1. Traditionelles SSR – Wie serverseitiges Rendering funktioniert und das „JSON-Engpass“-Problem
2. RSC-Streaming – Wie React Server Components dies per Streaming lösen
3. Der Exploit – Wie Prototype Pollution + Gadget-Ketten RCE ermöglichen
4. Der Fix – Die einzeilige hasOwnProperty-Prüfung, die den Angriff verhindert
5. Wichtigste Erkenntnisse – Lehren für eine sichere Architektur

Jeder Schritt bietet:

• Synchronisierte Audio-Erzählung mit Wort-für-Wort-Untertiteln
• Keyframe-basierte Animationen, die auf die Erzählung abgestimmt sind
• Videoplayer-Steuerung (Wiedergabe/Pause, Suchen, Geschwindigkeit, Untertitel)
• Visuelle Hervorhebung der wichtigsten Konzepte

Mobile Unterstützung

Die Visualisierung ist vollständig responsiv und für Mobilgeräte optimiert:

• Auto-Scrollen: Auf mobilen Viewports (≤1000px) scrollt die Seite automatisch, um der Animation zu folgen. Die Scroll-Ziele werden durch Whisper-Zeitstempeldaten gesteuert, sodass der Fokuspunkt (Browser → Netzwerk → Server → Erklärung) während der Erzählung im Blick bleibt.
• Sticky-Videosteuerung: Wiedergabe/Pause- und Zeitleisten-Steuerung bleiben beim Scrollen fest am unteren Rand, um einen einfachen Zugriff zu ermöglichen.
• Mobile Untertitel: Wort-für-Wort-Untertitel erscheinen auf Mobilgeräten im Bereich der Videosteuerung.
• Responsive Layouts: Grids stapeln sich vertikal, Schriftgrößen passen sich angemessen an, und die Steuerung ist touchfreundlich.

Unterstützung für mehrere Zielgruppen

Die Visualisierung unterstützt drei Zielgruppen-Ebenen, jeweils mit maßgeschneiderter Erzählung:

Benutzer können über das Dropdown-Menü „Zielgruppe“ in der Videosteuerung jederzeit in Echtzeit zwischen den Ebenen wechseln.

Tech-Stack

• SvelteKit mit Svelte-5-Runes
• ElevenLabs für KI-Spracherzeugung
• OpenAI Whisper für Audiotranskription und Zeitstempel-Extraktion
• TypeScript durchgängig

Projektstruktur

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

Entwicklung

npm install
npm run dev

Stimme / Erzählung ändern

1. Skript bearbeiten

Die Skripte befinden sich in scripts/{level}/:

• ssr-narration.txt
• rsc-narration.txt
• exploit-narration.txt
• fix-narration.txt
• lessons-narration.txt

Jedes Skript enthält unten Kommentare mit Trigger-Phrasen für die Animationssynchronisierung.

2. Audio mit ElevenLabs erzeugen

Laden Sie das Skript bei ElevenLabs hoch und laden Sie die MP3 herunter.

3. Audiodatei ablegen

Legen Sie die MP3 unter static/audio/{level}/ mit dem Schrittnamen ab (z. B. static/audio/expert/ssr.mp3).

4. Mit Whisper transkribieren

Einzelne Datei:

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

Stapelmodus (alle Dateien für eine Ebene):

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

Optionen:

• --model small – Ein größeres Whisper-Modell für bessere Genauigkeit verwenden
• --dry-run – Vorschau dessen, was transkribiert würde, ohne die Ausführung zu starten

Das Skript gibt JSON-Daten mit Wort-Zeitstempeln nach src/lib/data/{level}/ aus.

5. Trigger-Phrasen aktualisieren (falls erforderlich)

Wenn sich die Formulierung der Erzählung erheblich geändert hat, aktualisieren Sie die Trigger-Phrasen in src/lib/utils/triggers/{level}/, damit sie zum neuen Skript passen.

Wie das Animationssystem funktioniert

1. Whisper-JSON enthält Wort-Zeitstempel für jede Zielgruppen-Ebene
2. Trigger-Extraktion (src/lib/utils/triggers/) findet Schlüsselphrasen pro Ebene
3. Keyframes ordnen Zeitstempel Animationszuständen zu
4. Timeline-Controller (src/lib/stores/timeline.svelte.ts) synchronisiert Audio und Animation
5. Komponenten leiten den visuellen Zustand aus currentTime mithilfe von getAnimationState() ab
6. Lazy Loading lädt Whisper-Daten bei Bedarf und speichert sie im Cache

Für die Produktion erstellen

npm run build
npm run preview

Ressourcen

• react2shell.com – Ursprüngliche Offenlegung
• Wiz Deep Dive
• Datadog Security Labs

Lizenz

Zu Bildungszwecken. Erstellt für Sicherheitsbewusstsein.