Entwicklertools · HTML-WYSIWYG-Editor
Vom DOM zum Markup: Wie die Serialisierung von innerHTML das HTML formt, das Sie erhalten
· Wie es funktioniert
html HTML-Entitäten Entwickler-Workflow
Erklärt die Regeln, die Browser befolgen, wenn sie einen DOM-Baum wieder in einen HTML-String umwandeln, von Escapezeichen und Entitäten bis hin zu ungültigen Elementen und Attributanführungszeichen, und warum die Editorausgabe so aussieht, wie sie aussieht.
Warum <br> in diesem Desinfektionsmittel als <br /> zurückkommt
Ein Quellfragment, das `<br>` enthält, hinterlässt diesen Sanitizer als `<br />`. Dieses Ergebnis ist kein Beweis dafür, dass jeder Browser HTML mit einem Schrägstrich serialisiert. Dies ist eine bewusste Wahl im String-Rewriter von ToolAcre, dessen Void-Element-Zweig ein Leerzeichen und einen Schrägstrich für zulässige br- und hr-Elemente ausgibt.
Die Unterscheidung verhindert eine häufige falsche Erklärung. Die visuelle Oberfläche wird über innerHTML gelesen, aber die kopierte Quelle wird dann mit einem Token versehen und vom Anwendungscode neu erstellt. Was Benutzer erhalten, spiegelt sowohl den vom Browser erstellten DOM-String als auch die engeren Ausgabekonventionen von ToolAcre wider, einschließlich Aliase, gefilterte Attribute und ausgewogene Tags.
Tokenisierung rein, Zulassungsliste rausschreiben – das ist keine Browser-innerHTML-Serialisierung
Der Tokenizer scannt Zeichen, ohne DOM-Knoten zu erstellen oder DOMParser aufzurufen. Es erkennt Text, Kommentare, Deklarationen, Start-Tags, End-Tags und Rohtext-Elementkörper. Bei der Desinfektion wird dieser flache Ablauf wiederholt, wobei zulässige Strukturen beibehalten werden, gewöhnliche unbekannte Verpackungen ausgepackt werden und gefährliche Behälter mit ihrem Inhalt unterdrückt werden.
Folglich bleibt die ursprüngliche Schreibweise nicht erhalten. Namen mit gemischter Groß- und Kleinschreibung werden zu Kleinbuchstaben; b wird stark, i wird em, Strike und del werden s und ins wird u. Die Ausgabe wird aus akzeptierten Token neu generiert und nicht als ursprüngliche Teilzeichenfolge zurückgegeben, sodass Quellformatierungen und nicht unterstützte Details standardmäßig verschwinden.
Escaping von Text und Attributen bei gleichzeitiger Normalisierung bekannter Entitäten
Text wird zuerst entitätsdekodiert und erneut maskiert. Kaufmännische Und-Zeichen werden zu `&`, Kleiner-als- und Größer-als-Zeichen werden zu `<` und `>` und verbotene Steuerzeichen verschwinden. Diese Reihenfolge hält ein vorhandenes `&` über wiederholte Durchgänge hinweg stabil, anstatt es in `&amp;` umzuwandeln.
Attributwerte folgen einem strengeren Escape-Pfad, der auch doppelte Anführungszeichen, einfache Anführungszeichen, spitze Klammern und kaufmännische Und-Zeichen verwendet. Bekannte Entitäten werden dekodiert, bevor akzeptierte Attribute ausgegeben werden. Die Tests stellen die Idempotenz für Text- und Linkabfragen fest, der Code verspricht jedoch nicht die Beibehaltung der Schreibweise jeder Autorenentität, wie z. B. eine benannte gegenüber einer numerischen Referenz.
Leere Elemente und ausgeglichene schließende Tags im benutzerdefinierten Rewriter
Nur br und hr sind beide zulässig und werden im Ausgabesatz als ungültig eingestuft. Sie erhalten niemals schließende Tags. Für nicht leere zulässige Elemente zeichnet ein offener Stapel die Verschachtelung auf. Ein gekreuzter Abschluss wie „strong around em“ führt dazu, dass innere Elemente zuerst geschlossen werden, was zu einem ausgewogenen Markup führt, anstatt eine fehlerhafte Reihenfolge beizubehalten.
Nicht geschlossene Elemente werden am Ende geschlossen, während vereinzelte schließende Tags ignoriert werden. Dies ist die Ausgleichsrichtlinie des Rewriters und keine vollständige Implementierung der Browser-HTML5-Fehlerbehebung. Die Quelle selbst warnt vor Parser-Unterschieden, weshalb die Ausgabe nicht als universeller Sanitizer für feindliche Eingaben vermarktet werden darf.
Attribute werden auf die Zulassungsliste gesetzt und in Anführungszeichen gesetzt; Die Bestellung allein ist nicht der Vertrag
Es ist keine generische Attributtasche mehr vorhanden. Absätze und Überschriften erlauben keine; Links erlauben href und title; Abkürzungen erlauben Titel; Zitate erlauben Zitieren; Geordnete Listen ermöglichen Start und Typ. Jeder ausgegebene Wert wird in doppelte Anführungszeichen gesetzt und akzeptierte Links erhalten ebenfalls `rel="noopener noreferrer nofollow"`.
Die Attributreihenfolge folgt den akzeptierten Token und dem hinzugefügten rel-Feld, aber es wäre fragil, sich auf die Reihenfolge zu verlassen. Die Bedeutung liegt in den zulässigen Namen und Werten. Ein fehlerhafter Integer-Anfang wird gelöscht, unsichere href- oder Cite-Schemata werden abgelehnt und unbekannte Attribute erzeugen Gründe für die Entfernung, anstatt stillschweigend Teil des veröffentlichten Markups zu werden.
Funktioniertes Beispiel: Roundtripping eines Snippets durch den Sanitizer von ToolAcre
Probieren Sie `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>` aus. Die Klasse wird entfernt, B wird zu „strong“ zugeordnet, das vorhandene kaufmännische Und bleibt ein maskiertes kaufmännisches Und, br wird selbstschließend und der unsichere Link verliert seinen href, während der sichtbare Linktext erhalten bleibt.
Der Pretty-Source-Modus platziert dann unterstützte Blockelemente in Zeilen und rückt untergeordnete Elemente in die Liste ein. Es lässt Inline-Inhalte zusammen und bewahrt den Text im Pre. Bei der Formatierung handelt es sich um eine Verbesserung der Lesbarkeit bereits umgeschriebener Ausgaben. Es handelt sich nicht um einen zweiten Sicherheitsparser und stellt keine Leerzeichen wieder her, die durch eine frühere Normalisierung entfernt wurden.
Was dies nicht abdeckt – Browser, XML oder XHTML-Serialisierung
In diesem Artikel werden keine nativen Browser-Serialisierungsgarantien, XMLSerializer, XHTML-Syntax oder optionale HTML-Regeln für schließende Tags im Allgemeinen beschrieben. Es dokumentiert die beobachtbaren Konventionen in diesem Repository. Ansprüche speziell zu ` ` werden weggelassen, da die lokale Entitätstabelle und kein allgemeiner Browser-Serialisierer erkannte benannte Referenzen bestimmt.
Der Vorschau-Builder bereinigt das Fragment noch einmal und verpackt es in ein vollständiges, helles Dokument. HTML kopieren gibt das Fragment zurück; „HTML herunterladen“ gibt dieses Dokument zurück. Das sind absichtlich unterschiedliche Artefakte. Lesen Sie die Aktionsbezeichnung, bevor Sie davon ausgehen, dass eine heruntergeladene Datei Byte-identisch mit der kopierten Quelle ist.
Fazit: Der Serialisierer ist konsistent, Ihre Eingabe nicht – fasst zusammen, wie man die Editorausgabe vorhersagt und wie der HTML-WYSIWYG-Editor von ToolAcre anzeigt, was der Browser tatsächlich produziert
Sagen Sie ToolAcre voraus, indem Sie die einzelnen Schritte befolgen: Tokenisierung der Zeichenfolge, Dekodierung unterstützter Entitäten, Anwenden von Elementaliasen und Zulassungslisten, Überprüfen von URLs, Ausgleich akzeptierter Tags, Escape-Ausgabe und optionales Pretty-Print. Diese Sequenz erklärt das tatsächliche Ergebnis genauer, als wenn man sagt, dass innerHTML einfach die Quelle des Autors beibehält oder serialisiert.
Verwenden Sie den Quellmodus, um das Umschreiben mit einer kleinen Vorrichtung zu beobachten, bevor Sie einen langen Entwurf verarbeiten. Der Sanitizer lehnt Dokumente mit mehr als 500,000 Zeichen ab, sodass übergroße Eingaben fehlschlagen, anstatt dass die Registerkarte einfriert. Halten Sie die eigene HTML-Richtlinie des Ziels getrennt von der bewusst kompakten Teilmenge dieses Editors.