volksrat71/react2shellexploitvisualizedVisualizzazione interattiva della vulnerabilità RCE React2Shell (CVE-2025-55182) con animazioni narrate per tre tipi di pubblico: Esperto, Professionista e Stakeholder. Audio sincronizzato tramite ElevenLabs + Whisper.
Una visualizzazione educativa interattiva che spiega la vulnerabilità React2Shell - una critica falla di esecuzione remota di codice con CVSS 10.0 nei React Server Components.
Un percorso guidato narrato in 5 fasi che spiega:
hasOwnProperty di una riga che previene l'attaccoOgni passo presenta:
La visualizzazione è completamente reattiva con un'esperienza ottimizzata per dispositivi mobili:
La visualizzazione supporta tre livelli di pubblico, ciascuno con narrazione personalizzata:
| Livello | Pubblico | Stile |
|---|---|---|
| Esperto | Ingegneri di sicurezza, sviluppatori senior | Terminologia precisa, meccanismi profondi |
| Praticante | Sviluppatori, professionisti IT | Concetti con esempi pratici |
| Stakeholder | Dirigenza, PM | Impatto aziendale, punti chiave |
Gli utenti possono passare da un livello all'altro in tempo reale tramite il menu a tendina 'Pubblico di destinazione' nei controlli video.
├── 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
Gli script si trovano in scripts/{level}/:
ssr-narration.txtrsc-narration.txtexploit-narration.txtfix-narration.txtlessons-narration.txtOgni script include commenti con frasi di attivazione in fondo per la sincronizzazione delle animazioni.
Carica lo script su ElevenLabs e scarica l'MP3.
Metti l'MP3 in static/audio/{level}/ con il nome del passo (es., static/audio/expert/ssr.mp3).
File singolo:
python scripts/transcribe.py ssr expert
python scripts/transcribe.py rsc practitioner
Modalità batch (tutti i file per un livello):
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
Opzioni:
--model small - Usa un modello Whisper più grande per una migliore accuratezza--dry-run - Anteprima di ciò che verrebbe trascritto senza eseguireLo script produce JSON in src/lib/data/{level}/ con timestamp a livello di parola.
Se la formulazione della narrazione è cambiata significativamente, aggiorna le frasi di attivazione in src/lib/utils/triggers/{level}/ per corrispondere al nuovo script.
src/lib/utils/triggers/) trova le frasi chiave per livellosrc/lib/stores/timeline.svelte.ts) sincronizza l'audio con l'animazionecurrentTime usando getAnimationState()npm run build
npm run preview
Scopi educativi. Creato per la sensibilizzazione sulla sicurezza.