React2Shell (CVE-2025-55182) Визуализация

Интерактивная образовательная визуализация, объясняющая уязвимость React2Shell — критическую ошибку удаленного выполнения кода (CVSS 10.0) в React Server Components.

Что это такое

Пошаговое повествование из 5 шагов, которое объясняет:

1. Традиционный SSR — как работает серверный рендеринг и проблема «узкого места JSON»
2. Потоковая передача RSC — как React Server Components решают эту проблему с помощью потоковой передачи
3. Эксплойт — как загрязнение прототипов + цепочки гаджетов приводят к RCE
4. Исправление — однострочная проверка hasOwnProperty, которая предотвращает атаку
5. Основные выводы — уроки для безопасной архитектуры

Каждый шаг включает:

• Синхронизированное аудио с пословными субтитрами
• Анимации на основе ключевых кадров, синхронизированные с повествованием
• Элементы управления видеоплеером (воспроизведение/пауза, перемотка, скорость, субтитры)
• Визуальное выделение ключевых концепций

Поддержка мобильных устройств

Визуализация полностью адаптивна с оптимизацией под мобильные устройства:

• Автопрокрутка: На мобильных экранах (≤1000px) страница автоматически прокручивается, следуя за анимацией. Цели прокрутки определяются данными временных меток Whisper, удерживая фокус (браузер → сеть → сервер → объяснение) в поле зрения по мере развития повествования.
• Закрепленные элементы управления видео: Кнопки воспроизведения/паузы и шкала времени остаются закрепленными внизу для удобного доступа при прокрутке.
• Мобильные субтитры: На мобильных устройствах пословные субтитры отображаются в области элементов управления видео.
• Адаптивные макеты: Сетки располагаются вертикально, размеры шрифтов масштабируются, элементы управления удобны для касания.

Поддержка разной аудитории

Визуализация поддерживает три уровня аудитории, каждый с индивидуальным повествованием:

Пользователи могут переключаться между уровнями в реальном времени через выпадающее меню «Целевая аудитория» в элементах управления видео.

Технологический стек

• SvelteKit с возможностями Svelte 5 (руны)
• ElevenLabs для генерации голоса с помощью ИИ
• OpenAI Whisper для транскрипции аудио и извлечения временных меток
• TypeScript во всем проекте

Структура проекта

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

Смена голоса/повествования

1. Редактирование сценария

Сценарии находятся в scripts/{level}/:

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

В конце каждого сценария есть комментарии с фразами-триггерами для синхронизации анимации.

2. Генерация аудио с помощью ElevenLabs

Загрузите сценарий в ElevenLabs и скачайте MP3.

3. Размещение аудиофайла

Поместите MP3 в static/audio/{level}/ с именем шага (например, static/audio/expert/ssr.mp3).

4. Транскрипция с помощью Whisper

Один файл:

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}/ с временными метками на уровне слов.

5. Обновление фраз-триггеров (при необходимости)

Если формулировка повествования существенно изменилась, обновите фразы-триггеры в src/lib/utils/triggers/{level}/ в соответствии с новым сценарием.

Как работает система анимации

1. JSON Whisper содержит временные метки на уровне слов для каждого уровня аудитории
2. Извлечение триггеров (src/lib/utils/triggers/) находит ключевые фразы для каждого уровня
3. Ключевые кадры сопоставляют временные метки с состояниями анимации
4. Контроллер временной шкалы (src/lib/stores/timeline.svelte.ts) синхронизирует аудио с анимацией
5. Компоненты получают визуальное состояние из currentTime с помощью getAnimationState()
6. Ленивая загрузка загружает данные Whisper по требованию и кэширует их

Сборка для продакшена

npm run build
npm run preview

Ресурсы

• react2shell.com — Оригинальное раскрытие
• Wiz Deep Dive
• Datadog Security Labs

Лицензия

В образовательных целях. Создано для повышения осведомленности в области безопасности.