So funktioniert HTML Code Runner

Ein tiefer Einblick in die technische Architektur, das Sicherheitsmodell und die Designentscheidungen hinter dem Tool.

Architekturübersicht

HTML Code Runner ist eine rein clientseitige Anwendung. Es gibt keinen Backend-Server-Verarbeitungscode, keine Datenbank-Snippets und keine API-Aufrufe an externe Dienste. Das gesamte Tool läuft im Browser des Benutzers und verwendet Standard-Webtechnologien: HTML, CSS und JavaScript.

Die Codeausführungspipeline

Wenn Sie auf die Schaltfläche „Ausführen“ klicken, geschieht die folgende Sequenz:

  1. Code Capture – Der HTML-Inhalt aus dem Textbereichseditor wird als Zeichenfolge gelesen
  2. Blob-Erstellung – Die Codezeichenfolge wird in ein Blob-Objekt mit dem MIME-Typ text/html eingeschlossen
  3. URL-Generierung – Eine temporäre Blob-URL wird mit URL.createObjectURL() erstellt
  4. Iframe Loading – Die Blob-URL wird dem Attribut src des Sandbox-Iframes zugewiesen
  5. Rendering – Der Browser rendert das HTML-Dokument innerhalb des Iframes und führt dabei eingebettetes CSS und JavaScript aus
  6. Console Capture – Die Methoden console.log, console.error und console.warn des Iframes werden überschrieben, um die Ausgabe über die Pipeline an das Bedienfeld „Konsolenausgabe“ weiterzuleiten
  7. Bereinigung – Die Blob-URL wird nach dem Laden widerrufen, um Speicher freizugeben

Sicherheitsmodell

Sicherheit ist ein zentraler Designaspekt. Wir verwenden mehrere Isolationsebenen:

Sandboxed Iframe

Der Vorschau-Iframe verwendet das HTML5-Attribut sandbox mit den folgenden Berechtigungen:

  • allow-scripts – Ermöglicht die JavaScript-Ausführung innerhalb des Iframes (notwendig für JS-Vorschauen)
  • allow-modals – Ermöglicht die Dialoge alert(), confirm() und prompt()
  • allow-same-origin – Erforderlich für das Laden der Blob-URL (der Inhalt muss den Ursprung mit der Blob-URL teilen)

Die Sandbox umfasst ausdrücklich Folgendes nicht:

  • allow-top-navigation – Der Iframe kann nicht auf der übergeordneten Seite navigieren
  • allow-forms – Formularübermittlungen werden blockiert (verhindert versehentliche Datenexfiltration)
  • allow-popups – Popup-Fenster werden blockiert

Blob-URL-Isolierung

Anstatt Code über document.write() oder srcdoc einzuschleusen, verwenden wir Blob-URLs. Dies sorgt für eine bessere Isolation, da der Browser die Blob-URL als separates Dokument mit eigenem Ausführungskontext behandelt.

Keine serverseitige Verarbeitung

Ihr Code wird niemals über das Netzwerk übertragen. Es bleibt vom Moment Ihrer Eingabe bis zum Schließen des Tabs im Speicher Ihres Browsers gespeichert. Es gibt keinen Server, der kompromittiert werden könnte, keine Datenbank, die gehackt werden könnte, und keinen API-Endpunkt, der ausgenutzt werden könnte.

Editor-Design

Der Code-Editor ist ein gestaltetes

  • Zeilennummern – Ein synchronisiertes, schreibgeschütztes Bedienfeld, das Zeilennummern anzeigt und zusammen mit dem Editor scrollt
  • Tab-Unterstützung – Die Tab-Taste fügt zwei Leerzeichen ein, anstatt den Fokus zu verschieben (Standardverhalten des Code-Editors)
  • Monospace-Schriftart – Verwendet JetBrains Mono für optimale Codelesbarkeit
  • Rechtschreibprüfung deaktiviert – Verhindert, dass der Browser „Rechtschreibfehler“ im Code unterstreicht.

Leistungsüberlegungen

  • Das gesamte Tool wird in einer einzigen HTML-Datei mit zwei kleinen JS-Dateien und einer CSS-Datei geladen
  • Es werden keine JavaScript-Frameworks oder -Bibliotheken verwendet – der gesamte Code ist Vanilla JS
  • Schriftarten werden asynchron mit font-display: swap geladen
  • Das Tool ist innerhalb von Millisekunden nach dem Laden der Seite interaktiv
  • Blob-URLs werden nach der Verwendung widerrufen, um Speicherverluste zu verhindern

Zugänglichkeit

Das Tool ist auf Barrierefreiheit ausgelegt:

  • Alle interaktiven Elemente verfügen über ARIA-Beschriftungen
  • Das FAQ-Akkordeon verwendet die richtigen aria-expanded-Zustände
  • Der Fokus liegt deutlich auf allen interaktiven Elementen
  • Der Farbkontrast entspricht den WCAG AA-Richtlinien
  • Das Tool ist vollständig über die Tastatur navigierbar
  • Toast-Benachrichtigungen verwenden role="status" und aria-live="polite"

Responsives Design

Die Schnittstelle passt sich allen Bildschirmgrößen an:

  • Desktop (1024px+) – Editor- und Vorschaufenster nebeneinander
  • Tablet (768px–1024px) – Gestapelte Panels mit Layout in voller Breite
  • Mobil (<768px) – Gestapelte Panels, reduzierte Navigation, optimierte Touch-Ziele

SEO-Implementierung

Jede Seite dieser Website enthält:

  • Einzigartige Titel-Tags und Meta-Beschreibungen
  • Semantische HTML5-Elemente (Kopfzeile, Hauptzeile, Fußzeile, Navigation, Abschnitt, Artikel)
  • Kanonische URLs zur Vermeidung von Problemen mit doppeltem Inhalt
  • Strukturierte Daten (JSON-LD) für WebPage-, SoftwareApplication-, FAQPage- und BreadcrumbList-Schemas
  • Hreflang-Tags für mehrsprachige Unterstützung
  • Ein einzelnes H1 pro Seite mit der richtigen Überschriftenhierarchie

Probieren Sie den HTML Code Runner aus →