HTML Escapen/Unescapen
Wandelt Sonderzeichen wie &, <, >, " und ' in HTML-Entitäten um (escapen) oder wandelt Entitäten zurück in die ursprünglichen Zeichen (unescapen). Nützlich zum Schutz vor XSS und zum Einbetten von Text in HTML.
Wichtige benannte HTML-Entitäten
| Zeichen | Benannte Entität | Numerische Referenz | Beschreibung |
|---|---|---|---|
| & | & | & | Kaufmanns-Und (Symbol für "und") |
| < | < | < | Kleiner-als-Zeichen (identisch mit dem Startzeichen eines HTML-Tags) |
| > | > | > | Größer-als-Zeichen (identisch mit dem Endzeichen eines HTML-Tags) |
| " | " | " | Doppeltes Anführungszeichen (Trennzeichen für Attributwerte) |
| ' | ' | ' | Einfaches Anführungszeichen (Trennzeichen für Attributwerte) |
| |   | Geschütztes Leerzeichen (verhindert einen Zeilenumbruch) | |
| © | © | © | Copyright-Symbol |
| ® | ® | ® | Symbol für eingetragene Marke |
| ™ | ™ | ™ | Markensymbol |
| € | € | € | Eurozeichen |
| ¥ | ¥ | ¥ | Yen-Zeichen |
| ¢ | ¢ | ¢ | Cent-Zeichen |
Was HTML-Maskierung bewirkt
Die HTML-Maskierung wandelt die fünf Zeichen mit besonderer Bedeutung in HTML – &, <, >, " und ' – in Entitätsschreibweisen um, die der Browser nicht als Auszeichnung liest. Bettet man Benutzereingaben ohne dies unmittelbar in eine Seite ein, kann das Layout zerbrechen, weil < und > für Anfang und Ende eines Tags gehalten werden, und es kann Schadcode wie <script> zur Ausführung kommen – die als Cross-Site-Scripting, kurz XSS, bekannte Schwachstelle. Die Maskierung ist die grundlegende Abwehr dagegen.
Das Aufheben der Maskierung ist der umgekehrte Weg: Es macht benannte Entitäten wie & und numerische Verweise wie & wieder zu den Zeichen, für die sie stehen. Das braucht man, wenn man HTML-Quelltext von anderswo kopiert hat oder Beitragsdaten aus einem CMS oder Forum liest und die Entitätsform den eigentlichen Text schwer erkennbar macht. Die Umwandlung läuft vollständig im JavaScript des Browsers; das Eingegebene wird nirgendwohin gesendet.
So wandeln Sie Text um
- Richtung wählen Wählen Sie „Maskieren“, um Zeichen in Entitäten zu überführen, oder „Aufheben“, um Entitäten wieder in Zeichen zurückzuverwandeln.
- Text in das Eingabefeld einfügen Tragen Sie die Zeichenkette ein, die Sie in HTML einbetten wollen, oder jene, die Entitätsschreibweisen enthält.
- Das Ergebnis ablesen Die Ausgabe darunter aktualisiert sich während der Eingabe und wird bei jeder Änderung neu berechnet.
- Ergebnis kopieren Die Kopierschaltfläche legt den umgewandelten Text in die Zwischenablage – bereit zum Einfügen in einen CMS-Text oder in Quellcode.
Tipps für die Nutzung
- HTML-Escaping ist die Grundlage der XSS-Prävention (Cross-Site-Scripting). Escapen Sie Benutzereingaben immer, bevor Sie sie in HTML einbetten.
- Das Zeichen
&muss immer zuerst escaped werden. Wenn Sie zuerst andere Zeichen umwandeln, wird das&im neu erzeugten&doppelt escaped. - Beim Einbetten einer Zeichenkette in einen Attributwert ist es sicherer, sowohl
"(doppeltes Anführungszeichen) als auch'(einfaches Anführungszeichen) zu escapen, nicht nur eines davon. - Dieses Tool kann dezimale numerische Referenzen (
&), hexadezimale numerische Referenzen (&) sowie die wichtigsten benannten Entitäten (wie&) unescapen. - Viele Template-Engines (Blade, JSX, Vue usw.) escapen HTML beim Einsetzen von Variablen automatisch. Verwenden Sie jedoch eine Syntax für "rohe HTML-Ausgabe" wie
{!! !!}oder v-html, müssen Sie den Wert selbst escapen.
Wofür sich die Maskierung eignet
Code in einem CMS- oder Blogbeitrag zitieren
Fügt man eine Zeichenkette mit < oder > unverändert in einen Artikeltext ein, liest der Browser sie als Tag und die Darstellung zerfällt. Vorheriges Maskieren lässt sie unbeschadet erscheinen.
Beiträge aus Forum oder Kommentarbereich lesen
Liegen Beiträge in einer Datenbank noch in Entitätsform, stellt das Aufheben den ursprünglichen Text wieder her und macht ihn lesbar.
HTML-Fragmente in Markdown einbetten
Um Beispiel-Tags oder Quelltext in einem Markdown-Dokument zu zeigen, verhindert vorheriges Maskieren, dass der Markdown-Parser und der Browser sie als Auszeichnung deuten.
Eine HTML-Vorlage prüfen
Hilfreich beim Gegenüberstellen von Vorher und Nachher, wenn Sie ermitteln, wo eine Vorlagen-Engine ungewollt maskiert hat – oder eben gar nicht.
Begriffe zur HTML-Maskierung
- HTML-Entität (Zeichenverweis)
- Eine Schreibweise, um ein Zeichen mit besonderer Bedeutung in einem HTML-Dokument gefahrlos darzustellen. Die benannte Form beginnt mit einem Und-Zeichen und endet mit einem Semikolon, etwa
&. - Numerischer Zeichenverweis
- Eine Schreibweise, die ein Zeichen über seinen Unicode-Codepunkt angibt. Dezimal schreibt man
&, hexadezimal&; beide bezeichnen dasselbe Zeichen. - Cross-Site-Scripting (XSS)
- Eine Schwachstelle, bei der ein in Benutzereingaben enthaltenes Skript unmaskiert in eine Seite gelangt und im Browser anderer Besucher unbeabsichtigten Code ausführt. Die HTML-Maskierung ist die klassische Abwehr.
- Bereinigung (Sanitising)
- Der allgemeine Vorgang, gefährliche Bestandteile aus von außen empfangenen Daten zu entfernen oder sie in eine unschädliche Form zu bringen. Die HTML-Maskierung ist eine Art davon.
- Das Und-Zeichen zuerst maskieren
- Das Und-Zeichen muss vor allem anderen umgewandelt werden. Wandelt man zuerst die übrigen Zeichen um, werden die Und-Zeichen in den soeben erzeugten Entitäten wie
&ein zweites Mal maskiert – deshalb kommt es auf die Reihenfolge an. - Trennzeichen von Attributwerten
- Die doppelten und einfachen Anführungszeichen, die einen Attributwert in einem HTML-Tag einfassen. Taucht ein solches Zeichen unmaskiert im Wert auf, wird es für das Ende des Attributs gehalten.
Häufig gestellte Fragen
<, > und & – sind besonders, weil HTML-Parser sie als Teil der Syntax selbst interpretieren. Werden sie nicht escaped, kann der Browser sie fälschlicherweise als Anfang oder Ende eines Tags auffassen, was zu zerstörtem Layout oder XSS (Einschleusen bösartiger Skripte) führen kann.&, <, >, " und '. Nicht-ASCII-Zeichen wie Emojis oder Texte in anderen Sprachen werden in modernen UTF-8-Umgebungen problemlos direkt angezeigt und müssen daher nicht umgewandelt werden.
Übrigens – Der von SGML geerbte Mechanismus der "Zeichenreferenzen"
Der Ursprung der HTML-Entitäten (Zeichenreferenzen) reicht bis zu SGML (Standard Generalized Markup Language) zurück, dem Vorläufer von HTML. Das 1986 standardisierte SGML verfügte bereits über einen Mechanismus für "Zeichenreferenzen", um das Tag-Trennzeichen < im Fließtext selbst verwenden zu können. HTML übernahm diesen Mechanismus nahezu unverändert, und grundlegende benannte Entitäten wie <, > und & waren bereits in den frühen HTML-Spezifikationen der 1990er-Jahre definiert.
Benannte Entitäten wurden ursprünglich geschätzt, um spezielle Drucksymbole (wie das Copyright-Symbol ©, das Symbol für eingetragene Marken ® und diverse griechische Buchstaben) in reinen ASCII-Umgebungen darzustellen, bevor sich Unicode durchsetzte. Die HTML5-Spezifikation definiert letztlich über 2.000 benannte Entitäten und deckt sogar kleinere Symbole wie Häkchen und Notenzeichen ab.
Heute hat die Verbreitung der UTF-8-Kodierung den Bedarf an Zeichenreferenzen zur Vermeidung von Zeichensalat stark verringert. Drei Zeichen – <, > und & – müssen jedoch aus einem völlig anderen Grund weiterhin escaped werden. Sie haben für HTML-Parser eine besondere syntaktische Bedeutung (Anfang eines Tags, Ende eines Tags und Beginn einer Entität), sodass ein Versäumnis beim Escapen direkt zu zerstörtem Layout oder XSS-Sicherheitslücken führen kann.