Инструменты разработчика · Кодер и декодер Base64
Объяснение URI данных: как работает data:image/png;base64 и откуда он взялся
· Фон
base64 кодирование
Данные: Схема URL была указана в 1998 как способ встраивания небольших ресурсов непосредственно на страницу. В этом посте объясняется его грамматика, почему Base64 является необязательным и где браузеры налагают ограничения.
Значок, который представлял собой 1,300-символ URL — встречает данные: URI в дикой природе и читает их части
Данные: URI встраивает небольшой ресурс непосредственно в URL, избегая отдельного запроса HTTP. Формат указан в RFC 2397 (определен в 1998) и использует грамматику со схемой, необязательным типом носителя, необязательным флагом кодирования и самой полезной нагрузкой. Например, data:text/plain,hello — это текстовые данные URI, содержащие слово hello. Браузер обрабатывает это так же, как он обрабатывает запрос HTTP, но вместо получения контента по сети он декодирует его из самого URL.
URI данных чаще всего используются для небольших изображений, значков CSS и тестовых приспособлений. Данные: URI с кодировкой Base64 выглядят следующим образом: data:image/png;base64,iVBORw0K..... Разбивка следующая: данные: — это схема; image/png — тип носителя; ;base64 — флаг кодировки; длинная строка представляет собой байты изображения в кодировке Base64. Когда браузер видит это URL, он декодирует Base64 для восстановления исходных байтов, а затем визуализирует изображение, используя эти байты.
Чтение данных URI из их видимой грамматики — типа носителя, дополнительного маркера Base64 и полезных данных.
Если флаг кодирования опущен (data:text/html,<p>hello</p>), полезные данные представляют собой текст UTF-8 с процентной кодировкой, а не base64. Наличие ;base64 сообщает браузеру, какое правило декодирования следует применить. Тип носителя в данных: URI — это тип MIME, строка того же типа, которая используется в заголовках Content-Type HTTP. image/png, text/plain, application/json и image/svg+xml являются распространенными примерами. Если тип носителя не указан, по умолчанию используется text/plain;charset=US-ASCII..
Браузер должен определить, как отображать байты в зависимости от типа носителя: если указано image/png,, то байты будут PNG; если там написано text/html,, то содержимое будет HTML. Указание неправильного типа носителя может привести к запутанным результатам; файл PNG, помеченный как text/plain, вместо изображения будет отображаться как мусорные символы. Base64 не является обязательным в данных: URI. Для текстового содержимого процентное кодирование (та же кодировка, которая используется в строках запроса URL) часто более компактна, чем base64. Потребитель данных URI решает, как интерпретировать полезную нагрузку, исходя из типа носителя и маркера перед запятой. Кодировщик Base64 предоставляет только символы полезной нагрузки. Он не добавляет тип MIME, не выбирает, описывают ли байты PNG или SVG, или проверяет собранный адрес.
Почему Base64 не является обязательным: текстовые полезные данные в процентном кодировании для SVG и простой текст по сравнению с Base64 для двоичных файлов
Данные URI:text/html,<p>Hello</p> содержат HTML в виде буквальных символов (с процентным кодированием любых специальных символов, таких как кавычки или угловые скобки). Base64 полезен для двоичных данных, которые невозможно представить в виде текста, а также для случаев, когда полезные данные содержат много специальных символов, которые при процентном кодировании могут раздуться. Небольшой SVG или текстовый файл может быть закодирован в процентах меньшего размера; двоичный файл должен иметь формат base64. Для создания данных: URI вручную требуется знание типа носителя и кодировки.
Для значка SVG вы можете использовать data:image/svg+xml, за которым следует либо разметка SVG в процентном кодировании, либо байты в кодировке ;base64 и base64. Для процентного кодирования оберните SVG в data:image/svg+xml,, а затем закодируйте в процентах любые угловые скобки, кавычки и другие специальные символы. Результат длинный, но читаемый человеком. Для base64 возьмите байты SVG, закодируйте их в base64 и создайте data:image/svg+xml;base64,, а затем добавьте строку base64. Base64 обычно более компактен для двоичного кода, но для текста SVG форма в процентном кодировании может быть короче.
Рабочий пример: построение данных: URI для небольшого SVG вручную — кодирование разметки в текст и сборка строки
Браузеры и приложения-потребители могут налагать ограничения или ограничения политик на URI данных, но этот репозиторий не устанавливает переносимый числовой потолок. Использование памяти, поведение анализатора и политика безопасности также зависят от того, где появляется значение, поэтому проверяйте точный целевой браузер и контекст внедрения, а не полагайтесь на запомненное ограничение.
Встроенное изображение 5 MB в каждый файл HTML приведет к увеличению размера страницы. URI данных лучше всего подходят для небольших ресурсов: значков CSS, небольших изображений или тестовых данных. Для больших файлов внешний запрос выполняется быстрее, поскольку браузер может кэшировать ответ и повторно использовать его на нескольких страницах; данные: URI встраиваются каждый раз при загрузке страницы.
Границы браузера и безопасности, которые следует проверять в потребляющем приложении, а не предполагать
Общий порог составляет несколько килобайт; ниже — данные: URI эффективны; выше этого внешние файлы обычно работают быстрее. Политики безопасности и браузера ограничивают использование данных: URI в определенных контекстах. Навигация верхнего уровня (щелчок по ссылке, указывающей на данные: URI с содержимым HTML) часто блокируется для предотвращения фишинга. Данные: URI в атрибуте src сценария могут выполнить произвольный JavaScript, создавая угрозу безопасности.
Браузеры применяют правила Политики безопасности контента (CSP) к данным: URI; строгий CSP может полностью запретить их. Данные: URI в источнике img или iframe обычно разрешены, но внедрение в контекст стиля или сценария может быть ограничено. Всегда проверяйте совместимость браузера и политику безопасности вашей целевой среды. URI данных в CSS обычно используются для небольших фоновых изображений. Синтаксис тот же: url(data:image/png;base64,...).
Где данные: URI по-прежнему являются подходящим инструментом — значки CSS, встроенные изображения, безопасные для электронной почты, и тестовые приспособления.
Файл CSS со встроенными данными: URI могут быть отправлены как один файл со всеми включенными изображениями, что сокращает количество запросов HTTP. Это полезно для небольших наборов значков или простой графики. Большие изображения, встроенные в CSS, раздувают файл и замедляют его анализ. Современные инструменты сборки (например, веб-пакет) могут автоматически преобразовывать небольшие изображения в данные: URI в CSS и внешние изображения в обычные URL-адреса, балансируя производительность.
Формат данных: URI определяется RFC 2397, коротким документом, который определяет грамматику, но не определяет, где data: URI можно или нельзя использовать. Поставщики браузеров добавили свои собственные ограничения, основанные на соображениях безопасности и производительности.
Что здесь не распространяется — blob: URL-адреса, URL-адреса объектов и доступ к файловой системе.
В некоторых системах есть устаревшие данные: поддержка URI в определенных контекстах (например, действие формы на уровне CSP 3) для предотвращения злоупотреблений. При использовании данных: URI проверьте их в целевом браузере; RFC сообщает, что формат действителен, но политика безопасности браузера может его заблокировать.
Создание данных: URI вручную в рабочей среде встречается редко; большинство инструментов сборки и библиотек выполняют преобразование. Но понимание формата полезно для отладки. Если вы видите длинный data:image/... URL в вашем CSS или HTML, вы можете декодировать его с помощью инструмента кодирования и декодера Base64: удалите префикс data:image/...;base64,, вставьте оставшуюся строку в инструмент и декодируйте ее, чтобы увидеть фактические байты.
Вывод: небольшой формат со строгой грамматикой — как кодировщик и декодер Base64 обрабатывают этап кодирования текста, чтобы вы могли собрать действительный URI.
Для данных SVG URI можно выполнить процентное декодирование текстовой формы и прочитать разметку XML. Понимание структуры данных: URI упрощает устранение неполадок встроенных ресурсов. URI данных — это веб-стандарт (RFC 2397), который позволяет встраивать ресурсы непосредственно в виде URL-адресов. Они наиболее эффективны для небольших стабильных ресурсов, которым не требуется отдельное кэширование. Формат включает дополнительную спецификацию типа носителя и флаг кодировки (base64 или подразумеваемое процентное кодирование).
Кодировка Base64 требуется для двоичных данных, но необязательна для текста; SVG в процентном кодировании может быть более читабельным. Политики безопасности браузера ограничивают возможности использования данных: URI, поэтому важно понимать ограничения в вашей целевой среде. Инструмент кодирования и декодера Base64 может помочь вам вручную закодировать ресурс или декодировать встроенный URI для проверки его содержимого.