JavaScripts › Verschlüsselungen
Base64 kodieren
Wandelt Text in Base64 und zurück — mit korrekter Behandlung von Umlauten, an der die eingebaute Browserfunktion scheitert.
Base64 ist keine Verschlüsselung, sondern eine Umschrift. Sie verpackt beliebige Daten in 64 harmlose Zeichen — die Buchstaben A–Z und a–z, die Ziffern 0–9 sowie + und /. Erfunden wurde das für die E-Mail: Deren Technik stammt aus einer Zeit, in der nur einfache Textzeichen sicher durch alle Leitungen kamen. Ein angehängtes Bild muss deshalb bis heute in Base64 umgeschrieben werden, bevor es verschickt wird.
Ihr begegnet Base64 überall: in Datenkarten von Webseiten, in Bildern, die direkt im Quelltext stehen (data:image/png;base64,…), in Konfigurationsdateien und in dem „Basic Auth"-Kopf, mit dem sich Programme an Servern anmelden. Dieses Script wandelt in beide Richtungen: Text hinein, Base64 heraus — oder umgekehrt.
Weil Base64 so unleserlich aussieht, wird es gern für eine Verschlüsselung gehalten. Das ist es ausdrücklich nicht: Es gibt keinen Schlüssel, und jeder kann die Umschrift in einer Sekunde rückgängig machen — auch mit diesem Script. Wer etwas geheim halten will, braucht ein echtes Verfahren wie das Vigenère-Quadrat oder den RC4-Algorithmus. Wer nur eine Prüfsumme braucht, findet sie bei der SHA-256-Prüfsumme.
Eine Besonderheit dieses Scripts: Es geht korrekt mit Umlauten um. Die eingebaute Browserfunktion btoa wirft bei „Grüße" nämlich einen Fehler — warum das so ist und wie man es löst, steht ausführlich in der Erklärung weiter unten. Verwandt ist die URL-Kodierung, die dasselbe Problem für Internetadressen löst.
Umlaute und Emoji werden korrekt behandelt. Die Umwandlung läuft im Browser, es wird nichts übertragen.
So funktioniert das Script
Die eigentliche Umwandlung erledigen zwei eingebaute Funktionen des Browsers: btoa kodiert, atob dekodiert. Der interessante Teil des Scripts ist der Umweg drumherum — ohne ihn scheitert jeder deutsche Text.
const bytes = new TextEncoder().encode(text);Der Grund für diese Zeile ist ein Missverständnis aus den Neunzigern. btoa erwartet eine Zeichenkette, in der jedes Zeichen für genau ein Byte steht, also einen Wert von 0 bis 255. JavaScript-Text kann aber sehr viel mehr Zeichen enthalten: „ü" hat die Nummer 252, das geht noch, aber „€" hat 8364 und ein Emoji noch weit höhere. btoa("Grüße") wirft deshalb einen Fehler, ein Emoji erst recht.
TextEncoder löst das: Er wandelt den Text in UTF-8-Bytes um — das ist die Kodierung, in der praktisch das gesamte heutige Web gespeichert wird. Aus „ü" werden dabei zwei Bytes (195 und 188), aus einem Emoji vier. Alle liegen im Bereich 0 bis 255, und damit kann btoa arbeiten.
let roh = "";
for (let i = 0; i < bytes.length; i++) {
roh += String.fromCharCode(bytes[i]);
}
return btoa(roh);Ein kleiner Zwischenschritt bleibt: btoa will keine Byte-Liste, sondern eine Zeichenkette. Die Schleife baut aus jedem Byte wieder ein Zeichen — jetzt aber garantiert eines mit einer Nummer unter 256. Beim Dekodieren läuft alles spiegelbildlich: atob liefert eine solche Zeichenkette zurück, die Schleife macht daraus Bytes, und TextDecoder setzt aus den Bytes wieder lesbaren Text zusammen.
const roh = atob(text.replace(/\s+/g, ""));Base64 aus einer E-Mail oder einem Zertifikat ist oft auf viele Zeilen umbrochen. atob stört das, deshalb entfernt replace(/\s+/g, "") vorher alle Leerzeichen und Zeilenumbrüche. Das Muster \s steht für „irgendein Leerraumzeichen", das + für „eines oder mehrere davon" und das g für „überall im Text, nicht nur beim ersten Treffer".
try {
const zurueck = dekodieren(feld.value);
…
} catch (fehler) {
ausgabe.textContent = "Das war kein gültiges Base64. …";
}atob wirft bei ungültigen Zeichen einen Fehler, der ohne Absicherung das ganze Script beenden würde — der Knopf wäre danach tot, ohne dass der Besucher wüsste, warum. try … catch fängt das ab: Der Block hinter try wird versucht, und wenn dabei etwas schiefgeht, läuft stattdessen der catch-Block mit einer verständlichen Meldung.
Zum Anpassen: Für Base64 in Internetadressen ersetzt ihr im Ergebnis + durch - und / durch _ und schneidet die = am Ende ab — diese Variante findet ihr fertig im Zufallsschlüssel-Generator. Die Längenzunahme ist übrigens kein Zufall: Base64 braucht immer rund ein Drittel mehr Platz, weil es drei Bytes in vier Zeichen verpackt.
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.