Entwicklertools · HTML-WYSIWYG-Editor
Das DOM für Redakteure erklärt: Warum HTML ein Baum und keine Textdatei ist
· Hintergrund
html dom inhaltsbearbeitbar
Stellt Nicht-Programmierern das Document Object Model vor und behandelt Verschachtelungsregeln, übergeordnete und untergeordnete Elemente und wie Browser ungültige Verschachtelungen reparieren, um Editorverhalten zu erklären, das ansonsten willkürlich erscheint.
Warum Ihr <p> sich selbst geschlossen hat – wird mit Markup geöffnet, das sich nach dem Einfügen geändert hat
Ein Absatz scheint sich zu schließen oder zu verschieben, nachdem ein Fragment einen Editor durchlaufen hat, da der resultierende Baum – und nicht die ursprüngliche Zeichenfolge des Autors – letztendlich ausschlaggebend ist. ToolAcre fügt eine weitere Transformation hinzu: Es tokenisiert die vom Browser abgeleitete Quelle und schreibt sie unter seiner eigenen Zulassungsliste neu.
Wenn sich die Quelle ändert, fragen Sie, in welcher Phase sie geändert wurde. Der Browser hat möglicherweise das inhaltsbearbeitbare DOM mutiert, oder der Sanitizer hat möglicherweise einen Alias zugeordnet, einen Knoten entpackt oder akzeptierte Tags ausgeglichen. Wenn man jeden Unterschied als „Der Browser hat ihn behoben“ bezeichnet, verbirgt sich diese wichtige Grenze.
Boxen in Boxen – stellt das Baummodell anhand eines kurzen Beispiels vor
Stellen Sie sich Elemente als Kästchen vor, die durch Eltern-Kind-Beziehungen verbunden sind. In `<p>Read <strong>carefully</strong>.</p>` ist p das übergeordnete Element von Text, Strong und More Text. strong ist das übergeordnete Element des Wortes „sorgfältig“. Die Quelleneinrückung kann den Baum veranschaulichen, stellt jedoch keine Beziehung her.
Der hübsche Formatierer von ToolAcre platziert Blockcontainer in Zeilen und behält Inline-Elemente mit umgebendem Text bei. Listen erhalten eingerückte Li-Zeilen. Dieses Format dient zum Lesen bereinigter Ausgaben. Das eigentliche Modell bleibt verschachtelte Elemente und Textknoten, unabhängig davon, ob die Quelle kompakt oder über Zeilen verteilt ist.
Die zulässige Verschachtelung wird durch den Rewriter von ToolAcre ausgeglichen. Browser-Inhaltsmodelle sind umfassender
HTML definiert Inhaltsmodelle, die viel umfassender und detaillierter sind als die Richtlinien dieses Herausgebers. ToolAcre lässt einen bestimmten Satz zu, validiert jedoch nicht jede semantische Verschachtelungsregel. Sein Stapel gewährleistet einen wohlgeformten Abschluss zwischen zulässigen Tags; Das ist kein Beweis dafür, dass jede resultierende Beziehung ideales HTML für ein Ziel ist.
Beispielsweise sollte eine Liste geeignete Listenelemente enthalten, der generische Stack kann jedoch ungewöhnliche zulässige Kombinationen beibehalten, da es sich nicht um einen Schemavalidator handelt. Autoren sollten über die Symbolleiste oder die überprüfte Quelle sinnvolle Überschriften, Absätze und Listen erstellen und diese dann anhand der Zielanforderungen validieren, wenn die Korrektheit von Bedeutung ist.
ToolAcre repariert akzeptierte Tags mit einem Stapel, nicht mit dem vollständigen HTML-Parsing-Algorithmus
Browser wenden einen vollständigen HTML-Parsing-Algorithmus mit Fehlerbehebung an. ToolAcre implementiert es nicht erneut. Sein Tokenizer erkennt die von der Zulassungsliste benötigten Strukturen und sein Writer schließt akzeptierte innere Elemente, wenn ein kreuzendes End-Tag erscheint. Es fallen vereinzelte Schließungen ab und die verbleibenden Öffnungen werden am Ende geschlossen.
Die Quelle nennt explizit Parser-Unterschiede als Grund dafür, das Modul nicht als allgemeinen XSS-Filter für feindliche Eingaben zu behandeln. Ein Browser kann absichtlich fehlerhafte Zeichenfolgen unterschiedlich interpretieren. Die Vorschau-Sandbox bietet eine unabhängige Beschränkung der Ausführung innerhalb von ToolAcre, während Server weiterhin eine ordnungsgemäße HTML5-fähige Sanierung benötigen.
Textknoten und Leerzeichen – behandelt, warum im Baum Leerzeichen und Zeilenumbrüche zwischen Tags vorhanden sind
Text zwischen Elementen wird zu Text-Tokens, einschließlich Leerzeichen. Der hübsche Formatierer reduziert gewöhnliche Leerzeichen außerhalb von Pre, während der Pre-Inhalt exakt erhalten bleibt. Bei der Klartextkonvertierung werden nach Blockenden und für br Zeilenumbrüche eingefügt und dann die Anzahl der überschüssigen Leerzeilen reduziert.
Whitespace nimmt daher in jeder Phase unterschiedlich teil. Visuelle Abstände können aus Text, br, Blockgrenzen oder CSS stammen. Untersuchen Sie Knoten und Zeichen, anstatt jede sichtbare Lücke als Rand zu betrachten. Der Sanitizer kann die Formatierung von Leerzeichen normalisieren, ohne die Wörter zu ändern, die ein Leser sieht.
Arbeitsbeispiel: Verfolgen einer Notiz mit zwei Absätzen mit einer Liste – liest das erzeugte Markup als Baum und identifiziert Eltern und Kinder
Build `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. Das Fragment verfügt über drei untergeordnete Elemente auf Stammebene. Der Absatz enthält Text und ist stark; Die Liste enthält zwei li-Kinder, jeweils mit Text.
Wechseln Sie von der Quelle zur visuellen Darstellung und zurück. Der zulässige Baum sollte ausgewogen bleiben, und im hübschen Modus werden Überschrift und Absatz in Zeilen platziert, während Listenelemente eingerückt werden. Diese Übung ist kontrolliert; Es werden nicht alle fehlerhaften Eingaben oder Browser-Reparaturpfade angezeigt.
Was hiervon nicht abgedeckt wird: JavaScript-DOM-Programmierung oder das CSS-Box-Modell
In diesem Artikel werden keine JavaScript-DOM-Programmierung, Mutationsbeobachter, Auswahl-APIs oder das CSS-Box-Modell gelehrt. Elementbaum und Layout-Boxbaum sind verwandt, aber nicht identisch. Es wird auch nicht behauptet, dass es sich bei der handgeschriebenen Token-Liste um ein Browser-DOM handelt.
Aus einem aufgeräumten Baum ergibt sich keine allgemeine Sicherheitsschlussfolgerung. Ein Angreifer kann auf Parsing-Unterschiede und URLs abzielen, weshalb Ausgabefilterung, Sandbox-Vorschau und Serverbereinigung unterschiedlich bleiben. Verwenden Sie das Baummodell, um über die Struktur nachzudenken, und nicht, um auf die Sicherheitsüberprüfung des empfangenden Systems zu verzichten.
Imbiss: Denken Sie in Bäumen – fasst das mentale Modell zusammen und zeigt, wie die Markup-Ausgabe des HTML-WYSIWYG-Editors von ToolAcre den Baum darstellt, den Sie erstellen
Denken Sie in Bäumen, wenn visuelles Verhalten willkürlich erscheint. Identifizieren Sie die von Ihnen beabsichtigten übergeordneten, untergeordneten und Textknoten und vergleichen Sie sie dann mit der gefilterten Quelle. ToolAcre macht diese Inspektion praktisch, indem es inhaltsbearbeitbare Entwürfe mit einem lesbaren, umgeschriebenen Fragment kombiniert.
Ein starkes mentales Modell zeigt auch Grenzen auf: Unwrapped div verliert einen übergeordneten Baum, gelöschtes Skript verliert seinen Unterbaum und b wird stark. Sobald diese Transformationen explizit sind, werden Korrekturen zu strukturellen Entscheidungen und nicht zu wiederholten visuellen Anstößen, deren Markup unbekannt bleibt.