Koder i dekoder Base64

Konwersja działa w obie strony na żywo i poprawnie obsługuje polskie znaki, na których wysypuje się większość prostych implementacji.

Wszystko liczy się w Twojej przeglądarce - kodowany tekst i plik nie opuszcza tego urządzenia.

Co chcesz zakodować

Kierunek pracy

Base64URL - wariant bezpieczny w adresach (-, _, bez =) Łam wynik co 76 znaków (MIME)

Tekst zwykły

Base64

0Znaki tekstu

0Bajty UTF-8

0Znaki Base64

0%Przyrost objętości

Wpisz cokolwiek w jedno z pól - drugie przeliczy się od razu.

Jak to wygląda w środku

Podgląd pierwszych bajtów wejścia w zapisie szesnastkowym. Przydaje się, gdy sprawdzasz, czy w tekście nie ma niewidocznego znaku BOM albo twardej spacji.

Jak używać

Wpisz albo wklej zwykły tekst w górne pole, a dolne od razu pokaże jego zapis w Base64. Działa to też w drugą stronę. Wklej ciąg Base64 w dolne pole, a na górze pojawi się odkodowany tekst.
Zaznacz „Base64URL”, jeśli wynik ma trafić do adresu strony albo do nagłówka. Znaki + i / zamieniają się wtedy na - i _, a znaki dopełnienia = znikają.
Opcja „Łam wynik co 76 znaków” dzieli ciąg na linie zgodnie z konwencją wiadomości e-mail (MIME). Przy dekodowaniu białe znaki i tak są pomijane, więc możesz wklejać tekst połamany.
Przełącz się na „Plik → Base64”, żeby przekonwertować obrazek, czcionkę albo dowolny inny plik na data URI gotowe do wklejenia w arkusz stylów lub w atrybut src.
Zakładka „Base64 → plik” działa odwrotnie. Rozpoznaje typ zawartości po pierwszych bajtach, dobiera rozszerzenie i zapisuje gotowy plik na dysku.
Pod polem wyników sprawdzisz liczbę znaków, liczbę bajtów UTF-8 i przyrost objętości. Base64 zawsze powiększa dane wejściowe o mniej więcej jedną trzecią.

Wskazówki

Polskie znaki działają, bo koder przetwarza bajty UTF-8 zamiast kodów znaków. Klasyczne obejście z JavaScriptu, btoa(unescape(encodeURIComponent(s))), daje ten sam wynik, ale opiera się na przestarzałych funkcjach escape i unescape. Tutaj pracuje TextEncoder.
Poprawny ciąg Base64 ma długość podzielną przez 4 (po dopisaniu dopełnienia) i składa się wyłącznie z liter A-Z, a-z, cyfr 0-9 i dwóch znaków dodatkowych + i /. Wszystko poza tym zestawem kończy się komunikatem o niedozwolonym znaku.
Dekodowanie może się udać technicznie, a mimo to dać krzaki. Tak bywa, gdy zakodowane bajty nie są tekstem UTF-8, na przykład pochodzą z obrazka. Ostrzegamy o tym osobnym komunikatem.
Małe pliki wygodnie osadzać w data URI, ale ten zapis zwiększa rozmiar dokumentu o około 33% i nie da się go zapisać w pamięci podręcznej osobno. Dla plików powyżej kilkunastu kilobajtów zwykły odnośnik jest szybszy.
Base64URL bez dopełnienia jest tym, czego używają tokeny JWT. Jeśli dekodujesz fragment tokena, zaznacz ten przełącznik albo po prostu wklej go tak, jak jest, bo dopełnienie dopiszemy automatycznie.

Potrzebujesz sumy kontrolnej zamiast kodowania? Base64 da się odwrócić w sekundę, więc integralność pliku sprawdzisz generatorem skrótów MD5 i SHA. Odkodowany JSON uporządkujesz w formatterze JSON.

Czym właściwie jest Base64

Base64 to schemat kodowania binarnego na tekst, czyli sposób zapisania dowolnych danych binarnych 64 znakami, które przechodzą bez szwanku przez systemy przystosowane do liter. Algorytm bierze trzy bajty wejścia (24 bity), dzieli je na cztery grupy 6-bitowe i każdą grupę zamienia na jeden znak z tablicy kodującej. Jeżeli na końcu zostanie jeden lub dwa bajty, wynik uzupełnia się znakami =, żeby długość pozostała podzielna przez cztery.

Z tej arytmetyki wynika stały koszt: cztery znaki wyjścia na każde trzy bajty wejścia, czyli około 33% więcej danych. Dlatego załącznik w wiadomości e-mail zajmuje w skrzynce więcej miejsca niż ten sam plik na dysku - poczta przenosi go właśnie w Base64.

