Base64, URL-Kodierung und HTML-Entities: Was jeder Entwickler wissen sollte
Wer regelmäßig Webanwendungen entwickelt, kennt Kodierungsprobleme aus eigener Erfahrung. Eine URL bricht ab, weil ein kaufmännisches Und falsch platziert ist. Eine HTML-Seite zeigt ein <-Zeichen statt einer Schließen-Klammer. Eine API liefert SGVsbG8gV29ybGQ= zurück — und man weiß nicht, was das bedeuten soll. Das sind alles Kodierungsprobleme, und drei Verfahren treten dabei besonders häufig auf: Base64, URL-Kodierung und HTML-Entities.
Dieser Leitfaden erklärt, wie jedes Verfahren funktioniert, zeigt konkrete Beispiele und verweist auf kostenlose Online-Tools zum Kodieren und Dekodieren ohne Installation.
Was ist Base64?
Base64 ist ein Verfahren zur Darstellung von Binärdaten ausschließlich mit druckbaren ASCII-Zeichen. Beliebige Bytesequenzen werden auf ein Alphabet aus 64 Zeichen abgebildet: A–Z, a–z, 0–9, + und /. Die Ausgabe ist immer Text — damit lässt sie sich überall einbetten, wo Rohdaten nicht zulässig sind: E-Mail-Anhänge, JSON-Payloads, data:-URLs in CSS und JWT-Token basieren alle auf Base64.
Beispiel — "Hallo Welt" kodieren:
- Eingabe:
Hallo Welt - Base64-Ausgabe:
SGFsbG8gV2VsdA==
Die =-Zeichen am Ende sind Auffüllung. Base64 erzeugt immer eine Ausgabe, deren Länge ein Vielfaches von 4 ist.
Wann verwenden:
- Bilder oder Schriftarten direkt in CSS oder HTML einbetten (
data:image/png;base64,...) - Binärdaten für JSON-APIs kodieren, die nur Text akzeptieren
- JWT-Token lesen oder erzeugen (Header und Payload sind Base64url-kodiert)
Base64 ist keine Verschlüsselung. Jeder, der die Zeichenkette sieht, kann sie in Sekunden dekodieren. Verwenden Sie Base64 zum Kodieren, nicht zum Verbergen von Informationen.
Testen Sie den Base64-Encoder und -Decoder von FileCrank.
Was ist URL-Kodierung (Prozentkodierung)?
URLs dürfen nur eine begrenzte Menge von Zeichen enthalten. Leerzeichen, kaufmännische Unds, Gleichheitszeichen, Schrägstriche und Nicht-ASCII-Zeichen haben in einer URL eine strukturelle Bedeutung — oder sind schlicht ungültig. Die URL-Kodierung (formal: Prozentkodierung) ersetzt unsichere Zeichen durch ein %-Zeichen, gefolgt von zwei Hexadezimalziffern, die den UTF-8-Bytewert des Zeichens darstellen.
Beispiel — "Hallo Welt" kodieren:
- Eingabe:
Hallo Welt - URL-kodierte Ausgabe:
Hallo%20Welt
Das Leerzeichen wird zu %20. Das kaufmännische Und & wird zu %26. Der Schrägstrich / wird zu %2F.
Wann verwenden:
- Query-Strings aufbauen:
?q=hallo%20welt&sprache=de - Sonderzeichen in Formulardaten übergeben
- API-Anfragen konstruieren, die Benutzereingaben enthalten
Modernes JavaScript bietet encodeURIComponent(), aber zum Inspizieren oder Debuggen einer kodierten URL ist ein Online-Tool schneller als das Öffnen einer Konsole.
Nutzen Sie den URL-Encoder und -Decoder von FileCrank.
Was sind HTML-Entities?
HTML verwendet bestimmte Zeichen als Syntaxelemente. Spitzklammern < und > begrenzen Tags, das kaufmännische Und & leitet Entity-Referenzen ein, und Anführungszeichen " begrenzen Attributwerte. Wenn Ihr Inhalt diese Zeichen buchstäblich enthält — z. B. wenn Sie Quellcode auf einer Seite darstellen möchten —, müssen Sie sie maskieren, damit der Browser sie nicht als Markup interpretiert.
HTML-Entities ersetzen diese Zeichen durch benannte oder numerische Referenzen:
Beispiel — einen HTML-Tag als Text anzeigen:
Um die Zeichenkette <h1>Hallo Welt</h1> auf einer Seite als Text anzuzeigen, schreibt man:
<h1>Hallo Welt</h1>
Wann verwenden:
- Code-Beispiele in Dokumentationen oder Blogbeiträgen anzeigen
- XSS-Sicherheitslücken verhindern, indem Benutzereingaben vor der HTML-Einbettung maskiert werden
- Typografische Sonderzeichen einfügen (
—,©, )
Nutzen Sie das HTML-Entities-Tool von FileCrank zum schnellen Maskieren und Demaskieren.
Alle drei Verfahren im Vergleich
Dieselbe Eingabe, verarbeitet durch jedes Verfahren:
Die Verfahren lösen unterschiedliche Probleme und sind nicht austauschbar:
- Base64 wandelt Binärdaten in Text um. Verwenden Sie es, wenn Binärdaten in einem Textkontext eingebettet werden müssen.
- URL-Kodierung behandelt Zeichen, die in einer URL ungültig oder mehrdeutig sind. Verwenden Sie sie beim Aufbau von URLs oder Query-Strings.
- HTML-Entities behandeln Zeichen, die von der HTML-Syntax reserviert sind. Verwenden Sie sie bei der Ausgabe von Text in HTML-Dokumenten.
Häufige Fehler
Fehler 1: Base64 für Sicherheitszwecke verwenden. Die Base64-Ausgabe sieht wie Kauderwelsch aus, lässt sich aber trivial umkehren. Verwenden Sie Base64 nicht, um Passwörter oder Token zu "verstecken". Setzen Sie stattdessen auf echte Verschlüsselung oder Hashing.
Fehler 2: Doppelte URL-Kodierung.
Wenn Sie encodeURIComponent() auf eine bereits kodierte Zeichenkette anwenden, erhalten Sie %2520 statt %20. Dekodieren Sie zuerst, dann kodieren Sie.
Fehler 3: HTML in Templates nicht maskieren. Benutzereingaben ohne Maskierung direkt in HTML einzufügen ist die häufigste Ursache von XSS-Sicherheitslücken. Maskieren Sie immer vor dem Rendern.
Zu den Tools
Alle drei Tools sind kostenlos, laufen vollständig im Browser und erfordern keine Registrierung:
- Base64-Encoder & -Decoder online kostenlos
- URL-Encoder & -Decoder online kostenlos
- HTML-Entities kodieren dekodieren online
Legen Sie sie als Lesezeichen an. Sie werden mindestens eines davon jede Woche brauchen.