Comment fonctionne HTML Code Runner

Une plongée approfondie dans l'architecture technique, le modèle de sécurité et les décisions de conception derrière l'outil.

Présentation de l'architecture

HTML Code Runner est une application purement côté client. Il n'y a pas de code de traitement de serveur principal, pas de base de données stockant des extraits et aucun appel d'API vers des services externes. L'ensemble de l'outil s'exécute dans le navigateur de l'utilisateur à l'aide des technologies Web standard : HTML, CSS et JavaScript.

Le pipeline d’exécution de code

Lorsque vous cliquez sur le bouton Exécuter, la séquence suivante se produit :

  1. Code Capture — Le contenu HTML de l'éditeur de zone de texte est lu sous forme de chaîne
  2. Création de Blob — La chaîne de code est enveloppée dans un objet Blob de type MIME text/html
  3. Génération d'URL : une URL de blob temporaire est créée à l'aide de URL.createObjectURL()
  4. Chargement Iframe : l'URL du blob est affectée à l'attribut src de l'iframe en bac à sable.
  5. Rendu : le navigateur restitue le document HTML dans l'iframe, en exécutant tous les CSS et JavaScript intégrés.
  6. Console Capture : les méthodes console.log, console.error et console.warn de l'iframe sont remplacées pour rediriger la sortie vers le panneau Sortie de la console.
  7. Nettoyage : l'URL du blob est révoquée après le chargement pour libérer de la mémoire.

Modèle de sécurité

La sécurité est une considération essentielle en matière de conception. Nous utilisons plusieurs couches d'isolation :

Iframe en bac à sable

L'iframe d'aperçu utilise l'attribut HTML5 sandbox avec les autorisations suivantes :

  • allow-scripts — Active l'exécution de JavaScript dans l'iframe (nécessaire pour les aperçus JS)
  • allow-modals — Autorise les boîtes de dialogue alert(), confirm() et prompt()
  • allow-same-origin — Requis pour le chargement de l'URL du Blob (le contenu doit partager l'origine avec l'URL du Blob)

Le bac à sable n'inclut pas :

  • allow-top-navigation — L'iframe ne peut pas naviguer dans la page parent
  • allow-forms — Les soumissions de formulaires sont bloquées (empêche l'exfiltration accidentelle de données)
  • allow-popups — Les fenêtres pop-up sont bloquées

Isolement des URL Blob

Plutôt que d'injecter du code via document.write() ou srcdoc, nous utilisons des URL Blob. Cela offre une meilleure isolation car le navigateur traite l’URL du Blob comme un document distinct avec son propre contexte d’exécution.

Aucun traitement côté serveur

Votre code n'est jamais transmis sur le réseau. Il reste dans la mémoire de votre navigateur à partir du moment où vous le tapez jusqu'à ce que vous fermiez l'onglet. Il n’y a aucun serveur à compromettre, aucune base de données à violer et aucun point de terminaison d’API à exploiter.

Conception de l'éditeur

L'éditeur de code est un élément stylisé

  • Numéros de ligne : un panneau synchronisé en lecture seule qui affiche les numéros de ligne et défile en tandem avec l'éditeur.
  • Prise en charge des tabulations : la touche Tab insère deux espaces au lieu de déplacer le focus (comportement standard de l'éditeur de code).
  • Police Monospace : utilise JetBrains Mono pour une lisibilité optimale du code
  • Vérification orthographique désactivée : empêche le navigateur de souligner les "fautes d'orthographe" du code.

Considérations relatives aux performances

  • L'ensemble de l'outil se charge dans un seul fichier HTML avec deux petits fichiers JS et un fichier CSS
  • Aucun framework ou bibliothèque JavaScript n'est utilisé - tout le code est Vanilla JS
  • Les polices sont chargées de manière asynchrone avec font-display: swap
  • L'outil est interactif quelques millisecondes après le chargement de la page
  • Les URL Blob sont révoquées après utilisation pour éviter les fuites de mémoire

Accessibilité

L'outil est conçu dans un souci d'accessibilité :

  • Tous les éléments interactifs ont des étiquettes ARIA
  • L'accordéon FAQ utilise les états aria-expanded appropriés
  • Le focus est clairement visible sur tous les éléments interactifs
  • Le contraste des couleurs est conforme aux directives WCAG AA
  • L'outil est entièrement navigable au clavier
  • Les notifications Toast utilisent role="status" et aria-live="polite"

Conception réactive

L'interface s'adapte à toutes les tailles d'écran :

  • Bureau (1 024 px+) – Éditeur côte à côte et panneaux d'aperçu
  • Tablette (768 px – 1 024 px) : panneaux empilés avec disposition sur toute la largeur
  • Mobile (<768px) : panneaux empilés, navigation réduite, cibles tactiles optimisées

Implémentation du référencement

Chaque page de ce site comprend :

  • Balises de titre et méta descriptions uniques
  • Éléments HTML5 sémantiques (en-tête, principal, pied de page, navigation, section, article)
  • URL canoniques pour éviter les problèmes de contenu en double
  • Données structurées (JSON-LD) pour les schémas WebPage, SoftwareApplication, FAQPage et BreadcrumbList
  • Balises Hreflang pour une prise en charge multilingue
  • Un seul H1 par page avec une hiérarchie de titres appropriée

Essayez HTML Code Runner →