Visualisation React2Shell (CVE-2025-55182)

Une visualisation éducative interactive expliquant la vulnérabilité React2Shell - une faille critique d'exécution de code à distance (CVSS 10.0) dans les composants serveur React.

Ce que c'est

Un parcours commenté en 5 étapes qui explique :

1. Le SSR traditionnel - Comment fonctionne le rendu côté serveur et le problème du « goulot d'étranglement JSON »
2. Le streaming RSC - Comment les composants serveur React résolvent ce problème grâce au streaming
3. L'exploit - Comment la pollution des prototypes + les chaînes de gadgets permettent l'exécution de code à distance (RCE)
4. Le correctif - La vérification hasOwnProperty en une seule ligne qui empêche l'attaque
5. Les points clés à retenir - Leçons tirées pour une architecture sécurisée

Chaque étape comprend :

• Narration audio synchronisée avec sous-titres mot à mot
• Animations pilotées par images clés calées sur la narration
• Commandes du lecteur vidéo (lecture/pause, avance rapide, vitesse, sous-titres)
• Mise en évidence visuelle des concepts clés

Prise en charge mobile

La visualisation est entièrement réactive avec une expérience optimisée pour mobile :

• Défilement automatique : Sur les viewports mobiles (≤1000px), la page défile automatiquement pour suivre l'animation. Les cibles de défilement sont pilotées par les données d'horodatage de Whisper, ce qui maintient le point focal (navigateur → réseau → serveur → explication) à l'écran au fur et à mesure que la narration progresse.
• Commandes vidéo persistantes : Les commandes de lecture/pause et de timeline restent fixées en bas pour un accès facile pendant le défilement.
• Sous-titres mobiles : Les sous-titres mot à mot apparaissent dans la zone des commandes vidéo sur mobile.
• Mises en page réactives : Les grilles s'empilent verticalement, les tailles de police s'adaptent et les commandes sont adaptées au tactile.

Prise en charge multi-public

La visualisation prend en charge trois niveaux de public, chacun avec une narration adaptée :

Les utilisateurs peuvent changer de niveau en temps réel via la liste déroulante « Public cible » dans les commandes vidéo.

Pile technique

• SvelteKit avec les runes Svelte 5
• ElevenLabs pour la génération de voix IA
• OpenAI Whisper pour la transcription audio et l'extraction d'horodatages
• TypeScript partout

Structure du projet

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

Développement

npm install
npm run dev

Changer la voix / la narration

1. Modifier le script

Les scripts se trouvent dans scripts/{level}/ :

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

Chaque script inclut des commentaires de phrases déclencheurs en bas pour la synchronisation des animations.

2. Générer l'audio avec ElevenLabs

Téléversez le script sur ElevenLabs et téléchargez le MP3.

3. Placer le fichier audio

Déposez le MP3 dans static/audio/{level}/ avec le nom de l'étape (par ex. static/audio/expert/ssr.mp3).

4. Transcrire avec Whisper

Fichier unique :

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

Mode batch (tous les fichiers d'un niveau) :

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 - Utiliser un modèle Whisper plus grand pour une meilleure précision
• --dry-run - Aperçu de ce qui serait transcrit sans l'exécuter

Le script génère du JSON dans src/lib/data/{level}/ avec des horodatages au niveau du mot.

5. Mettre à jour les phrases déclencheurs (si nécessaire)

Si le libellé de la narration a changé de manière significative, mettez à jour les phrases déclencheurs dans src/lib/utils/triggers/{level}/ pour qu'elles correspondent au nouveau script.

Comment fonctionne le système d'animation

1. Le JSON Whisper contient des horodatages au niveau du mot pour chaque niveau de public
2. L'extraction des déclencheurs (src/lib/utils/triggers/) trouve les phrases clés par niveau
3. Les images clés font correspondre les horodatages aux états d'animation
4. Le contrôleur de timeline (src/lib/stores/timeline.svelte.ts) synchronise l'audio avec l'animation
5. Les composants dérivent l'état visuel de currentTime à l'aide de getAnimationState()
6. Le chargement paresseux récupère les données Whisper à la demande et les met en cache

Compilation pour la production

npm run build
npm run preview

Ressources

• react2shell.com - Divulgation originale
• Analyse approfondie de Wiz
• Datadog Security Labs

Licence

À des fins éducatives. Créé pour la sensibilisation à la sécurité.