React2Shell (CVE-2025-55182) Visualização

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.

O Que É Isto

Um passo a passo narrado em 5 etapas que explica:

1. SSR Tradicional - Como a renderização no lado do servidor funciona e o problema do "gargalo JSON"
2. Streaming RSC - Como os React Server Components resolvem isso com streaming
3. A Exploração - Como poluição de protótipo + cadeias de gadgets permitem RCE
4. A Correção - A verificação de uma linha hasOwnProperty que previne o ataque
5. Principais Conclusões - Lições aprendidas para arquitetura segura

Cada etapa inclui:

• Narração de áudio sincronizada com legendas palavra por palavra
• Animações orientadas por keyframes sincronizadas com a narração
• Controles de player de vídeo (play/pause, busca, velocidade, legendas)
• Destaque visual dos conceitos-chave

Suporte a Dispositivos Móveis

A visualização é totalmente responsiva, com uma experiência otimizada para mobile:

• Rolagem automática: Em viewports móveis (≤1000px), a página rola automaticamente para acompanhar a animação. Os alvos de rolagem são orientados pelos dados de timestamp do Whisper, mantendo o ponto focal (navegador → rede → servidor → explicação) visível conforme a narração avança.
• Controles de vídeo fixos: Os controles de play/pause e da linha do tempo permanecem fixos na parte inferior para fácil acesso durante a rolagem.
• Legendas móveis: As legendas palavra por palavra aparecem na área dos controles de vídeo no mobile.
• Layouts responsivos: As grades empilham verticalmente, os tamanhos de fonte se ajustam adequadamente e os controles são otimizados para toque.

Suporte a Múltiplos Públicos

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.

Stack de Tecnologia

• SvelteKit com Svelte 5 runes
• ElevenLabs para geração de voz por IA
• OpenAI Whisper para transcrição de áudio e extração de timestamps
• TypeScript em todo o projeto

Estrutura do Projeto

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

Desenvolvimento

npm install
npm run dev

Alterando a Voz / Narração

1. Edite o script

Os scripts estão em scripts/{level}/:

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

Cada script inclui comentários de frases-gatilho na parte inferior para sincronização da animação.

2. Gere o áudio com ElevenLabs

Envie o script para o ElevenLabs e baixe o MP3.

3. Coloque o arquivo de áudio

Solte o MP3 em static/audio/{level}/ com o nome da etapa (ex.: static/audio/expert/ssr.mp3).

4. Transcreva com Whisper

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 executar

O script gera JSON em src/lib/data/{level}/ com timestamps no nível de palavra.

5. Atualize as frases-gatilho (se necessário)

Se a redação da narração mudou significativamente, atualize as frases-gatilho em src/lib/utils/triggers/{level}/ para corresponder ao novo script.

Como Funciona o Sistema de Animação

1. Whisper JSON contém timestamps no nível de palavra para cada nível de público
2. Extração de gatilhos (src/lib/utils/triggers/) encontra frases-chave por nível
3. Keyframes mapeiam timestamps para estados de animação
4. Controlador de linha do tempo (src/lib/stores/timeline.svelte.ts) sincroniza o áudio com a animação
5. Componentes derivam o estado visual de currentTime usando getAnimationState()
6. Carregamento preguiçoso (Lazy loading) busca os dados do Whisper sob demanda e os armazena em cache

Construindo para Produção

npm run build
npm run preview

Recursos

• react2shell.com - Divulgação original
• Wiz Deep Dive
• Datadog Security Labs

Licença

Fins educacionais. Criado para conscientização sobre segurança.