HTML-Escape-Tool + durchsuchbare Liste der HTML-Entities | We.Inc
Maskiere und demaskiere HTML in deinem Browser und durchsuche dann 100 gängige HTML-Entities und Sonderzeichen. Kopiere die benannte Entity, den numerischen Code, den CSS-content-Wert oder das JS-Escape mit einem Klick.
HTML maskieren bedeutet, die Zeichen, die ein Browser als Markup liest, durch Entities zu ersetzen: & wird zu &, < wird zu < und > wird zu >. In Attributwerten müssen auch Anführungszeichen maskiert werden. Füge unten Text ein, um ihn zu maskieren oder zu demaskieren, oder durchsuche die Zeichentabelle und kopiere jede Entity als Name, Nummer oder CSS-Wert.
Die fünf Zeichen, auf die es ankommt
Zeichen
Entity
Wann es maskiert werden muss
&
Immer im Text, wenn es eine Referenz einleiten könnte
<
Immer im Textinhalt
>
Überall empfehlenswert; in einigen Kontexten Pflicht
"
In Attributwerten, die in doppelten Anführungszeichen stehen
' or '
In Attributwerten, die in einfachen Anführungszeichen stehen
Ein Konverter in beide Richtungen für ganze Textblöcke, dazu eine durchsuchbare Liste der Zeichen, die man wirklich braucht: Anführungszeichen, Striche, Leerzeichen, Währungen, Mathematik, Pfeile, griechische Buchstaben und Emoji. Jede Zeile lässt sich auf vier Arten kopieren.
Füge Text oder Markup in das Feld ein und wähle Maskieren oder Demaskieren. Das Ergebnis aktualisiert sich während der Eingabe.
Aktiviere den Attributmodus, wenn der Text in einen Attributwert kommt, damit auch Anführungszeichen maskiert werden.
Aktiviere Nicht-ASCII kodieren, wenn die Datei in einer anderen Kodierung als UTF-8 gespeichert oder versendet wird; dann wird jeder Buchstabe mit Akzent und jedes Sonderzeichen zu einer numerischen Referenz.
Durchsuche die Tabelle nach Name, Zeichen oder Gruppe und klicke dann auf Name, Nummer, CSS oder JS, um diese Form zu kopieren.
Maskiere in dem Moment, in dem du Text in HTML einfügst, nicht beim Speichern. Bereits maskiert gespeicherter Text führt später zu doppelter Maskierung wie &amp;.
Frameworks wie React maskieren Textinhalte für dich. Manuell maskieren musst du nur, wenn du HTML-Strings von Hand zusammensetzt.
Ein geschütztes Leerzeichen ( ) hält zwei Wörter in derselben Zeile, zum Beispiel eine Zahl und ihre Einheit. Verwende keine Ketten davon für das Layout; nimm stattdessen CSS-Margins.
In CSS erwartet die Eigenschaft content einen Backslash und den Hex-Code, ein Pfeil nach rechts ist also content: "\2192". Füge nach dem Code ein Leerzeichen ein, wenn das nächste Zeichen eine Hex-Ziffer ist.
Häufige Fragen
Was ist der Unterschied zwischen einer benannten und einer numerischen Entity?
Brauche ich Entities noch, wenn meine Seite UTF-8 ist?
Nur für die Zeichen, die im Markup eine Bedeutung haben: &, < und in Attributen das verwendete Anführungszeichen. Auf einer UTF-8-Seite kannst du Zeichen wie €, é oder → direkt eingeben. Entities dafür sind optional und helfen vor allem, wenn ein Editor oder E-Mail-System Nicht-ASCII-Text verstümmelt.
Ist ' gültiges HTML?
Ja, in HTML5. In HTML 4 fehlte es, deshalb verwendet älterer Code stattdessen '. Beide funktionieren in jedem aktuellen Browser, und die Maskieren-Option auf dieser Seite gibt für die größtmögliche Kompatibilität ' aus.
Reicht HTML-Maskierung, um XSS zu verhindern?
Sie verhindert, dass eingeschleuster Text in normalem Elementinhalt und in Attributen mit Anführungszeichen zu Markup wird. Sie macht einen Wert aber nicht sicher in einem script-Block, einem Inline-Event-Handler, einem style-Attribut oder einer URL wie href, die jeweils eine eigene Kodierung oder Validierung brauchen. Nutze die eingebaute Maskierung deines Frameworks und vermeide es, HTML aus Strings zusammenzubauen, wo immer es geht.
Wird mein Text irgendwohin gesendet?
Nein. Maskieren und Demaskieren laufen in deinem Browser, und nichts, was du einfügst, verlässt die Seite.
Warum Browser überhaupt Entities brauchen
Ein HTML-Parser liest < als Beginn eines Tags und & als Beginn einer Zeichenreferenz. Enthält ein Produktname oder ein Codebeispiel diese Zeichen, kann der Browser einen Teil des Textes ausblenden, ihn mit dem nächsten Tag verschmelzen oder im schlimmsten Fall eingeschleustes Markup ausführen. Durch das Maskieren weiß der Parser, dass er das Zeichen anzeigen soll, statt darauf zu reagieren.
Die Faustregel: Maskiere &, < und > im Text und zusätzlich das Anführungszeichen in Attributwerten. Alles andere ist eine Frage der Bequemlichkeit oder der Kodierung.
Entities in CSS und JavaScript
HTML-Entities funktionieren nur in HTML. In einem Stylesheet schreibt man ein Zeichen als Backslash mit seinem Hex-Code, deshalb enthält die Tabelle eine CSS-Spalte für Icons in Pseudo-Elementen und eigene Aufzählungszeichen. In JavaScript-Strings ist das Gegenstück \u mit vier Hex-Ziffern oder \u{...} für Zeichen jenseits von U+FFFF wie Emoji.
Wenn du Text in JavaScript mit textContent setzt, maskiere ihn nie vorher: Der Browser behandelt ihn bereits als reinen Text, und eine Maskierung würde die Entity wörtlich anzeigen.