Операции кодирования и декодирования — базовая часть веб‑разработки, интеграции с API и работы с безопасностью. Когда вы отлаживаете JWT‑токен, встраиваете изображения как Base64 data URL, обрабатываете URL‑кодированные параметры запроса или анализируете SSL‑сертификаты, важно понимать, как устроены эти преобразования.

В этом гайде разобраны инструменты кодирования и декодирования, которые разработчики используют каждый день — с практическими примерами того, когда и как применять каждый из них.

Base64‑кодирование и декодирование текста

Base64 — это способ кодирования «байты → текст», который представляет двоичные данные в виде 64 ASCII‑символов. Он используется всякий раз, когда бинарные данные нужно передать по текстовым протоколам.

Как работает Base64

Base64 берёт 3 байта (24 бита) входа и кодирует их в 4 ASCII‑символа. Это даёт увеличение объёма примерно на 33%, но гарантирует, что данные переживут текстовую передачу без потерь.

# Оригинальный текст
Hello, World!

# Base64-кодирование
SGVsbG8sIFdvcmxkIQ==

# Суффикс == указывает, что длина
# входа не кратна 3 байтам

Типичные сценарии использования Base64

• Вложения в письмах — MIME‑кодирование бинарных файлов
• Пейлоады API — встраивание бинарных данных в JSON
• Basic‑аутентификация — Authorization: Basic base64(user:pass)
• Data URI — встроенные изображения в HTML/CSS
• Криптография — кодирование ключей, подписей, хешей

Декодирование Base64 в разных контекстах

При отладке вы часто встретите закодированные Base64 данные в ответах API, логах или конфигурациях. Инструмент Base64 Text Decoder обрабатывает как стандартный Base64, так и URL‑безопасный вариант.

# Стандартный Base64 (использует + и /)
SGVsbG8rV29ybGQv

# URL-безопасный Base64 (использует - и _)
SGVsbG8tV29ybGRf

# Оба варианта корректно декодируются

Base64‑кодирование изображений

Преобразование изображений в Base64 создаёт data URL, которые можно встраивать напрямую в HTML, CSS или JSON без отдельных HTTP‑запросов.

Формат Data URL

data:[media-type];base64,[base64-encoded-data]

# Пример: PNG‑изображение
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

# Пример: JPEG‑изображение
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD...

Когда использовать Base64‑изображения

• Небольшие иконки и спрайты — сокращение числа HTTP‑запросов
• HTML‑письма — встроенные изображения без внешнего хостинга
• Однофайловые экспорты — самодостаточные HTML‑страницы
• Ответы API — возврат изображений в JSON‑пейлоадах
• CSS‑фоны — встраивание иконок в стили

Когда НЕ использовать Base64‑изображения

• Крупные изображения — увеличение размера на ~33% ухудшает скорость
• Кешируемые ассеты — отдельные файлы лучше кешируются браузером
• Часто меняющиеся изображения — требуют полной перезагрузки документа

Инструмент Base64 Image Encoder/Decoder конвертирует изображения в data URL и обратно, поддерживая форматы PNG, JPEG, GIF и WebP.

Декодирование и анализ JWT

JSON Web Token (JWT) — стандарт для статeless‑аутентификации в современных веб‑приложениях.JWT‑декодер необходим для отладки аутентификации, изучения клеймов токена и проверки времени жизни.

Структура JWT

JWT состоит из трёх частей, закодированных в Base64URL и разделённых точками:

header.payload.signature

# Пример JWT
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Декодированные части JWT

// Header (алгоритм и тип токена)
{
  "alg": "HS256",
  "typ": "JWT"
}

// Payload (клеймы)
{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022,
  "exp": 1516242622
}

// Signature (подпись/верификация)

Часто используемые клеймы JWT

• sub — субъект (ID пользователя)
• iat — время выпуска (Unix‑время)
• exp — время истечения (Unix‑время)
• nbf — не раньше, чем (Unix‑время)
• iss — издатель (issuer)
• aud — аудитория (audience)

Инструмент JWT Encoder/Decoder парсит токен, показывает декодированные header и payload и преобразует временные клеймы в человеко‑читаемые даты.

URL‑кодирование и percent‑encoding

В URL допустим ограниченный набор ASCII‑символов. Спецсимволы, пробелы и не‑ASCII текст должны быть percent‑кодированы (URL‑кодированы), прежде чем попасть в URL.

Правила percent‑кодирования

# Пробел превращается в %20 или +
Hello World → Hello%20World

# Спецсимволы
& → %26
= → %3D
? → %3F
/ → %2F
# → %23

# Не-ASCII (байты UTF-8)
日本語 → %E6%97%A5%E6%9C%AC%E8%AA%9E

Когда URL‑кодирование обязательно

• Параметры запроса — значения с пробелами и спецсимволами
• Отправка форм — application/x-www-form-urlencoded
• Сегменты пути — имена файлов с пробелами и не‑ASCII
• OAuth‑редиректы — redirect_uri как параметр
• API‑запросы — поисковые строки, фильтры