Tablica kodująca wygląda tak samo w każdej implementacji, od A-Z i a-z, przez cyfry 0-9, po + i / na dwóch ostatnich pozycjach. Wszystkie 64 pozycje należą do drukowalnych znaków ASCII, więc gotowy ciąg reprezentuje dane binarne w postaci, którą można wkleić w zwykły tekst i przenieść przez kanał znający wyłącznie siedmiobitowy alfabet.

Jak kodować i dekodować polskie znaki

Wbudowana w przeglądarki funkcja JavaScriptu btoa przyjmuje wyłącznie znaki o kodach 0-255. Litera „ż” ma w Unicode numer 380, więc próba zakodowania słowa „żaba” kończy się wyjątkiem InvalidCharacterError. To najczęstsza przyczyna, dla której prosty koder Base64 działa po angielsku, a wysypuje się po polsku.

Base64 koduje zawsze bajty i konwertuje tekst dopiero wtedy, gdy ten tekst zostanie wcześniej zamieniony na bajty UTF-8. Litera „ż” to w UTF-8 dwa bajty o wartościach C5 i BC, a oba mieszczą się w zakresie 0-255, więc btoa nie ma z nimi kłopotu. Przy dekodowaniu przeglądarka robi to samo w odwrotnej kolejności. Z ciągu Base64 odzyskuje bajty, a z bajtów składa tekst przez TextDecoder. „Zażółć gęślą jaźń” wraca wtedy w całości, razem z ogonkami.

Base64URL, czyli wariant do adresów

Znaki + i / mają w adresach URL własne znaczenie. Pierwszy bywa interpretowany jako spacja, drugi rozdziela segmenty ścieżki. RFC 4648 opisuje więc drugi wariant formatu Base64, zwany Base64URL, w którym + zastępuje -, a / zastępuje _. Dopełnienie = zwykle się pomija, bo w adresie też wymaga kodowania procentowego.

Ten wariant spotkasz w tokenach JWT, w kluczach webhooków i w identyfikatorach zasobów. Dekoder Base64 w tym narzędziu przyjmuje obie odmiany jednocześnie. Zamienia - i _ z powrotem na znaki podstawowej tablicy, sam dopisuje brakujące dopełnienie i nie wymaga deklarowania wariantu przed wklejeniem danych.

Gdzie Base64 jest powszechnie używany

Base64 powstał na potrzeby poczty elektronicznej. Protokół SMTP w pierwotnej postaci przenosił wyłącznie siedmiobitowy tekst, a załącznik trzeba było jakoś przez niego przepchnąć, więc standard MIME opisał sposób przesyłania danych binarnych w postaci liter i cyfr. Ten sam mechanizm jest dziś powszechnie używany wszędzie tam, gdzie kanał przyjmuje tylko ciągi znaków: obrazek osadzony w arkuszu stylów, plik wetknięty w pole JSON-a albo w dokument XML, certyfikat serwera zapisany w formacie PEM.

Drugie duże zastosowanie to nagłówki HTTP. Uwierzytelnianie Basic wysyła login i hasło sklejone dwukropkiem, a potem zakodowane w Base64, co bywa mylone z zabezpieczeniem. Odwrócenie takiego nagłówka zajmuje sekundę w tym narzędziu, a poufność zapewnia dopiero HTTPS, czyli szyfrowanie całego połączenia. Klucze API i tokeny sesji korzystają z Base64 z tego samego powodu, bo taki zapis nadaje się do przesyłania danych przez systemy, które zmieniają albo obcinają bajty spoza ASCII.

Data URI i granica opłacalności

Data URI to zapis w postaci data:typ/podtyp;base64,zawartość, który wkleja plik bezpośrednio w kod strony. Base64 konwertuje wtedy zawartość pliku na tekst, więc obrazek mieszka w tym samym arkuszu stylów co reguły, które się do niego odwołują. Znika osobne zapytanie do serwera, a zasób zawsze jest pod ręką, bo stał się częścią dokumentu. Sprawdza się to przy małych ikonach SVG i wzorkach tła o rozmiarze kilku kilobajtów.

Wady ujawniają się przy większych plikach. Zakodowany obrazek jest o jedną trzecią cięższy, ląduje w tym samym pliku CSS lub HTML co reszta kodu i nie może być zapisany w pamięci podręcznej osobno, więc każda zmiana strony wymusza ponowne pobranie całości. Praktyczna granica opłacalności leży w okolicy kilkunastu kilobajtów.

Dekoder Base64 i najczęstsze błędy

Najczęstszy komunikat, jaki zobaczysz, dotyczy niedozwolonych znaków. Zwykle winny jest cudzysłów skopiowany razem z ciągiem albo fragment data:image/png;base64, zostawiony przed właściwymi danymi. Białe znaki, w tym złamania wierszy, są nieszkodliwe, bo usuwamy je przed dekodowaniem.

