Base64 Dekoder

Czym jest Base64?#

Base64 to sposób reprezentowania danych binarnych jako zwykłego tekstu przy użyciu 64 znaków ASCII: A–Z, a–z, 0–9 oraz + i /. Pozwala to na bezpieczne przesyłanie danych binarnych — takich jak obrazy, klucze i załączniki e-mail — przez systemy zbudowane z myślą o tekście. To kodowanie, nie szyfrowanie.

Base64 używa stałego alfabetu złożonego z 64 znaków. Każda wartość od 0 do 63 odpowiada dokładnie jednemu z nich — dzięki temu każde 3 bajty danych binarnych zamieniają się w 4 czytelne znaki:

Prawie na pewno już go gdzieś widziałeś. Base64 pojawia się wszędzie tam, gdzie dane binarne muszą podróżować wewnątrz tekstu:

• Wstawianie małego obrazu lub ikony bezpośrednio do HTML lub CSS
• Zwracanie binarnych danych w odpowiedzi JSON API
• Kodowanie załączników e-mail (MIME)
• Przechowywanie kluczy i certyfikatów w plikach PEM

Tak wygląda ta sztuczka z data-URI. Długi ciąg znaków to cały obraz:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Dlaczego Base64 powstał?#

Wczesne protokoły sieciowe były budowane z myślą o tekście, nie o surowych bajtach. ASCII używał 7 bitów i 128 znaków — wystarczało to dla języka angielskiego, ale nie dla danych binarnych. Niektóre systemy niszczyły znaki sterujące lub przepisywały końce linii (LF na CR + LF), po cichu uszkadzając obrazy i dźwięk podczas transmisji.

Base64 omija wszystkie te problemy, emitując wyłącznie znaki, co do których każdy system jest zgodny. Base16 i Base32 robią to samo przy użyciu mniejszych alfabetów, ale Base64 pakuje więcej danych na znak, pozostając przy tym bezpieczny. Dlatego właśnie wygrał.

Jak działa kodowanie Base64#

Cały schemat opiera się na jednym pomyśle powtarzanym w kółko: weź 3 bajty (24 bity), podziel je na cztery grupy po 6 bitów i wyszukaj każdą grupę w alfabecie. Oto słowo „Logto" zakodowane ręcznie.

1. Zapisz każdy znak jako 8-bitową wartość binarną, używając jego kodu ASCII.
2. Pobierz po 3 bajty naraz. To 24 bity.
3. Podziel te same 24 bity na cztery grupy po 6 bitów.
4. Odczytaj każdą grupę 6-bitową jako liczbę od 0 do 63.
5. Wyszukaj tę liczbę w alfabecie, aby uzyskać jeden znak.
6. Jeśli ostatni fragment bajtów nie osiąga 3, dopełnij pozostałe bity zerami i dodaj „=", aby każdy blok miał 4 znaki.

Krok 1. Zamień każdy znak na jego 8-bitową reprezentację binarną:

Krok 2. Weź pierwsze trzy bajty, „Log", i podziel te same 24 bity na cztery grupy po 6 bitów:

Krok 3. Odczytaj każdą grupę 6-bitową jako liczbę, a następnie wyszukaj tę liczbę w alfabecie:

„Logto" ma 5 bajtów, a nie wielokrotność 3. Ostatnie dwa bajty, „to", dają podział 6 + 6 + 4. Dopełnij ostatnie 4 bity zerami, aby uzyskać pełną grupę 6-bitową, a następnie dodaj jedno „=", aby uzupełnić 4-znakowy blok:

Złóż bloki razem:

"Logto"  →  TG9ndG8=

Każdy język ma to wbudowane. W Node.js:

const text = 'Logto';
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // TG9ndG8=

Z tego procesu wynikają trzy zasady, które warto zapamiętać:

• 3 wejście, 4 wyjście: Długość wyjścia to wejście zaokrąglone do wielokrotności 4 znaków, więc zakodowane dane są zawsze o około 33% większe.
• „=" oznacza dopełnienie: Pojawia się tylko wtedy, gdy wejście nie jest wielokrotnością 3 bajtów.
• Dopełnienie liczy resztki: Brak „=" oznacza wielokrotność 3 bajtów, jedno „=" oznacza 2 bajty reszty, dwa „=" oznaczają 1 bajt reszty.

Kiedy używać Base64?#

Sięgnij po Base64, gdy dane binarne muszą przejść przez kanał obsługujący tylko tekst:

• Wbudowane zasoby: Osadź mały obraz lub czcionkę w HTML/CSS, aby zaoszczędzić jedno żądanie.
• Transporty tylko tekstowe: Umieść dane binarne wewnątrz JSON, XML lub parametru zapytania URL.
• Ograniczone znaki: Przenoś dane przez systemy, które nie radzą sobie z bajtami sterującymi.

Co zyskujesz w zamian:

• Działa wszędzie: Każdy system obsługujący ASCII może to odczytać — bez negocjowania zestawu znaków.
• Nic się nie uszkodzi: Dane wyjściowe przeżyją kanały, które w przeciwnym razie uszkodziłyby surowe bajty.

URL-bezpieczny Base64 (Base64URL)#

Standardowy Base64 opiera się na trzech znakach, które kolidują ze sposobem działania adresów URL, ciągów zapytań i nazw plików: +, / i dopełnienie =. Wstaw zwykły ciąg Base64 do linku, a może się on po cichu zepsuć:

• + zamienia się w spację. W ciągu zapytania wiele serwerów odczytuje + jako spację. Dlatego ?data=ab+cd cicho dociera jako „ab cd", a bajty są błędne.
• / jest separatorem ścieżki. Znak / wewnątrz wartości może być odczytany jako nowy segment ścieżki, a większość systemów plików całkowicie odrzuca go w nazwie pliku.
• = jest również zarezerwowany. Rozdziela klucze od wartości w ciągu zapytania, więc końcowe dopełnienie = jest obcinane lub błędnie interpretowane.

Możesz zakodować je procentowo (+ staje się %2B, / staje się %2F, = staje się %3D), ale to rozrasta ciąg i łatwo go podwójnie zakodować przez pomyłkę.

Base64URL (RFC 4648 §5) naprawia to u źródła: zamień + na -, zamień / na _ i pomiń dopełnienie =. Wynik trafia bezpośrednio do adresu URL, parametru zapytania lub nazwy pliku bez niczego do kodowania. Zobaczysz go w adresach URL, nazwach plików i wielu webowych API.

const base64 = 'TG9ndG8=';
const urlSafe = base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
console.log(urlSafe); // TG9ndG8

Ograniczenia (i jedno duże nieporozumienie)#

Base64 to reprezentacja, a nie darmowy lunch. Miej na uwadze trzy rzeczy:

• Jest o ~33% większy: 3 bajty zamieniają się w 4 znaki, więc zakodowane dane puchną o mniej więcej jedną trzecią.
• Kosztuje CPU: Kodowanie i dekodowanie nie są darmowe przy dużej liczbie operacji lub dużych ładunkach.
• Jest nieczytelny: Nieprzezroczyste ciągi utrudniają przeglądanie logów i debugowanie.

Często zadawane pytania#