JavaScripts › Verschlüsselungen
URL-Kodierung
Schreibt Umlaute, Leerzeichen und Sonderzeichen in die Prozentschreibweise um, die Internetadressen verlangen — und wieder zurück.
In einer Internetadresse ist nur ein enger Zeichenvorrat erlaubt: Buchstaben ohne Umlaute, Ziffern und eine Handvoll Satzzeichen. Alles andere muss umgeschrieben werden — in die sogenannte Prozentkodierung. Aus einem Leerzeichen wird %20, aus „ü" wird %C3%BC, aus dem Kaufmanns-Und wird %26. Diesen Umbau nimmt euch das Script ab, in beide Richtungen.
Praktisch braucht ihr das immer dann, wenn ihr Werte an eine Adresse anhängt: einen Suchbegriff hinter ?q=, einen Betreff in einem Mailto-Link, einen Dateinamen mit Leerzeichen. Vergisst man die Kodierung, zerreißt ein einziges & im Wert die ganze Adresse, weil der Server es als Trennzeichen zum nächsten Wert liest — eine der häufigsten Fehlerquellen bei selbstgebauten Links.
Das Script bietet beide Kodier-Varianten an, die JavaScript kennt, und darin liegt der eigentliche Lerneffekt. Einzelwert kodiert kompromisslos alles, was in einem Wert stehen könnte, auch Schrägstriche und Doppelpunkte. Ganze Adresse lässt genau die Zeichen stehen, die eine Adresse strukturieren — :, /, ?, &, # — und kodiert nur den Rest. Die falsche Wahl ist ein klassischer Fehler: Kodiert man eine ganze Adresse als Einzelwert, wird aus https:// ein unbrauchbares https%3A%2F%2F.
Wie Base64 ist auch die Prozentkodierung keine Verschlüsselung, sondern eine reine Umschrift ohne Schlüssel. Verwandtes: Base64 löst dasselbe Problem für E-Mail-Anhänge, und der Zeichentabelle-Eintrag zeigt, welche Nummer hinter welchem Zeichen steckt.
Beispiel für den Unterschied: Tragt oben einmal https://beispiel.de/suche?q=Käse ein und drückt beide Kodierknöpfe.
So funktioniert das Script
Das Kodieren selbst erledigen drei eingebaute Funktionen des Browsers. Das Script zeigt vor allem, wann welche zu nehmen ist — und baut nebenbei eine Tabelle, die sichtbar macht, was überhaupt passiert.
encodeURIComponent(feld.value) // für einen einzelnen Wert
encodeURI(feld.value) // für eine ganze AdresseDer Unterschied liegt allein in der Liste der Zeichen, die stehen bleiben dürfen. encodeURI verschont die Strukturzeichen einer Adresse — : / ? # [ ] @ ! $ & ' ( ) * + , ; = —, weil sie dort eine Aufgabe haben. encodeURIComponent kodiert sie mit, weil sie in einem Wert nichts steuern sollen, sondern schlicht Zeichen sind. Die Faustregel: alles, was hinter ein = gehört, mit encodeURIComponent; eine komplette Adresse mit encodeURI.
const kodiert = encodeURIComponent(zeichen);
if (kodiert !== zeichen && !gesehen[zeichen]) { … }Hier steckt ein hübscher Trick: Um herauszufinden, ob ein Zeichen überhaupt umgeschrieben werden muss, kodiert das Script es einzeln und vergleicht das Ergebnis mit dem Original. Sind beide gleich, war nichts zu tun. Das erspart eine lange, fehleranfällige Liste erlaubter Zeichen im eigenen Code. Das Objekt gesehen dient als Merkzettel, damit dasselbe Zeichen nicht mehrfach in der Tabelle landet.
<tr><td>ü</td><td>252</td><td>%C3%BC</td></tr>An dieser Tabellenzeile sieht man etwas Wichtiges: Das „ü" hat die Nummer 252, kodiert wird es aber als %C3%BC, also als zwei Prozentgruppen. Der Grund ist derselbe wie bei Base64: Die Kodierung arbeitet nicht mit Zeichennummern, sondern mit UTF-8-Bytes, und ein Umlaut braucht dort zwei Bytes. Zeichen unter 128 — das gesamte englische Alphabet — brauchen nur eines, deshalb wird aus dem Leerzeichen das einzelne %20.
try {
ausgabe.textContent = decodeURIComponent(feld.value);
} catch (fehler) { … }decodeURIComponent wirft einen Fehler, sobald ein Prozentzeichen auftaucht, dem keine zwei gültigen Sechzehnerziffern folgen — etwa in „100% sicher". Ohne try … catch würde das Script an dieser Stelle abbrechen und der Knopf wäre bis zum Neuladen der Seite wirkungslos.
Zum Anpassen: Wollt ihr Leerzeichen als + statt als %20 (so machen es Formulare beim Absenden), hängt an das Ergebnis ein .replace(/%20/g, "+") an — und denkt daran, es beim Dekodieren spiegelbildlich rückgängig zu machen. Die alten Funktionen escape und unescape, die man in Beispielen aus den Neunzigern noch findet, solltet ihr nicht benutzen: Sie behandeln Umlaute falsch und gelten seit langem als überholt.
Script für die eigene Homepage
Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.