Парсер data URI

Как разобрать data URI

1. Вставьте URI в поле. Он может быть и внутри кода: CSS-правило с url("data:..."), тег <img src="data:..."> или картинка в Markdown. Парсер возьмёт первый URI data: и сообщит об этом в строке статуса.
2. Смотрите результат: MIME-тип, Параметры, Кодирование (Base64 или percent-encoding), длину Части с данными в символах, Размер после декодирования и на что Содержимое похоже.
3. Ниже идёт предпросмотр данных с SHA-256 и hex-дампом: картинки, SVG, PDF, аудио, видео, шрифты, текст, JSON, ZIP-архивы и не только.
4. В поле Кодирование вывода оставьте URI как есть или переведите его в Base64 или URL-кодирование, выберите Формат вывода, например CSS url() или HTML-тег, и скопируйте результат. Скачать файл сохраняет данные.

Что принимает парсер

Парсер следует правилам data URL из стандарта Fetch. Их реализуют браузеры, и они мягче исходного RFC 2397. Он принимает то же, что и браузер:

Переносы строк и табуляции внутри URI парсер перед разбором удаляет, как и браузеры, так что URI, разбитый в стилях на несколько строк, всё равно разбирается. ;base64 не зависит от регистра, у значений параметров снимаются кавычки, URL-safe Base64 тоже подходит. Percent-последовательности сначала декодируются в байты, так что работает даже тело Base64, записанное как %2B%2F.

Заявленный тип и реальное содержимое

MIME-тип в data URI лишь метка. Парсер сверяет декодированные байты с известными сигнатурами файлов и предупреждает о расхождении:

• data:image/jpeg;base64,iVBORw0KGgo... даёт «Заявлен image/jpeg, но содержимое похоже на PNG». Браузеры определяют растровые картинки по содержимому, так что часто это всё равно отображается, но более строгие программы такое отвергают.
• Некорректный MIME-тип, например image png с пробелом, получает отдельное предупреждение.

Чтобы исправить метку, извлеките файл кнопкой Скачать файл и соберите чистый URI в генераторе data URI или вставьте часть с Base64 в Base64 в файл: там инструмент предложит правильное расширение и MIME-тип.

Разбор подозрительных data:-ссылок

URI вида data:text/html использовались для фишинга: вся поддельная страница едет внутри ссылки, и за ней нет сервера, который можно было бы заблокировать. Chrome и Firefox теперь не дают открыть такие URI во вкладке по ссылке, но они по-прежнему встречаются в письмах, QR-кодах, документах и сообщениях в чатах.

Здесь можно безопасно узнать, что покажет такая ссылка. Полный HTML-документ отрисовывается в изолированном фрейме, который блокирует скрипты, формы и внешние ресурсы, а ниже показан весь исходный код. Любой другой HTML или скрипт показывается только как текст. SVG рисуется как изображение, в котором скрипты не выполняются, а его разметка выводится списком, чтобы можно было поискать элементы <script> или обработчики on.... Content Security Policy страницы разрешает скриптам обращаться только к счётчику просмотров Cloudflare и загружает картинки только с самого сайта или из URL data: и blob:, так что трекинговый пиксель или удалённый скрипт в данных никогда не загрузится.

Перекодирование и конвертация

Кодирование вывода переводит URI в другое кодирование, не трогая данные:

• Оставить как есть возвращает URI без переносов строк.
• Base64 подходит для двоичных данных и мест, где спецсимволы создают проблемы.
• URL-кодирование короче для простого ASCII-текста и SVG и читается в исходниках.

Данные, Длина URI и Накладные расходы под результатом показывают, какое кодирование короче для ваших данных. Для SVG есть ещё SVG в data URI: там инструмент предлагает оптимизированное кодирование и сравнивает все три варианта, включая gzip.

Вопросы и ответы