Visualizzazione di React2Shell (CVE-2025-55182)

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.

Cos'è

Un percorso guidato narrato in 5 fasi che spiega:

1. SSR tradizionale - Come funziona il rendering lato server e il problema del "collo di bottiglia JSON"
2. Streaming RSC - Come i React Server Components risolvono questo con lo streaming
3. Lo sfruttamento - Come l'inquinamento del prototipo + catene di gadget consentono RCE
4. La correzione - Il controllo hasOwnProperty di una riga che previene l'attacco
5. Punti chiave - Lezioni apprese per un'architettura sicura

Ogni passo presenta:

• Narrazione audio sincronizzata con didascalie parola per parola
• Animazioni basate su keyframe sincronizzate con la narrazione
• Controlli del lettore video (play/pausa, avanzamento, velocità, didascalie)
• Evidenziazione visiva dei concetti chiave

Supporto mobile

La visualizzazione è completamente reattiva con un'esperienza ottimizzata per dispositivi mobili:

• Scorrimento automatico: Su viewport mobili (≤1000px), la pagina scorre automaticamente per seguire l'animazione. I target di scorrimento sono guidati dai dati dei timestamp di Whisper, mantenendo il punto focale (browser → rete → server → spiegazione) visibile mentre la narrazione procede.
• Controlli video sticky: I controlli play/pausa e timeline rimangono fissi in basso per un facile accesso durante lo scorrimento.
• Didascalie mobili: Le didascalie parola per parola appaiono nell'area dei controlli video su mobile.
• Layout reattivi: Le griglie si impilano verticalmente, le dimensioni dei caratteri si adattano e i controlli sono touch-friendly.

Supporto multi-pubblico

La visualizzazione supporta tre livelli di pubblico, ciascuno con narrazione personalizzata:

Gli utenti possono passare da un livello all'altro in tempo reale tramite il menu a tendina 'Pubblico di destinazione' nei controlli video.

Stack tecnologico

• SvelteKit con Svelte 5 rune
• ElevenLabs per la generazione di voci AI
• OpenAI Whisper per la trascrizione audio e l'estrazione dei timestamp
• TypeScript ovunque

Struttura del progetto

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

Sviluppo

npm install
npm run dev

Cambiare la voce / narrazione

1. Modificare lo script

Gli script si trovano in scripts/{level}/:

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

Ogni script include commenti con frasi di attivazione in fondo per la sincronizzazione delle animazioni.

2. Generare l'audio con ElevenLabs

Carica lo script su ElevenLabs e scarica l'MP3.

3. Posizionare il file audio

Metti l'MP3 in static/audio/{level}/ con il nome del passo (es., static/audio/expert/ssr.mp3).

4. Trascrivere con Whisper

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 eseguire

Lo script produce JSON in src/lib/data/{level}/ con timestamp a livello di parola.

5. Aggiornare le frasi di attivazione (se necessario)

Se la formulazione della narrazione è cambiata significativamente, aggiorna le frasi di attivazione in src/lib/utils/triggers/{level}/ per corrispondere al nuovo script.

Come funziona il sistema di animazione

1. Whisper JSON contiene timestamp a livello di parola per ogni livello di pubblico
2. Estrazione delle attivazioni (src/lib/utils/triggers/) trova le frasi chiave per livello
3. Keyframe mappano i timestamp agli stati di animazione
4. Controller della timeline (src/lib/stores/timeline.svelte.ts) sincronizza l'audio con l'animazione
5. Componenti derivano lo stato visivo da currentTime usando getAnimationState()
6. Caricamento lazy recupera i dati di Whisper su richiesta e li memorizza nella cache

Build per la produzione

npm run build
npm run preview

Risorse

• react2shell.com - Divulgazione originale
• Approfondimento Wiz
• Datadog Security Labs

Licenza

Scopi educativi. Creato per la sensibilizzazione sulla sicurezza.