volksrat71/react2shellexploitvisualizedИнтерактивная визуализация уязвимости RCE React2Shell (CVE-2025-55182) с озвученными анимациями для трёх аудиторий: экспертов, практиков и заинтересованных сторон. Аудиосинхронизация через ElevenLabs + Whisper.
Интерактивная образовательная визуализация, объясняющая уязвимость React2Shell — критическую ошибку удаленного выполнения кода (CVSS 10.0) в React Server Components.
Пошаговое повествование из 5 шагов, которое объясняет:
hasOwnProperty, которая предотвращает атакуКаждый шаг включает:
Визуализация полностью адаптивна с оптимизацией под мобильные устройства:
Визуализация поддерживает три уровня аудитории, каждый с индивидуальным повествованием:
| Уровень | Аудитория | Стиль |
|---|---|---|
| Эксперт | Инженеры по безопасности, старшие разработчики | Точная терминология, глубокие механизмы |
| Практик | Разработчики, IT-специалисты | Концепции с практическими примерами |
| Заинтересованное лицо | Руководство, менеджеры проектов | Бизнес-влияние, ключевые выводы |
Пользователи могут переключаться между уровнями в реальном времени через выпадающее меню «Целевая аудитория» в элементах управления видео.
├── scripts/ # Сценарии повествования (источник истины)
│ ├── 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
├── static/audio/ # Сгенерированные MP3-файлы
│ ├── expert/
│ │ ├── ssr.mp3
│ │ ├── rsc.mp3
│ │ ├── exploit.mp3
│ │ ├── fix.mp3
│ │ └── lessons.mp3
│ ├── practitioner/
│ │ └── ... (same files)
│ └── stakeholder/
│ └── ... (same files)
├── src/lib/data/ # JSON-вывод Whisper (временные метки слов)
│ ├── expert/
│ │ ├── ssr-whisper.json
│ │ └── ...
│ ├── practitioner/
│ │ └── ...
│ └── stakeholder/
│ └── ...
└── src/lib/utils/triggers/ # Фразы-триггеры анимации для каждого уровня
├── expert/
├── practitioner/
└── stakeholder/
npm install
npm run dev
Сценарии находятся в scripts/{level}/:
ssr-narration.txtrsc-narration.txtexploit-narration.txtfix-narration.txtlessons-narration.txtВ конце каждого сценария есть комментарии с фразами-триггерами для синхронизации анимации.
Загрузите сценарий в ElevenLabs и скачайте MP3.
Поместите MP3 в static/audio/{level}/ с именем шага (например, static/audio/expert/ssr.mp3).
Один файл:
python scripts/transcribe.py ssr expert
python scripts/transcribe.py rsc practitioner
Пакетный режим (все файлы для уровня):
python scripts/transcribe.py --batch expert
python scripts/transcribe.py --batch practitioner
python scripts/transcribe.py --batch stakeholder
python scripts/transcribe.py --batch all # Все 15 файлов
Опции:
--model small — использовать более крупную модель Whisper для лучшей точности--dry-run — предварительный просмотр того, что будет транскрибировано, без запускаСкрипт выводит JSON в src/lib/data/{level}/ с временными метками на уровне слов.
Если формулировка повествования существенно изменилась, обновите фразы-триггеры в src/lib/utils/triggers/{level}/ в соответствии с новым сценарием.
src/lib/utils/triggers/) находит ключевые фразы для каждого уровняsrc/lib/stores/timeline.svelte.ts) синхронизирует аудио с анимациейcurrentTime с помощью getAnimationState()npm run build
npm run preview
В образовательных целях. Создано для повышения осведомленности в области безопасности.