Skip to content
KitploitKITPLOIT
HerramientasBlog
Enviar
HerramientasBlog
Enviar

¡Herramientas de Hacking, PenTest y Ciberseguridad para tu Arsenal de Seguridad!

Kitploit es un directorio de herramientas de hacking, ciberseguridad y pentesting. Descubre las últimas actualizaciones de proyectos para encontrar vulnerabilidades, analizar sistemas, automatizar pruebas y fortalecer tu seguridad.

··Feeds·Contacto·Privacidad·© 2026 Kitploit

Directorio de Herramientas

Categorías

Ver todas las categorías
Loading categories
Herramientas/GitHubGitHub/volksrat71/react2shellexploitvisualized
Análisis de VulnerabilidadesExplotaciónSeguridad WebCTFAprendizaje y EducaciónLabs y Práctica
GitHubvolksrat71/react2shellexploitvisualized

react2shellexploitvisualized

Visualización interactiva de la vulnerabilidad RCE React2Shell (CVE-2025-55182) con animaciones narradas para tres audiencias: Experto, Practicante e Interesado. Audio sincronizado mediante ElevenLabs + Whisper.

Ver RepositorioSitio web
3hace 8 mesesAún no revisado

Más Populares

Ver todos →

Descubre las herramientas más usadas por nuestra comunidad.

Explora todas las herramientas

Explora nuestra colección de herramientas

Ver todas las herramientas →
Compartir

Visualización de React2Shell (CVE-2025-55182)

Una visualización educativa interactiva que explica la vulnerabilidad React2Shell: un fallo crítico de ejecución remota de código con puntuación CVSS 10.0 en React Server Components.

Qué es esto

Un recorrido narrado de 5 pasos que explica:

  1. SSR tradicional - Cómo funciona el renderizado del lado del servidor y el problema del "cuello de botella JSON"
  2. Streaming de RSC - Cómo React Server Components resuelve esto con streaming
  3. El exploit - Cómo la contaminación de prototipos + cadenas de gadgets permiten RCE
  4. La corrección - La verificación de una línea hasOwnProperty que previene el ataque
  5. Conclusiones clave - Lecciones aprendidas para una arquitectura segura

Cada paso incluye:

  • Narración de audio sincronizada con subtítulos palabra por palabra
  • Animaciones basadas en fotogramas clave sincronizadas con la narración
  • Controles de reproductor de video (reproducir/pausar, búsqueda, velocidad, subtítulos)
  • Resaltado visual de conceptos clave

Compatibilidad con dispositivos móviles

La visualización es completamente adaptable con una experiencia optimizada para móviles:

  • Desplazamiento automático: En ventanas de visualización móviles (≤1000px), la página se desplaza automáticamente para seguir la animación. Los objetivos de desplazamiento están determinados por los datos de marca de tiempo de Whisper, manteniendo el punto focal (navegador → red → servidor → explicación) visible a medida que avanza la narración.
  • Controles de video fijos: Los controles de reproducción/pausa y la línea de tiempo permanecen fijos en la parte inferior para un fácil acceso mientras se desplaza.
  • Subtítulos para móviles: Los subtítulos palabra por palabra aparecen en el área de controles de video en dispositivos móviles.
  • Diseños adaptables: Las cuadrículas se apilan verticalmente, los tamaños de fuente se escalan adecuadamente y los controles son aptos para pantallas táctiles.

    • Soporte para múltiples audiencias

    La visualización admite tres niveles de audiencia, cada uno con una narración adaptada:

    NivelAudienciaEstilo
    ExpertoIngenieros de seguridad, desarrolladores seniorTerminología precisa, mecánica profunda
    ProfesionalDesarrolladores, profesionales de TIConceptos con ejemplos prácticos
    InteresadoLiderazgo, gerentes de productoImpacto empresarial, conclusiones clave

    Los usuarios pueden cambiar entre niveles en tiempo real a través del menú desplegable "Audiencia objetivo" en los controles de video.

    Stack tecnológico

    • SvelteKit con runas de Svelte 5
    • ElevenLabs para generación de voz por IA
    • OpenAI Whisper para transcripción de audio y extracción de marcas de tiempo
    • TypeScript en todo el proyecto

    Estructura del proyecto

    root@kitploit:~
    ├── 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/

    Desarrollo

    root@kitploit:~
    npm install
npm run dev

    Cambiar la voz / narración

    1. Editar el guión

    Los guiones están en scripts/{level}/:

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

    Cada guión incluye comentarios de frases desencadenantes al final para la sincronización de animaciones.

    2. Generar audio con ElevenLabs

    Sube el guión a ElevenLabs y descarga el MP3.

    3. Colocar el archivo de audio

    Coloca el MP3 en static/audio/{level}/ con el nombre del paso (por ejemplo, static/audio/expert/ssr.mp3).

    4. Transcribir con Whisper

    Archivo individual:

    root@kitploit:~
    python scripts/transcribe.py ssr expert
python scripts/transcribe.py rsc practitioner

    Modo por lotes (todos los archivos de un nivel):

    root@kitploit:~
    python scripts/transcribe.py --batch expert
python scripts/transcribe.py --batch practitioner
python scripts/transcribe.py --batch stakeholder
python scripts/transcribe.py --batch all          # Todos los 15 archivos

    Opciones:

    • --model small - Usar un modelo Whisper más grande para mayor precisión
    • --dry-run - Vista previa de lo que se transcribiría sin ejecutar

    El script genera JSON en src/lib/data/{level}/ con marcas de tiempo a nivel de palabra.

    5. Actualizar frases desencadenantes (si es necesario)

    Si el texto de la narración cambió significativamente, actualiza las frases desencadenantes en src/lib/utils/triggers/{level}/ para que coincidan con el nuevo guión.

    Cómo funciona el sistema de animación

    1. Whisper JSON contiene marcas de tiempo a nivel de palabra para cada nivel de audiencia
    2. Extracción de desencadenantes (src/lib/utils/triggers/) encuentra frases clave por nivel
    3. Fotogramas clave mapean marcas de tiempo a estados de animación
    4. Controlador de línea de tiempo (src/lib/stores/timeline.svelte.ts) sincroniza audio con animación
    5. Componentes derivan el estado visual de currentTime usando getAnimationState()
    6. Carga diferida obtiene datos de whisper bajo demanda y los almacena en caché

    Compilación para producción

    root@kitploit:~
    npm run build
npm run preview

    Recursos

    • react2shell.com - Divulgación original
    • Análisis en profundidad de Wiz
    • Datadog Security Labs

    Licencia

    Con fines educativos. Creado para concienciación sobre seguridad.

    Descargar herramienta