volksrat71/react2shellexploitvisualizedVisualisation interactive de la vulnérabilité RCE React2Shell (CVE-2025-55182) avec des animations narrées pour trois publics : Expert, Praticien et Partie prenante. Audio synchronisé via ElevenLabs + Whisper.
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.
Un parcours commenté en 5 étapes qui explique :
hasOwnProperty en une seule ligne qui empêche l'attaqueChaque étape comprend :
La visualisation est entièrement réactive avec une expérience optimisée pour mobile :
La visualisation prend en charge trois niveaux de public, chacun avec une narration adaptée :
| Niveau | Public | Style |
|---|---|---|
| Expert | Ingénieurs sécurité, développeurs seniors | Terminologie précise, mécanismes approfondis |
| Praticien | Développeurs, professionnels IT | Concepts avec exemples pratiques |
| Partie prenante | Direction, chefs de produit | Impact métier, points clés à retenir |
Les utilisateurs peuvent changer de niveau en temps réel via la liste déroulante « Public cible » dans les commandes vidéo.
├── 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
Les scripts se trouvent dans scripts/{level}/ :
ssr-narration.txtrsc-narration.txtexploit-narration.txtfix-narration.txtlessons-narration.txtChaque script inclut des commentaires de phrases déclencheurs en bas pour la synchronisation des animations.
Téléversez le script sur ElevenLabs et téléchargez le MP3.
Déposez le MP3 dans static/audio/{level}/ avec le nom de l'étape (par ex. static/audio/expert/ssr.mp3).
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écuterLe script génère du JSON dans src/lib/data/{level}/ avec des horodatages au niveau du mot.
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.
src/lib/utils/triggers/) trouve les phrases clés par niveausrc/lib/stores/timeline.svelte.ts) synchronise l'audio avec l'animationcurrentTime à l'aide de getAnimationState()npm run build
npm run preview
À des fins éducatives. Créé pour la sensibilisation à la sécurité.