Drugi przypadek to niepoprawna długość, bo ciąg Base64 po dopisaniu dopełnienia musi dzielić się przez cztery, a reszta równa jeden jest matematycznie niemożliwa i oznacza dane ucięte w połowie. Trzeci przypadek wygląda groźniej, niż jest. Dekoder zamienia Base64 z powrotem na bajty poprawnie, tylko te bajty nie były tekstem, więc na ekranie pojawiają się przypadkowe znaki. Takie dane lepiej przekonwertować w zakładce „Base64 → plik”, która rozpozna typ zawartości po sygnaturze pierwszych bajtów.

Najczęstsze pytania

Czy Base64 to szyfrowanie?

Nie, i to najczęstsze nieporozumienie wokół tego formatu. Base64 przekodowuje dane w sposób całkowicie odwracalny, bez żadnego klucza, więc zakodowany tekst odczytasz w kilka sekund w tym narzędziu, w konsoli przeglądarki albo dowolnym innym dekoderem. Do realnego zabezpieczenia danych służy szyfrowanie z kluczem. Hasła przechowuje się natomiast w postaci skrótu z funkcji zaprojektowanej do haseł, takiej jak bcrypt czy Argon2.

Dlaczego polskie znaki nie działają w innych narzędziach?

Bo używają samej funkcji btoa, która przyjmuje wyłącznie znaki o kodach do 255, czyli w praktyce zakres ASCII i jedną stronę kodową. Tutaj tekst jest najpierw zamieniany na bajty UTF-8 przez TextEncoder, więc „Zażółć gęślą jaźń” koduje się i dekoduje bez strat. Ten sam mechanizm obsługuje dowolny znak Unicode, od cyrylicy po znaki matematyczne. Możesz to sprawdzić przyciskiem „Wstaw przykład”.

Co to jest kodowanie Base64 bezpieczne dla adresów URL?

To ta sama tablica kodująca z podmienionymi dwoma znakami. Symbol + zamienia się na -, / na _, a dopełnienie = zwykle znika, bo w adresie wymagałoby kodowania procentowego. Wynik można wtedy wkleić w ścieżkę albo w parametr zapytania i mieć pewność, że serwer nie zinterpretuje żadnego znaku po swojemu. Zaznacz przełącznik „Base64URL”, żeby dostać taką postać.

Dlaczego wynik jest większy od tekstu wejściowego?

Bo 3 bajty wejścia zamieniają się na 4 znaki wyjścia, a każdy taki znak zajmuje w pliku tekstowym własny bajt. Stąd stały narzut około 33%, widoczny w polu „Przyrost objętości”. Przy bardzo krótkich danych dochodzi jeszcze dopełnienie, więc jeden bajt wejścia daje cztery znaki wyniku. Kompresja przed kodowaniem realnie zmniejsza wynik, kompresja gotowego Base64 prawie nic nie daje.

Czy da się odkodować obrazek zapisany w Base64?

Tak, i służy do tego zakładka „Base64 → plik”. Wklej sam ciąg albo pełny data URI, a narzędzie rozpozna typ zawartości po sygnaturze pierwszych bajtów, dobierze rozszerzenie i przygotuje plik do pobrania. Podgląd na stronie nie powstaje, bo obraz trafia prosto na dysk i otworzysz go dowolną przeglądarką grafiki.

Czy mój plik jest wysyłany na serwer?

Nie. Odczyt pliku odbywa się przez FileReader w Twojej przeglądarce, a wynik nigdy nie opuszcza urządzenia. Możesz otworzyć zakładkę „Sieć” w narzędziach deweloperskich i przekonać się, że po wybraniu pliku nie wychodzi żadne zapytanie.

Jak duży plik mogę zakodować?

Ustawiliśmy limit 8 MB, choć sam algorytm żadnej górnej granicy nie ma. Wynik takiego pliku ma około 11 milionów znaków i samo wyświetlenie go w polu tekstowym potrafi zamrozić przeglądarkę na kilka sekund. Większe pliki wygodniej przetworzyć w wierszu poleceń, poleceniem base64 i base64 --decode w systemach uniksowych albo certutil w Windowsie.

Co oznacza znak równości na końcu?

To dopełnienie wyrównujące długość. Base64 przetwarza dane po trzy bajty, więc gdy na końcu zostanie jeden bajt, wynik uzupełnia się dwoma znakami =, a gdy zostaną dwa bajty, dokłada się jeden. Dopełnienie nie niesie informacji, dlatego wariant URL-safe zwykle je pomija. Nasz dekoder radzi sobie z obiema postaciami.

Czy da się odkodować fragment tokena JWT?

Tak. Token ma trzy części rozdzielone kropkami, a interesuje Cię środkowa, bo to ona przenosi właściwe dane. Skopiuj ją i wklej w pole Base64, a zobaczysz zawartość tokena w formacie JSON, którą uporządkujesz w formatterze JSON. Podpisu w ten sposób nie zweryfikujesz, bo trzecia część zawiera skrót kryptograficzny i po odkodowaniu wygląda jak przypadkowe bajty.