Инструмент URL Encoder/Decoder поддерживает как кодирование, так и раскодирование, включая вложенные URL‑кодированные значения.

Кодирование HTML‑сущностей

HTML‑кодирование преобразует спецсимволы в соответствующие сущности, предотвращая XSS и обеспечивая корректный рендеринг.

Базовые HTML‑сущности

# Символы, которые ОБЯЗАТЕЛЬНО экранировать в HTML
<  → &lt;
>  → &gt;
&  → &amp;
"  → &quot;
'  → &#39; или &apos;

# Пример: пользовательский ввод с HTML
<script>alert('xss')</script>
→ &lt;script&gt;alert(&#39;xss&#39;)&lt;/script&gt;

Когда нужно HTML‑кодирование

• Пользовательский контент — защита от XSS‑атак
• Отображение кода — показ HTML/XML‑исходников на странице
• Значения атрибутов — безопасное встраивание кавычек и спецсимволов
• HTML‑шаблоны писем — корректный рендеринг спецсимволов

Инструмент HTML Text Encoder/Decoder конвертирует текст в HTML‑безопасное представление и обратно.

Декодирование сертификатов

SSL/TLS‑сертификаты — это X.509‑документы в PEM‑ или DER‑формате. Декодер сертификатов показывает Subject, Issuer, период действия и расширения сертификата.

PEM‑формат сертификата

-----BEGIN CERTIFICATE-----
MIIDXTCCAkWgAwIBAgIJAJC1HiIAZAiUMA0Gcx...
(Base64-encoded DER data)
...Md0aGlzIG
-----END CERTIFICATE-----

Ключевые поля сертификата

• Subject — домен/субъект, которому принадлежит сертификат
• Issuer — центр сертификации (CA), подписавший сертификат
• Validity — даты начала и окончания действия
• Serial Number — уникальный номер у CA
• Public Key — открытый ключ (RSA/EC) для TLS‑рукопожатия
• Extensions — SAN, Key Usage, ограничения

Сценарии отладки сертификатов

• Проверка сроков действия сертификата
• Проверка Subject Alternative Names (SAN) у многодоменных сертификатов
• Анализ цепочки промежуточных сертификатов
• Отладка mTLS (взаимной TLS‑аутентификации)
• Проверка сертификатов для подписи кода

Инструмент Certificate Decoder парсит PEM‑ закодированные X.509‑сертификаты и показывает поля в удобном для чтения виде.

Сжатие и распаковка GZip

GZip — стандартный алгоритм сжатия для HTTP‑ответов, лог‑файлов и архивов данных. Понимание gzip‑сжатия помогает при отладке сетевого трафика и оптимизации пейлоадов.

GZip в HTTP

# Заголовок запроса, указывающий поддержку gzip
Accept-Encoding: gzip, deflate, br

# Заголовок ответа, указывающий gzip-сжатие
Content-Encoding: gzip

# Оригинальный размер: 100KB
# После сжатия: 15KB (≈85% экономии для текстовых данных)

Сценарии использования GZip

• Сжатие ответов API — уменьшение трафика для JSON/XML
• Сжатие логов — .gz‑файлы журналов
• Встроенные сжатые данные — сжатые пейлоады в сообщениях
• Сжатие статики — заранее сжатые JS/CSS‑файлы

Инструмент GZip Compress/Decompress сжимает и распаковывает текст, кодируя сжатый результат в Base64 для удобной передачи.

Кодирование и декодирование QR‑кодов

QR‑коды кодируют текстовые данные в двумерный штрих‑код, считываемый камерами. Их используют для URL, Wi‑Fi‑настроек, контактной информации и аутентификации (TOTP).

Типы данных в QR‑кодах

# URL
https://example.com/page

# Учётные данные WiFi
WIFI:T:WPA;S:NetworkName;P:Password;;

# Контакт (vCard)
BEGIN:VCARD
VERSION:3.0
FN:John Doe
TEL:+1234567890
END:VCARD

# TOTP (приложения-аутентификаторы)
otpauth://totp/Service:user@example.com?secret=JBSWY3DPEHPK3PXP&issuer=Service

Сценарии использования QR‑кодов

• Мобильные deep‑links — ссылки в магазин приложений или внутрь приложения
• Двухфакторная аутентификация — коды настройки TOTP
• Билеты на мероприятия — сканируемые идентификаторы
• Платёжные системы — платёжные ссылки и идентификаторы
• Обмен Wi‑Fi‑доступом — быстрый шаринг пароля и SSID

Инструмент QR Code Encoder/Decoder генерирует QR‑коды из текста (с возможностью экспорта в SVG) и умеет считывать коды с изображений.

Справочник по кодированию и декодированию

Все кодировщики и декодировщики в DevToys Pro

Эти инструменты входят в коллекцию Encoders / Decoders в DevToys Pro. Все операции кодирования и декодирования выполняются прямо в браузере — чувствительные данные, такие как JWT‑токены и сертификаты, не покидают ваше устройство.

Открыть Encoders / Decoders →