◆

Guía de demo — Simulador DDoS 3D

← Volver a la demo

Qué es

Visualización 3D interactiva de un ataque DDoS global contra la infraestructura de un cliente en Ciudad de México (MEX), y de cómo Magic Transit de Cloudflare lo mitiga en vivo. Un solo Worker de Cloudflare sirve toda la aplicación (HTML, CSS y JS inline); el globo, los arcos de ataque y la telemetría se renderizan en el navegador con Three.js.

Arquitectura del demo

NAVEGADOR WORKER (CLOUDFLARE) DATOS Visitante GET / → HTML completo inline (CSS + JS) Three.js desde CDN: globo 3D, arcos, telemetría, Looking Glass Worker 3d-ddos-simulator Hono · TypeScript / → página + guía (/guia) /radar.png → icono /api/bgp-routes · Looking Glass /api/radar/attack-origins /api/radar/attack-protocols /api/radar/attack-vectors scheduled(): refresco de red Crons programados 17 3 * * * (capacidad, diario) 47 4 1 * * (coordenadas, mensual) Fuentes de datos cloudflare.com/network (PoPs) simplemaps.com (coordenadas) KV NETWORK_DATA Snapshot validado de la red: PoPs, coordenadas, capacidad (si está vacío: fallback interno) Cloudflare Radar API Rutas BGP en vivo, orígenes de ataque, protocolos, vectores sin RADAR_API_TOKEN → mock GET / · /api/* lee snapshot de red raspa / descarga escribe snapshot BGP + telemetría

Todo lo visible (globo, arcos, partículas, cifras de Gbps/RPS, grafo del Looking Glass) se calcula y dibuja en el navegador; el Worker solo sirve la aplicación y actúa de proxy/cache ante KV y Radar.

Cómo presentar el demo (guion de presentacion)

  1. Preparar la escena (30 seg). Abre la demo y deja el globo girando (auto-rotación ON). Comenta: «Esta es la red global de Cloudflare — 300+ ciudades, más de 120 países. El punto azul es el centro de datos del cliente, hoy en Ciudad de México.»
  2. Estado inicial: todo tranquilo. Señala el panel Estado de la red: prefijo protegido 198.51.100.0/24, anunciante BGP = ISP del cliente, 0 PoPs anunciando (prefijo retirado), pérdida 0%. «Sin Magic Transit, el cliente depende 100% de su ISP.»
  3. Lanzar el ataque. Pulsa Lanzar ataque DDoS (por defecto 100 Gbps). Mira cómo nacen arcos rojos desde decenas de países hacia México y el banner rojo de SERVICIOS CAÍDOS. La telemetría muestra vector (SYN flood, amplificación DNS…), protocolo dominante y pérdida de paquetes creciente. «El DDoS volumétrico satura el enlace: no hay software que lo arregle, hay que absorberlo en la red.»
  4. Sube la presión. Arrastra Volumen de ataque a 1 Tbps y Tráfico legítimo a 1 Gbps. La pérdida se dispara y los usuarios reales no pueden pasar — el clásico colateral del DDoS.
  5. Desplegar Magic Transit. Activa el interruptor Desplegar Magic Transit. Se ve la secuencia de despliegue: los PoPs de Cloudflare se encienden uno a uno, el prefijo pasa a anunciarse por Cloudflare Anycast (AS13335) y los túneles GRE se dibujan en verde de los PoPs hacia México.
  6. Mitigación en vivo. Los arcos rojos se interceptan en los PoPs (partículas al impactar el escudo) y solo llega tráfico limpio por los túneles. El banner verde dice MITIGADO — Protegido por Cloudflare Magic Transit. Señala: capacidad de red (534+ Tbps), ciudades y «promedio por PoP» contra el ataque total.
  7. Looking Glass: la prueba BGP. Pulsa la lupa junto al prefijo. Compara la pestaña Antes (rutas directas ISP → origen) con Después (AS13335 insertado antes del origen: el tránsito ahora entra por Cloudflare). Con token de Radar son rutas BGP reales de colecciones route-views.
  8. Jugar con la geografía. Cambia Origen del tráfico (global o por región) y Región del ataque (datos de Radar). Muestra también el editor ⚙ para mover/agregar centros de datos del cliente — útil si el cliente tiene presencia en otra ciudad.
  9. Cierre comercial. Mensaje final: mitigación automática en el borde, sin cambiar la infraestructura del cliente (túneles GRE/IPsec), absorción en la red más grande del mundo y visibilidad total. Conecta con el demo de WAF para la capa 7.

Controles

ControlQué hace
Lanzar ataque DDoSInicia/detiene el ataque según el volumen elegido en el slider.
Volumen de ataqueDe 1 Mbps a 1 Tbps: cambia arcos, telemetría y banners.
Tráfico legítimoUsuarios reales que intentan llegar al origen; contrasta con el ataque.
Desplegar Magic TransitEnciende los PoPs, anuncia el prefijo por anycast y activa la mitigación.
Origen del tráficoDe dónde viene el tráfico legítimo (global o por región).
Región del ataqueFiltra los orígenes del ataque (datos de Radar cuando hay token).
🔍 (lupa)Looking Glass: rutas BGP antes y después de Magic Transit.
✎ / ⚙Editor de centros de datos del cliente (hasta 10; el objetivo es MEX).
Tema claro/oscuro y auto-rotaciónPara proyectar en salas iluminadas o dejar el globo girando de fondo.

Qué es real y qué es simulado

ComponenteEstado
Red de Cloudflare (PoPs, ciudades, capacidad)REAL — snapshot validado (KV o fallback interno)
Rutas BGP del Looking GlassREAL con RADAR_API_TOKEN mock sin token
Orígenes/vectores de ataque (Radar)REAL con token mock sin token
Ataques, arcos, Gbps y pérdida de paquetesSIMULADOS (escenario pedagógico)
Mitigación (scrubbing, túneles GRE)SIMULADA — representa el comportamiento real del servicio

Puntos de conversación

AnycastGRE/IPsec534+ Tbps330+ ciudades125+ paísesMitigación en segundos

• El prefijo del cliente se anuncia una sola vez por Cloudflare: el ataque muere en el borde, no en tu data center.
• Sin cambios en la infraestructura del cliente: se conecta con túneles GRE/IPsec y conserva su direccionamiento.
• La capacidad (cientos de Tbps) absorbe los ataques más grandes registrados sin degradar a otros clientes.
• La depuración (scrubbing) es automática y siempre activa; no hay que «pedir» mitigación a un proveedor aparte.

Demo original: 3D DDoS Attack Simulator de Sani (sani/3d-ddos-simulator) · Inteligencia de ataques: Cloudflare Radar · Coordenadas por SimpleMaps (CC BY 4.0) · Objetivo del ataque personalizado a Ciudad de México.