Outils de développement · Éditeur HTML WYSIWYG
Du DOM au balisage : comment la sérialisation innerHTML façonne le HTML que vous obtenez
· Comment ça marche
html entités HTML flux de travail du développeur
Explique les règles que les navigateurs suivent lorsqu'ils transforment une arborescence DOM en chaîne HTML, depuis l'échappement et les entités jusqu'à l'annulation des éléments et des citations d'attributs, et pourquoi la sortie de l'éditeur ressemble à ce qu'elle est.
Pourquoi <br> revient sous la forme <br /> dans ce désinfectant
Un fragment source contenant `<br>` laisse ce désinfectant sous la forme `<br />`. Ce résultat ne prouve pas que chaque navigateur sérialise le HTML avec une barre oblique. Il s'agit d'un choix délibéré dans le réécrivain de chaînes de ToolAcre, dont la branche void-element émet un espace et une barre oblique pour les éléments br et hr autorisés.
La distinction évite une fausse explication courante. La surface visuelle est lue via innerHTML, mais la source copiée est ensuite tokenisée et reconstruite par le code de l'application. Ce que les utilisateurs reçoivent reflète à la fois la chaîne DOM créée par le navigateur et les conventions de sortie plus étroites de ToolAcre, notamment les alias, les attributs filtrés et les balises équilibrées.
Tokenisation, réécriture de la liste autorisée - il ne s'agit pas d'une sérialisation innerHTML du navigateur
Le tokenizer analyse les caractères sans construire de nœuds DOM ni appeler DOMParser. Il reconnaît le texte, les commentaires, les déclarations, les balises de début, les balises de fin et les corps d'éléments de texte brut. La désinfection répète cette séquence plate, en conservant les structures autorisées, en déballant les emballages inconnus ordinaires et en supprimant les conteneurs dangereux avec leur contenu.
Par conséquent, l’orthographe originale n’est pas conservée. Les noms en casse mixte deviennent minuscules ; b devient fort, i devient em, strike et del deviennent s, et ins devient u. La sortie est régénérée à partir des jetons acceptés plutôt que renvoyée en tant que sous-chaîne d'origine, de sorte que le formatage source et les détails non pris en charge disparaissent de par leur conception.
Échapper le texte et les attributs tout en normalisant les entités connues
Le texte est d'abord décodé par l'entité, puis échappé à nouveau. Les esperluettes deviennent `&`, les signes inférieur et supérieur à deviennent `<` et `>`, et les caractères de contrôle interdits disparaissent. Cet ordre maintient un `&` stable à travers des passes répétées au lieu de le transformer en `&amp;`.
Les valeurs d'attribut suivent un chemin d'échappement plus strict qui cite également des guillemets doubles, des guillemets simples, des crochets angulaires et des esperluettes. Les entités connues sont décodées avant que les attributs acceptés ne soient émis. Les tests identifient l'idempotence pour les requêtes de texte et de liens, mais le code ne promet pas la préservation de l'orthographe de chaque entité d'auteur, comme une référence nommée ou numérique.
Éléments vides et balises de fermeture équilibrées dans le réécrivain personnalisé
Seuls br et hr sont tous deux autorisés et classés comme nuls dans l'ensemble de sortie. Ils ne reçoivent jamais de balises de fermeture. Pour les éléments autorisés non nuls, une pile ouverte enregistre l'imbrication. Une clôture croisée telle que forte autour d'eux provoque la fermeture des éléments internes en premier, produisant un balisage équilibré plutôt que de préserver un ordre mal formé.
Les éléments non fermés sont fermés à la fin, tandis que les balises de fermeture parasites sont ignorées. Il s’agit de la politique d’équilibrage du réécrivain, et non d’une implémentation complète de la récupération des erreurs HTML5 du navigateur. La source elle-même met en garde contre les différences entre les analyseurs, c'est pourquoi le résultat ne doit pas être commercialisé comme un désinfectant universel contre les entrées hostiles.
Les attributs sont autorisés et cités ; la commande à l'origine ne constitue pas à elle seule le contrat
Aucun sac d'attributs génériques ne survit. Les paragraphes et les titres n’en autorisent aucun ; les liens autorisent le href et le titre ; les abréviations autorisent le titre ; les citations permettent de citer ; les listes ordonnées permettent de démarrer et de taper. Chaque valeur émise est entre guillemets et les liens acceptés gagnent également `rel="noopener noreferrer nofollow"`.
L'ordre des attributs suit les jetons acceptés et le champ rel ajouté, mais s'appuyer sur l'ordre serait fragile. La signification réside dans les noms et valeurs autorisés. Un début d'entier mal formé est supprimé, les schémas href ou cite dangereux sont refusés et les attributs inconnus génèrent des raisons de suppression au lieu de faire silencieusement partie du balisage publié.
Exemple concret : aller-retour d'un extrait via le désinfectant de ToolAcre
Essayez `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>`. La classe est supprimée, B est mappé à fort, l'esperluette existante reste une esperluette échappée, br se ferme automatiquement et le lien non sécurisé perd son href tout en conservant le texte du lien visible.
Le mode jolie source place ensuite les éléments de bloc pris en charge sur les lignes et les retraits de la liste des enfants. Il laisse le contenu en ligne ensemble et préserve le texte à l'intérieur du pré. Le formatage est un pass de lisibilité sur une sortie déjà réécrite ; il ne s'agit pas d'un deuxième analyseur de sécurité et ne restaure pas les espaces supprimés par la normalisation précédente.
Ce que cela ne couvre pas : navigateur, XML ou sérialisation XHTML
Cet article ne décrit pas les garanties de sérialisation natives du navigateur, XMLSerializer, la syntaxe XHTML ou les règles facultatives de balise de fermeture HTML en général. Il documente les conventions observables dans ce référentiel. Les réclamations concernant ` ` spécifiquement sont omises car la table d'entité locale, et non un sérialiseur général de navigateur, détermine les références nommées reconnues.
Le générateur d'aperçu nettoie une fois de plus et enveloppe le fragment dans un document complet sur le thème clair. Copier HTML renvoie le fragment ; Le téléchargement HTML renvoie ce document. Ce sont des artefacts intentionnellement différents. Lisez l'étiquette d'action avant de supposer qu'un fichier téléchargé est identique en octets à la source copiée.
À retenir : le sérialiseur est cohérent, votre entrée ne l'était pas - résume comment prédire la sortie de l'éditeur et comment l'éditeur HTML WYSIWYG de ToolAcre montre ce que le navigateur produit réellement
Prédisez ToolAcre en suivant ses étapes : tokeniser la chaîne, décoder les entités prises en charge, appliquer des alias d'éléments et des listes autorisées, inspecter les URL, équilibrer les balises acceptées, échapper à la sortie et éventuellement l'imprimer joliment. Cette séquence explique le résultat réel avec plus de précision que de dire que innerHTML préserve ou sérialise simplement la source de l'auteur.
Utilisez le mode source pour observer la réécriture avec un petit appareil avant de traiter un long brouillon. Le désinfectant refuse les documents dépassant 500,000 caractères, de sorte que les entrées surdimensionnées échouent plutôt que de geler l'onglet. Gardez la propre politique HTML de la destination séparée du sous-ensemble délibérément compact de cet éditeur.