Что такое Base64: как раскодировать строку и посмотреть, что внутри

Открываете код страницы или ответ API, а вместо картинки видите длиннющую строку из букв, цифр и символов +, /, =, которая начинается с data:image/png;base64,iVBORw0KG.... Это Base64, способ упаковать любые данные (картинку, файл, текст) в обычные символы. Такую строку можно вставить куда угодно: в HTML, JSON, URL. Разберём, как это устроено и что делать со строкой дальше.

Что такое Base64 простыми словами

Base64 — это кодирование, а не шифрование. Оно превращает любые байты, хоть текст, хоть картинку, хоть PDF, в текст из 64 «безопасных» символов: A-Z, a-z, 0-9, + и /. Каждые 3 байта исходных данных становятся 4 символами Base64, поэтому результат примерно на треть длиннее оригинала.

Компьютерные протоколы изначально проектировались для текста, а не для двоичных данных. Байты с произвольными значениями могли сломать почту, XML-документ или строку в URL. Base64 решает это и сводит всё к безопасному алфавиту. Раскодировать текст или строку в Base64 можно прямо в браузере в кодировщике Base64. Вставляете данные в одно поле, результат сразу появляется в другом, на сервер ничего не уходит.

Что за строка data:image/png;base64 и как посмотреть картинку

Чаще всего Base64 попадается в data URL. Это способ вставить картинку прямо в HTML или CSS, без отдельного файла на сервере. Выглядит так:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

После data:image/png;base64, идёт содержимое самой картинки, закодированное в Base64. Браузер такую строку раскодирует и отрисовывает как обычное изображение. Поэтому она бывает очень длинной, несколько тысяч символов на маленькую иконку.

Если строка есть у вас целиком, увидеть картинку можно вообще без инструментов. Скопируйте всё, что начинается с data:, и вставьте в адресную строку браузера. Браузер понимает data URL сам и покажет картинку так же, как обычную ссылку на изображение.

Отдельный случай — SVG. Его в data URL обычно не переводят в Base64 вовсе. Разметка и так состоит из текстовых символов, поэтому достаточно экранировать угловые скобки и кавычки. Строка получится короче, чем после Base64, и её ещё можно читать глазами. Собрать такую строку под background-image можно в кодировщике SVG для CSS. Он экранирует разметку и сразу отдаёт готовое правило для CSS или Tailwind.

Как раскодировать текст и строки Base64

Для текстовых данных (токенов, JSON, обычных строк) в кодировщике Base64 есть оба направления сразу. Печатаете в поле «Обычный текст», рядом появляется Base64, и наоборот. Здесь же включается URL-безопасный вариант кодирования, где символы +// заменяются на -/_. Он нужен, если строка Base64 сама идёт частью URL, как в JWT. Есть и разбивка на строки по 76 символов, так исторически форматируют Base64 в email-вложениях (MIME).

Ещё один частый случай — JWT-токены авторизации. Это тоже данные JSON, просто закодированные в Base64URL. Их можно раскодировать и посмотреть содержимое без секретного ключа. Сама подпись при этом не проверяется, но заголовок и payload читаются как обычный JSON.

Частые ошибки при декодировании Base64

Если раскодировать не получается, причина почти всегда одна из этих:

• В строку попал лишний символ: перенос строки, пробел или знак, которого нет в алфавите Base64 (A-Z, a-z, 0-9, +, /, =). Обычно это случайно скопированный кусок текста рядом со строкой.
• Сломан «паддинг». Base64 дополняется символами = до длины, кратной 4. Если строку обрезали, например скопировали не до конца, декодер её не разберёт.
• Перепутан алфавит. Обычный Base64 и Base64URL отличаются двумя символами (+// против -/_), и строка из JWT или URL не раскодируется как обычный Base64, пока не переключить настройку.

Base64 — это не шифрование

Это стоит запомнить отдельно. У Base64 нет ключа, и раскодировать его может кто угодно за секунду. То же самое делают btoa() и atob() в JavaScript, без какой-либо защиты. Если данные нужно скрыть, а не просто передать текстом, Base64 тут не поможет, нужно настоящее шифрование.

Коротко

• Base64 превращает любые байты в текст из 64 безопасных символов. Это кодирование для передачи данных, а не шифрование.
• Строка data:image/png;base64,... — картинка, вставленная прямо в HTML или CSS; чтобы её увидеть, вставьте строку целиком в адресную строку браузера.
• Декодирование чаще всего падает из-за лишних символов, обрезанного паддинга или путаницы между обычным Base64 и Base64URL (как в JWT).