volksrat71/react2shellexploitvisualizedVisualização interativa da vulnerabilidade RCE do React2Shell (CVE-2025-55182) com animações narradas para três públicos: Especialista, Praticante e Stakeholder. Áudio sincronizado via ElevenLabs + Whisper.
Uma visualização educacional interativa que explica a vulnerabilidade React2Shell - uma falha crítica de execução remota de código com CVSS 10.0 em React Server Components.
Um passo a passo narrado em 5 etapas que explica:
hasOwnProperty que previne o ataqueCada etapa inclui:
A visualização é totalmente responsiva, com uma experiência otimizada para mobile:
A visualização suporta três níveis de público, cada um com narração personalizada:
| Nível | Público | Estilo |
|---|---|---|
| Especialista | Engenheiros de segurança, desenvolvedores seniores | Terminologia precisa, mecânica aprofundada |
| Praticante | Desenvolvedores, profissionais de TI | Conceitos com exemplos práticos |
| Partes Interessadas | Liderança, gerentes de produto | Impacto nos negócios, principais conclusões |
Os usuários podem alternar entre os níveis em tempo real por meio do menu suspenso "Público-Alvo" nos controles de vídeo.
├── 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
Os scripts estão em scripts/{level}/:
ssr-narration.txtrsc-narration.txtexploit-narration.txtfix-narration.txtlessons-narration.txtCada script inclui comentários de frases-gatilho na parte inferior para sincronização da animação.
Envie o script para o ElevenLabs e baixe o MP3.
Solte o MP3 em static/audio/{level}/ com o nome da etapa (ex.: static/audio/expert/ssr.mp3).
Arquivo único:
python scripts/transcribe.py ssr expert
python scripts/transcribe.py rsc practitioner
Modo lote (todos os arquivos de um nível):
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
Opções:
--model small - Use um modelo Whisper maior para melhor precisão--dry-run - Visualize o que seria transcrito sem executarO script gera JSON em src/lib/data/{level}/ com timestamps no nível de palavra.
Se a redação da narração mudou significativamente, atualize as frases-gatilho em src/lib/utils/triggers/{level}/ para corresponder ao novo script.
src/lib/utils/triggers/) encontra frases-chave por nívelsrc/lib/stores/timeline.svelte.ts) sincroniza o áudio com a animaçãocurrentTime usando getAnimationState()npm run build
npm run preview
Fins educacionais. Criado para conscientização sobre segurança.