Was ist HTML-Kodierung?

HTML-Kodierung ersetzt Sonderzeichen durch Entitätsreferenzen, um zu verhindern, dass Browser diese als HTML interpretieren.

Warum muss ich HTML kodieren?

Um HTML-Code sicher in Webseiten anzuzeigen und XSS-Angriffe zu verhindern.

HTML-Encoder/-Decoder | HandyTools Hub

Anleitung

Text eingeben: Ihr HTML oder Ihren Text eintippen oder einfügen.
Kodieren oder Dekodieren: Klicken, um HTML-Entities zu escapen bzw. zu entsperren.
Ergebnis ansehen: Die kodierte/dekodierte Ausgabe sofort sehen.
Kopieren: Das Ergebnis mit einem Klick in die Zwischenablage kopieren.

Warum HTML-Kodierung wichtig ist

Zeichen wie < und > sind für einen Browser nicht nur Text — sie sind die Syntax von HTML selbst. Wenn Sie ein Tutorial schreiben, das den Ausschnitt <div class="box"> zeigt, ohne ihn zu escapen, versucht der Browser, dieses div zu rendern, statt den Code anzuzeigen, und zerbricht Ihr Seitenlayout. Die Kodierung macht daraus <div>, das der Browser als wörtlichen Text anzeigt.

Derselbe Mechanismus ist eine Frontline-Verteidigung gegen Cross-Site-Scripting (XSS). Wenn eine App von Nutzern eingegebenen Text ohne Escaping anzeigt, kann ein Angreifer ein Script-Tag einsenden und es im Browser anderer Besucher ausführen lassen. Das Escaping von <, >, Anführungszeichen und & vor dem Rendern von Nutzerinhalten neutralisiert diesen Angriff. Ein häufiger Fehler, den man beachten sollte, ist das doppelte Kodieren: < wird zu &lt;, was als wörtlicher Text „<“ statt „<“ angezeigt wird.

Funktionen

Kodiert spezielle HTML-Zeichen (&, <, >, ”, ’)
Dekodiert HTML-Entities zurück zu Zeichen, einschließlich  
Unterstützung für numerische Zeichenreferenzen (€ und €)
Sicherer Modus für die fünf kritischen Zeichen, voller Modus für alle Nicht-ASCII-Zeichen
Ein-Klick-Kopieren in die Zwischenablage

Anwendungsfälle

Technische Autoren: HTML-, XML- oder SVG-Codebeispiele in Blogposts und Doku anzeigen.
Webentwickler: Nutzergenerierte Inhalte vor dem Rendern bereinigen.
Vorlagenautoren: Dynamische Werte escapen, die in HTML-E-Mail-Vorlagen eingefügt werden.
Fehlersuche: Verstümmelten, mit Entities gefüllten Text aus Altbestandssystemen dekodieren.

HTML-Encoder/-Decoder