volksrat71/react2shellexploitvisualizedInteraktive Visualisierung der RCE-Schwachstelle React2Shell (CVE-2025-55182) mit kommentierten Animationen für drei Zielgruppen: Experte, Praktiker und Stakeholder. Audio über ElevenLabs + Whisper synchronisiert.
Eine interaktive Lernvisualisierung, die die React2Shell-Schwachstelle erklärt – ein kritischer Remote-Codeausführungsfehler (CVSS 10.0) in React Server Components.
Ein geführter Rundgang in 5 Schritten mit Erzählung, der Folgendes erklärt:
hasOwnProperty-Prüfung, die den Angriff verhindertJeder Schritt bietet:
Die Visualisierung ist vollständig responsiv und für Mobilgeräte optimiert:
Die Visualisierung unterstützt drei Zielgruppen-Ebenen, jeweils mit maßgeschneiderter Erzählung:
| Ebene | Zielgruppe | Stil |
|---|---|---|
| Expert | Sicherheitsingenieure, Senior-Entwickler | Präzise Terminologie, tiefgehende Mechanik |
| Practitioner | Entwickler, IT-Profis | Konzepte mit praktischen Beispielen |
| Stakeholder | Führungskräfte, Projektmanager | Geschäftsauswirkungen, wichtigste Erkenntnisse |
Benutzer können über das Dropdown-Menü „Zielgruppe“ in der Videosteuerung jederzeit in Echtzeit zwischen den Ebenen wechseln.
├── 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/
npm install
npm run dev
Die Skripte befinden sich in scripts/{level}/:
ssr-narration.txtrsc-narration.txtexploit-narration.txtfix-narration.txtlessons-narration.txtJedes Skript enthält unten Kommentare mit Trigger-Phrasen für die Animationssynchronisierung.
Laden Sie das Skript bei ElevenLabs hoch und laden Sie die MP3 herunter.
Legen Sie die MP3 unter static/audio/{level}/ mit dem Schrittnamen ab (z. B. static/audio/expert/ssr.mp3).
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 startenDas Skript gibt JSON-Daten mit Wort-Zeitstempeln nach src/lib/data/{level}/ aus.
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.
src/lib/utils/triggers/) findet Schlüsselphrasen pro Ebenesrc/lib/stores/timeline.svelte.ts) synchronisiert Audio und AnimationcurrentTime mithilfe von getAnimationState() abnpm run build
npm run preview
Zu Bildungszwecken. Erstellt für Sicherheitsbewusstsein.