CSS, HTML und Javascript mit {stil}

encodeURI, decodeURI:
Sonderzeichen in URLs und Dateinamen

Encode URI: Adresse verschlüsseln

Werden Informationen über die URL einer Webseite übergeben (also in Formularen mit GET), muss sichergestellt werden, dass keine unerlaubten Zeichen im Query-String vorkommen.

Die Probleme beginnen mit Sonderzeichen in Dateinamen von PDF-Dokumenten und Bildern:

http://www.pretty-name.de/PDF mit hübschen Kätzchen.pdf

Solche URLs müssen encodiert – konvertiert oder verschlüsselt – werden.

http://www.pretty-name.de/PDF%20mit%20h%C3%BCbschen%20K%C3%A4tzchen.pdf

und laufen in den Query Strings bei Shops mit Produktnamen, Autoren und Ortsnamen zur Höchstform auf.

Damit jede Maschine alles korrekt lesen kann, sind in URLs (und in Query Strings) nur Buchstaben des Alphabets, Ziffern und die Handvoll Sonderzeichen erlaubt, die in einer URL oder Webadresse vorkommen können. Alle anderen Zeichen müssen konvertiert – encodiert – werden, damit keine Probleme oder sogar Sicherheitslücken entstehen.

Auch bei Cookies codiert man den Wert vor dem Speichern, denn die Werte von Cookies dürfen keine Semikolons, keine Kommas oder Blanks oder Leerzeichen enthalten.

encodeURI

encodeURI(s) nimmt den unverschlüsselten String gibt die encodierte Version eines Strings zurück. Dabei werden bestimmte Zeichen durch ein, zwei oder drei UTF-8-Escape-Sequenzen ersetzt. Der Original-String bleibt unverändert.

  • entweder zu zwei Ziffern (%xx) oder
  • ihrem hexadezimalen Äquivalent (%uxxxx) mit vier Ziffern.

Ein Leerzeichen wird z.B. durch %20 und ein Semikolon durch %3B dargestellt.

Durch die Codierung wird der Query-String von Formularen portabel und kann auf allen Systemen, die Ascii unterstützen, korrekt dargestellt werden.

encodeURI(string) verschlüsselt alle Zeichen außer

a-z A-Z 0-9 ! ' $ & / ( ) ? , . - # + ; : _ *

	
<input type="text" id="myString" value="" />
<input type="text" id="encoded" disabled />
<input type="text" id="decoded" disabled />
	
var myString = document.getElementById('myString').value;
var encoded = document.getElementById('encoded');
var decoded = document.getElementById('decoded');
	
encoded.value = encodeURI(myString);
decoded.value = decodeURI(encoded.value);

encodeURI() wandelt den übergebenen Parameter in eine URL um, wobei encodeURI( "meine Webseite.html#oben" ) meine%20Webseite.html#oben zurückgibt – das Trennzeichen für einen HTML-Anker wird nicht in die hexadezimale Form %23 umgewandelt. Wenn die URL als Parameter an ein CGI-Skript übergeben werden soll, muss encodeURIComponent() verwendet werden.

encodeURI() sollte aus Sicherheitsgründen mit jeder Benutzereingabe, die als Teil einer URI übergeben wird, aufgerufen werden. Wird die Eingabe nicht codiert, würde eine Benutzereingabe wie Meier &id=cid als "name=Meier%20&id=cid" übertragen und anstelle eines POST-Schlüssels für name hätten wir zwei POST-Schlüssel name und id. Wenn in einem PHP-Backend Register Globals aktiviert ist, kann eine fehlende Encodierung zu Sicherheitslücken führen.

decodeURI

decodeURI() ersetzt die Sonderzeichen in einer Escape-Sequenz, die mit encodeURI() erzeugt wurde, wieder durch die ursprünglichen Zeichen.

encodeURIComponent, decodeURIComponent

encodeURIComponent(string) verschlüsselt alle Zeichen außer

a-z A-Z 0-9 ! ' ( ) . - _ *

Der Unterschied zwischen encodeURI und encodeURIComponent liegt in einer Differenz von 11 Zeichen. Während encodeURI die Sonderzeichen eines Query-Strings in einer URL unangetastet lässt, verschlüsselt encodeURICompontent auch &, /, : und +.

##%23
$$%24
&&%26
++%28
,,%2C
//%2C
::%3A
;;%3B
==%3D
??%3F
@@%40

Wenn im Query-String z.B. ein Buchtitel »Leben, Leiden und Frust mit @« vorkommt, müssen das »,« und das »@« verschlüsselt werden – also

var title = encodeURIComponent ('Leben, Leiden und Frust mit @');
var autor = encodeURIComponent ('rüdiger@xxx.xx');
var url = encodeURI ('http://www.xxx.xx/?title=' + title + '&autor=' + autor);

document.getElementById('resp1').innerHTML = 
   encodeURI ('http://www.xxx.xx/?title=' + 
               title + '&autor=' + autor);

document.getElementById('resp2').innerHTML = 
    decodeURI ('http://www.xxx.xx/?title=' + 
                decodeURIComponent(title) + 
                '&autor=' + 
                decodeURIComponent(autor));
Zuerst die Kompontenten mit encodeURIComponent verschlüsseln, dann die URL mit encodeURI verschlüssen.

Auf dem Weg zurück müssen zuerst die Komponenten entschlüsselt werden