Cómo funciona HTML Code Runner

Una inmersión profunda en la arquitectura técnica, el modelo de seguridad y las decisiones de diseño detrás de la herramienta.

Descripción general de la arquitectura

HTML Code Runner es una aplicación puramente del lado del cliente. No hay código de procesamiento del servidor backend, ni bases de datos que almacenen fragmentos ni llamadas API a servicios externos. Toda la herramienta se ejecuta dentro del navegador del usuario utilizando tecnologías web estándar: HTML, CSS y JavaScript.

El canal de ejecución de código

Al hacer clic en el botón Ejecutar, se produce la siguiente secuencia:

  1. Captura de código: el contenido HTML del editor de área de texto se lee como una cadena
  2. Creación de blob: la cadena de código está envuelta en un objeto Blob con tipo MIME text/html
  3. Generación de URL: se crea una URL de Blob temporal usando URL.createObjectURL()
  4. Carga de iframe: la URL del blob se asigna al atributo src del iframe en espacio aislado.
  5. Renderizado: el navegador representa el documento HTML dentro del iframe, ejecutando cualquier CSS y JavaScript incrustados.
  6. Captura de consola: los métodos console.log, console.error y console.warn del iframe se anulan para canalizar la salida al panel Salida de la consola.
  7. Limpieza: la URL del blob se revoca después de cargarla para liberar memoria.

Modelo de seguridad

La seguridad es una consideración central del diseño. Usamos múltiples capas de aislamiento:

Iframe en espacio aislado

El iframe de vista previa utiliza el atributo HTML5 sandbox con los siguientes permisos:

  • allow-scripts: habilita la ejecución de JavaScript dentro del iframe (necesario para vistas previas de JS)
  • allow-modals: permite los cuadros de diálogo alert(), confirm() y prompt().
  • allow-same-origin: obligatorio para la carga de la URL del Blob (el contenido debe compartir el origen con la URL del Blob)

La zona de pruebas no explícitamente incluye:

  • allow-top-navigation: el iframe no puede navegar por la página principal
  • allow-forms: los envíos de formularios están bloqueados (evita la filtración accidental de datos)
  • allow-popups: las ventanas emergentes están bloqueadas

Aislamiento de URL de blobs

En lugar de inyectar código a través de document.write() o srcdoc, utilizamos URL de Blob. Esto proporciona un mejor aislamiento porque el navegador trata la URL del Blob como un documento independiente con su propio contexto de ejecución.

Sin procesamiento del lado del servidor

Su código nunca se transmite a través de la red. Permanece en la memoria de su navegador desde el momento en que lo escribe hasta que cierra la pestaña. No hay ningún servidor que comprometer, ninguna base de datos que violar y ningún punto final API que explotar.

Diseño del editor

El editor de código es un elemento con estilo

  • Números de línea: un panel sincronizado de solo lectura que muestra números de línea y se desplaza junto con el editor.
  • Compatibilidad con tabulador: la tecla Tab inserta dos espacios en lugar de mover el foco (comportamiento estándar del editor de código)
  • Fuente monoespaciada: utiliza JetBrains Mono para una legibilidad óptima del código.
  • Corrección ortográfica deshabilitada: evita que el navegador subraye los "errores ortográficos" del código.

Consideraciones de rendimiento

  • Toda la herramienta se carga en un único archivo HTML con dos pequeños archivos JS y un archivo CSS.
  • No se utilizan marcos ni bibliotecas de JavaScript: todo el código es Vanilla JS
  • Las fuentes se cargan de forma asíncrona con font-display: swap
  • La herramienta es interactiva a los milisegundos de cargarse la página.
  • Las URL de blobs se revocan después de su uso para evitar pérdidas de memoria

Accesibilidad

La herramienta está diseñada teniendo en cuenta la accesibilidad:

  • Todos los elementos interactivos tienen etiquetas ARIA.
  • El acordeón de preguntas frecuentes utiliza estados aria-expanded adecuados
  • El foco es claramente visible en todos los elementos interactivos.
  • El contraste de color cumple con las pautas WCAG AA
  • La herramienta es totalmente navegable mediante teclado.
  • Las notificaciones del sistema usan role="status" y aria-live="polite"

Diseño Responsivo

La interfaz se adapta a todos los tamaños de pantalla:

  • Escritorio (1024px+): editor en paralelo y paneles de vista previa
  • Tableta (768 px–1024 px): paneles apilados con diseño de ancho completo
  • Móvil (<768px): paneles apilados, navegación contraída, objetivos táctiles optimizados

Implementación SEO

Cada página de este sitio incluye:

  • Etiquetas de título únicas y meta descripciones
  • Elementos semánticos HTML5 (encabezado, principal, pie de página, navegación, sección, artículo)
  • URL canónicas para evitar problemas de contenido duplicado
  • Datos estructurados (JSON-LD) para esquemas de página web, aplicación de software, página de preguntas frecuentes y lista de rutas de navegación
  • Etiquetas Hreflang para soporte multilingüe
  • Un único H1 por página con la jerarquía de encabezados adecuada

Pruebe HTML Code Runner →