Come funziona HTML Code Runner

Un'analisi approfondita dell'architettura tecnica, del modello di sicurezza e delle decisioni di progettazione alla base dello strumento.

Panoramica dell'architettura

HTML Code Runner è un'applicazione puramente lato client. Non esiste alcun codice di elaborazione del server backend, nessun database che memorizza snippet e nessuna chiamata API a servizi esterni. L'intero strumento viene eseguito all'interno del browser dell'utente utilizzando tecnologie web standard: HTML, CSS e JavaScript.

La pipeline di esecuzione del codice

Quando si fa clic sul pulsante Esegui, si verifica la seguente sequenza:

  1. Cattura codice: il contenuto HTML dall'editor dell'area di testo viene letto come una stringa
  2. Creazione BLOB: la stringa di codice è racchiusa in un oggetto Blob con tipo MIME testo/html
  3. Generazione URL: viene creato un URL BLOB temporaneo utilizzando URL.createObjectURL()
  4. Caricamento iframe: l'URL del BLOB viene assegnato all'attributo src dell'iframe sandbox
  5. Rendering: il browser esegue il rendering del documento HTML all'interno dell'iframe, eseguendo eventuali CSS e JavaScript incorporati
  6. Acquisizione console: i metodi console.log, console.error e console.warn dell'iframe vengono sovrascritti per reindirizzare l'output al pannello Output della console
  7. Pulizia: l'URL del BLOB viene revocato dopo il caricamento nella memoria libera

Modello di sicurezza

La sicurezza è una considerazione fondamentale della progettazione. Utilizziamo più livelli di isolamento:

Iframe in modalità sandbox

L'iframe di anteprima utilizza l'attributo sandbox HTML5 con le seguenti autorizzazioni:

  • allow-scripts — Abilita l'esecuzione di JavaScript all'interno dell'iframe (necessario per le anteprime JS)
  • allow-modals — Consente le finestre di dialogo alert(), confirm() e prompt()
  • allow-same-origin: richiesto per il caricamento dell'URL del BLOB (il contenuto deve condividere l'origine con l'URL del BLOB)

La sandbox non include esplicitamente:

  • allow-top-navigation: l'iframe non può navigare nella pagina principale
  • allow-forms: l'invio di moduli viene bloccato (impedisce l'esfiltrazione accidentale di dati)
  • allow-popups: le finestre popup vengono bloccate

Isolamento URL BLOB

Invece di inserire codice tramite document.write() o srcdoc, utilizziamo URL BLOB. Ciò fornisce un migliore isolamento perché il browser considera l'URL del BLOB come un documento separato con il proprio contesto di esecuzione.

Nessuna elaborazione lato server

Il tuo codice non viene mai trasmesso sulla rete. Rimane nella memoria del tuo browser dal momento in cui lo digiti fino a quando non chiudi la scheda. Non c'è nessun server da compromettere, nessun database da violare e nessun endpoint API da sfruttare.

Progettazione dell'editore

L'editor del codice è un elemento in stile

  • Numeri di riga: un pannello sincronizzato di sola lettura che visualizza i numeri di riga e scorre insieme all'editor
  • Supporto Tab: il tasto Tab inserisce due spazi invece di spostare il focus (comportamento standard dell'editor di codice)
  • Carattere a spaziatura fissa: utilizza JetBrains Mono per una leggibilità ottimale del codice
  • Controllo ortografico disattivato: impedisce al browser di sottolineare gli "errori ortografici" del codice

Considerazioni sulle prestazioni

  • L'intero strumento viene caricato in un singolo file HTML con due piccoli file JS e un file CSS
  • Non vengono utilizzati framework o librerie JavaScript: tutto il codice è Vanilla JS
  • I caratteri vengono caricati in modo asincrono con font-display: swap
  • Lo strumento è interattivo entro pochi millisecondi dal caricamento della pagina
  • Gli URL BLOB vengono revocati dopo l'uso per evitare perdite di memoria

Accessibilità

Lo strumento è progettato pensando all'accessibilità:

  • Tutti gli elementi interattivi hanno etichette ARIA
  • La fisarmonica delle FAQ utilizza gli stati aria-expanded corretti
  • Il focus è chiaramente visibile su tutti gli elementi interattivi
  • Il contrasto cromatico soddisfa le linee guida WCAG AA
  • Lo strumento è completamente navigabile da tastiera
  • Le notifiche popup utilizzano role="status" e aria-live="polite"

Progettazione reattiva

L'interfaccia si adatta a tutte le dimensioni dello schermo:

  • Desktop (1024px+): editor affiancato e pannelli di anteprima
  • Tablet (768px–1024px): pannelli impilati con layout a larghezza intera
  • Mobili (<768px): riquadri impilati, navigazione compressa, touch target ottimizzati

Implementazione SEO

Ogni pagina di questo sito include:

  • Tag del titolo e meta descrizioni univoci
  • Elementi semantici HTML5 (intestazione, main, footer, nav, sezione, articolo)
  • URL canonici per evitare problemi di contenuti duplicati
  • Dati strutturati (JSON-LD) per schemi WebPage, SoftwareApplication, FAQPage e BreadcrumbList
  • Tag hreflang per supporto multilingue
  • Un singolo H1 per pagina con la corretta gerarchia delle intestazioni

Prova HTML Code Runner →