Start · Sprachen · JavaScript · Referenz · Window.atob()

Window.atob()

Methode

Dekodiert einen Base64-kodierten String und gibt einen „Binär-String“ zurück, in dem jedes Zeichen genau ein Byte (0–255) darstellt.

seit JavaScript Baseline: alle Browser; Node.js 16+ (global, als L Kategorie: webapi

Signatur

Window.atob(encodedData)

Beschreibung

Die Methode atob() („ASCII to binary“) wandelt einen Base64-kodierten String zurück in die ursprünglichen Bytes. Das Ergebnis ist ein sogenannter Binär-String: Jedes Zeichen hat einen Codepunkt zwischen 0 und 255 und entspricht genau einem Byte. Das Gegenstück zum Kodieren ist btoa().

Typische Einsatzfälle sind das Auslesen von Nutzdaten aus Data-URLs, das Dekodieren des Payload-Teils eines JSON Web Tokens (nach Umwandlung von Base64URL in Standard-Base64) oder die Verarbeitung von Base64-Daten aus APIs, etwa eingebetteten Bildern oder Dateien.

Wichtig: atob() liefert kein UTF-8-dekodiertes Text-Ergebnis. Enthalten die ursprünglichen Daten Mehrbyte-Zeichen (Umlaute, Emojis), musst du den Binär-String zuerst in ein Uint8Array umwandeln und anschließend mit TextDecoder dekodieren. Die Methode steht auch in Web Workern über self.atob() bzw. global zur Verfügung.

Parameter

Name Typ Default Beschreibung
$encodedData Pflicht string Ein String mit Base64-kodierten Daten (Alphabet A–Z, a–z, 0–9, +, / sowie optionales Padding =). ASCII-Leerraum wird ignoriert. Werte, die kein String sind, werden in einen String umgewandelt.

Rückgabewert

Typ
string
Beschreibung
Ein Binär-String, in dem jedes Zeichen (Codepunkt 0–255) ein dekodiertes Byte darstellt.

Beispiele

Einfachen ASCII-String dekodieren

const encoded = 'SGFsbG8gV2VsdCE=';
const decoded = atob(encoded);
console.log(decoded);
Hallo Welt!

UTF-8-Text mit Umlauten korrekt dekodieren

// btoa-Gegenstück: UTF-8-Bytes von 'Grüße 👋' als Base64
const encoded = 'R3LDvMOfZSDwn5GL';

const binary = atob(encoded);
const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
const text = new TextDecoder().decode(bytes);

console.log(binary.length, text);
14 Grüße 👋

Payload eines JWT auslesen (Base64URL)

const decodeJwtPayload = (token) => {
  const base64Url = token.split('.')[1];
  // Base64URL -> Standard-Base64 inkl. Padding
  let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
  base64 += '='.repeat((4 - (base64.length % 4)) % 4);
  const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
  return JSON.parse(new TextDecoder().decode(bytes));
};

const token = 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI0MiIsIm5hbWUiOiJBbm5hIn0.sig';
console.log(decodeJwtPayload(token));
{ sub: '42', name: 'Anna' }

Ungültige Eingabe abfangen

const safeAtob = (input) => {
  try {
    return atob(input);
  } catch (err) {
    if (err.name === 'InvalidCharacterError') {
      console.warn('Kein gültiges Base64:', input);
      return null;
    }
    throw err;
  }
};

console.log(safeAtob('abc*'));
Kein gültiges Base64: abc* null

// Wichtig · Fallstricke

  • Kein UTF-8: atob() gibt Bytes als Zeichen zurück. Für Text mit Nicht-ASCII-Zeichen immer den Weg über Uint8Array und TextDecoder gehen, sonst entsteht Zeichensalat wie Grüße.
  • Fehler: Bei ungültigen Zeichen oder falscher Länge (z. B. Länge % 4 === 1) wird eine DOMException mit dem Namen InvalidCharacterError geworfen.
  • Base64URL: Die URL-sichere Variante (- und _, oft ohne Padding) wird nicht direkt unterstützt; Zeichen vorher ersetzen.
  • Sicherheit: Base64 ist keine Verschlüsselung. Dekodierte Daten (z. B. JWT-Payloads) sind nicht verifiziert und dürfen nicht ungeprüft per innerHTML eingefügt oder für Berechtigungsentscheidungen genutzt werden.
  • Performance/Moderne Alternative: Für große Binärdaten ist Uint8Array.fromBase64() (neu, noch nicht überall verfügbar) effizienter. In Node.js wird Buffer.from(str, 'base64') empfohlen; das globale atob() gilt dort als Legacy.
  • Kompatibilität: In allen Browsern seit Langem verfügbar, auch in Web Workern.