KODIERUNGS-TOOL

HTML Encoder/Decoder

HTML-Entities kodieren und dekodieren. Mit Named Entities, Numeric Entities, Attribut-Modus und Zeichen-Analyse. 100% lokal im Browser.

HTML Encode HTML Decode XSS-Schutz Entity-Analyse

Hinweis: Dieses Tool kodiert und dekodiert HTML-Entities (Named & Numeric). Alle Berechnungen erfolgen lokal im Browser – deine Eingaben werden niemals hochgeladen.

Inhaltsverzeichnis

             Schnellübersicht
            HTML Encoder/Decoder: Sonderzeichen in Entities umwandeln und zurück
Named Entities: &amp;, &lt;, &gt;, &quot;, &apos; usw.
Numeric Entities: Dezimal (&#34;) und Hex (&#x22;)
Attribut-Modus: Speziell für HTML-Attributwerte
Zeichen-Analyse: Zeichen-für-Zeichen-Anzeige
Theorie: Über HTML-Entities und XSS-Schutz
Geschichte: Von HTML 2.0 zu HTML5
FAQ: Häufige Fragen zu HTML-Entities

        

1. HTML Encoder/Decoder

Wähle einen Modus und kodiere oder dekodiere deine HTML-Entities.

Eingabe HTML-Code oder Text mit Sonderzeichen eingeben – wird automatisch verarbeitet

Wichtige HTML-Entities

Zeichen	Named Entity	Numeric (Dez)	Numeric (Hex)	Bedeutung
<	<	<	<	Kleiner als – Tag-Start
>	>	>	>	Größer als – Tag-Ende
&	&	&	&	Ampersand – Entity-Start
"	"	"	"	Doppeltes Anführungszeichen
'	'	'	'	Einfaches Anführungszeichen
€	€	€	€	Euro-Zeichen
©	©	©	©	Copyright-Zeichen
®	®	®	®	Registriertes Warenzeichen
ä	ä	ä	ä	Umlaut a
ö	ö	ö	ö	Umlaut o
ü	ü	ü	ü	Umlaut u
ß	ß	ß	ß	Scharfes S
Leerzeichen				Geschütztes Leerzeichen

Anwendungsbeispiele

Sichere Ausgabe

Eingabe: <script>alert(1)</script>
Kodiert: <script>...</script>
Wird als Text angezeigt

Benutzereingaben

Kommentare, Foren, Chat
Immer kodieren vor Ausgabe
Niemals innerHTML direkt

Code anzeigen

HTML-Snippets in Doku
Beispiel-Code auf Websites
Muss kodiert werden

Sonderzeichen

©, ®, ™, €, £, ¥
→, ←, ↑, ↓, ★, ♥
Griechische Buchstaben

2. Theorie – HTML-Encoding

Verstehe, warum HTML-Encoding wichtig ist und wie es funktioniert.

Was ist HTML-Encoding?

HTML-Encoding (HTML Escaping) ersetzt reservierte Zeichen durch Entities:

Named: <, >, &
Numerisch: < (dezimal)
Hex: < (hexadezimal)
Zweck: Sonderzeichen als Text darstellen

<h1>Hallo</h1>

Warum HTML-Encoding?

Hauptgrund: XSS-Schutz! Ohne Encoding können Angreifer Schadcode einschleusen:

XSS: Cross-Site Scripting
Attribut-Breakout: Ausbruch aus "..."
Tag-Injection: Eigene Tags einschleusen
Session-Hijacking: Cookies stehlen

Die 5 kritischen Zeichen

Diese Zeichen müssen immer kodiert werden:

& → & (Entity-Start)
< → < (Tag-Start)
> → > (Tag-Ende)
" → " (Attribut)
' → ' (Attribut)

& < > " '

Best Practices

Immer kodieren: Bei HTML-Ausgabe
Kontext beachten: HTML, Attribut, URL, JS
Frameworks nutzen: Templating-Engines
Niemals innerHTML: Verwende textContent
Content-Security-Policy: Zusätzliche Absicherung
Validate Input: Aber nicht als einzige Maßnahme

element.textContent = userInput;

XSS-Beispiel: So funktioniert der Angriff

Verwundbarer Code: document.getElementById("x").innerHTML = userInput;
Angreifer sendet: <img src=x onerror="...">
Folge: Cookie wird an den Angreifer gesendet → Session-Hijacking!
Lösung: textContent verwenden oder Input HTML-encoden.

Wussten Sie schon?

HTML-Encoding ist kontextabhängig. Die Regeln für HTML-Body, HTML-Attribute, URLs, CSS und JavaScript sind unterschiedlich. Ein Zeichen, das in HTML sicher ist, kann in einem Attribut gefährlich sein! Moderne Frameworks wie React, Vue oder Angular übernehmen das Encoding automatisch – aber nur, wenn man die richtigen APIs verwendet.

3. Geschichte von HTML

Von HTML 1.0 bis HTML5 und modernen Web-Standards.

1991

HTML – Die erste Version

Tim Berners-Lee entwickelt HTML am CERN. Die erste Version hat 18 Tags. Entities gibt es noch nicht – Sonderzeichen werden direkt eingegeben.

1993

HTML 1.0 & Mosaic

HTML 1.0 wird als IETF-Internet-Draft veröffentlicht. Der Mosaic-Browser macht HTML populär. Erste Ansätze für Sonderzeichen.

1995

HTML 2.0 – Der erste Standard

RFC 1866 definiert HTML 2.0. Erste Character Entities werden eingeführt: <, >, &, ".

1997

HTML 3.2 & 4.0

HTML 3.2 (W3C) und HTML 4.0 erweitern den Entity-Katalog deutlich. Über 250 Named Entities werden standardisiert.

2000

XHTML 1.0

XHTML 1.0 verbindet HTML mit XML. Strengere Regeln: Alle Tags müssen geschlossen, alle Attribute in Anführungszeichen. XML-Entities werden unterstützt.

2008

HTML5 – Die Revolution

HTML5 wird als Working Draft veröffentlicht. Neue semantische Tags, native Video/Audio-Unterstützung, Canvas, LocalStorage.

2014

HTML5 – W3C Recommendation

HTML5 wird offizieller W3C-Standard. WHATWG und W3C arbeiten zusammen. Die Entity-Liste umfasst nun über 2.000 Einträge.

Heute

HTML Living Standard

WHATWG pflegt den HTML Living Standard – eine kontinuierlich aktualisierte Spezifikation. HTML-Encoding bleibt zentral für Web-Sicherheit (XSS-Schutz).

4. FAQ – Häufige Fragen

Häufige Fragen zu HTML-Encoding

Was ist HTML-Encoding und warum brauche ich es?

HTML-Encoding (auch HTML Escaping genannt) ersetzt reservierte Zeichen durch Entities:

Format: &name; oder &#nummer;
Beispiel: < → <

Warum brauchst du HTML-Encoding?

XSS-Schutz: Verhindert Script-Injection
Sonderzeichen: ©, €, →, ♥ korrekt anzeigen
Code-Darstellung: HTML-Snippets als Text zeigen
Attribut-Sicherheit: Verhindert Attribut-Breakout

Was ist XSS und wie schützt HTML-Encoding davor?

XSS (Cross-Site Scripting) ist eine der häufigsten Web-Schwachstellen:

Angriff: Angreifer schleust JavaScript ein
Ziel: Cookies stehlen, Session übernehmen, Daten manipulieren
Beispiel: <script>alert(document.cookie)</script>

Wie schützt HTML-Encoding?

Der Browser interpretiert <script> als Text, nicht als Tag
Der Code wird angezeigt, aber nicht ausgeführt
Kein JavaScript-Zugriff möglich

Faustregel: Immer kodieren, wenn Benutzerdaten im HTML ausgegeben werden!

Welche Zeichen müssen kodiert werden?

Die 5 kritischen Zeichen müssen immer kodiert werden:

Zeichen	Named Entity	Numerisch	Gefahr
`&`	`&`	`&`	Hoch
`<`	`<`	`<`	Kritisch
`>`	`>`	`>`	Kritisch
`"`	`"`	`"`	Hoch
`'`	`'`	`'`	Hoch

Zusätzlich empfohlen: / → /.

Named Entities vs. Numerische Entities – was ist besser?

Beide Varianten funktionieren, haben aber unterschiedliche Vor- und Nachteile:

Aspekt	Named	Numerisch
Lesbarkeit	Hoch	Niedrig
Verständlichkeit	Selbsterklärend	Kryptisch
Verfügbarkeit	~250 Zeichen	Alle Unicode
Länge	Kürzer	Länger

Empfehlung: Named Entities für häufige Zeichen, numerische für seltene Unicode-Zeichen.

Wann sollte ich NICHT HTML-encoden?

HTML-Encoding ist kontextabhängig. In folgenden Fällen ist es falsch oder schädlich:

URLs: Verwende URL-Encoding (%20)
JavaScript: Verwende \uXXXX oder JSON.stringify()
CSS: Verwende \XXXX oder &#xXXXX;
JSON: Verwende \" und \\
Attribut-Werte: Kontext beachten (URL, Event, Style)

Wichtig: Immer den Kontext berücksichtigen!

Was ist der Unterschied zwischen HTML-Encoding und URL-Encoding?

Die beiden Verfahren haben unterschiedliche Ziele:

Aspekt	HTML-Encoding	URL-Encoding
Zweck	HTML-Ausgabe	URLs, Query-Strings
Format	`<`, `<`	`%3C`
Standard	W3C / WHATWG	RFC 3986
Kritische Zeichen	& < > " '	Leerzeichen, Sonderzeichen

Wichtig: Die Verfahren sind nicht austauschbar!

Was sind die häufigsten Fehler?

Häufige Fehler:

Doppelte Kodierung: &lt; statt <
Falscher Kontext: HTML-Encoding in URL
Vergessen zu kodieren: innerHTML = userInput
Nur teilweise kodieren: Nur < statt aller 5 Zeichen
Attribut-Breakout: " nicht kodiert
Client-seitige Validierung: Reicht nicht als Schutz

Wie funktioniert HTML-Encoding in Frameworks?

Moderne Frameworks übernehmen HTML-Encoding automatisch:

React: {variable} ist sicher, dangerouslySetInnerHTML nicht
Vue: {{ variable }} ist sicher, v-html nicht
Angular: Standard-Interpolation ist sicher, [innerHTML] nicht
Django/Jinja2: Templates kodieren automatisch, |safe deaktiviert
PHP: htmlspecialchars() manuell aufrufen

Wichtig: Auch Frameworks können umgangen werden – immer die sicheren APIs verwenden!

Zusammenfassung

Die wichtigsten Punkte

HTML-Encoding: Sonderzeichen als Entities (<)
5 kritische Zeichen: & < > " '
XSS-Schutz: Verhindert Script-Injection
Named vs. numerisch: Lesbarkeit vs. Vollständigkeit
Kontext beachten: HTML ≠ URL ≠ JavaScript
Niemals innerHTML: Verwende textContent
Frameworks: Übernehmen Encoding automatisch
Doppelte Kodierung: Vermeiden!
Wichtig für: Benutzereingaben, Code-Darstellung, Sonderzeichen
Unser Tool: Encode/Decode mit Named & Numeric Entities

Weitere Kodierungs-Tools

URL Encoder/Decoder

URLs nach RFC 3986 kodieren und dekodieren.

Zum Tool

Base64 Encoder/Decoder

Text und Dateien in Base64 umwandeln und zurück.

Zum Tool

Hash Generator

MD5, SHA-1, SHA-256 und SHA-512 für Text und Dateien.

Zum Tool

Text ↔ Binary

Text in Binärcode umwandeln und zurück.

Zum Tool