HTML в Base64: кодирование разметки для data URI

Как закодировать HTML в Base64

1. Вставьте разметку в поле Ввод · текст или нажмите Пример, чтобы получить небольшой документ.
2. Скопируйте Base64 из поля Результат · Base64.
3. Оставьте в поле Кодировка UTF-8 и объявите UTF-8 в data URI или в самом документе (см. ниже).
4. Если нужен data URI, допишите в начало data:text/html;charset=utf-8;base64,, а если API просит просто Base64, вставьте его в нужное поле как есть.

Пример из двух строк, <!doctype html> и <h1>Hello from base64hub</h1>, кодируется в PCFkb2N0eXBlIGh0bWw+CjxoMT5IZWxsbyBmcm9tIGJhc2U2NGh1YjwvaDE+. Base64 в HTML выполняет обратное преобразование.

Примеры

Для Base64 сущности вроде € остаются обычным текстом, а браузер раскроет их после декодирования. Строка, которая начинается с PCFkb2N0eXBl или PCFET0NUWVBF, содержит HTML-документ (<!doctype или <!DOCTYPE), а PGh0bWw декодируется в <html.

Как собрать URI data:text/html

Полный data URI состоит из четырёх частей: схема, тип содержимого, необязательная кодировка и флаг Base64.

data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+

Кодировка важна. Без charset=utf-8 в URI или <meta charset="utf-8"> в документе браузер может прочитать байты в устаревшей кодировке, и café превратится в café. Мета-тег внутри HTML защищает документ, куда бы он ни попал.

Типичные применения:

• Iframe. <iframe src="data:text/html;base64,..."> показывает самодостаточный фрагмент без отдельного файла. Для HTML, написанного вручную, часто проще атрибут srcdoc: ему кодирование вообще не нужно.
• Тестовые фикстуры и автоматизация. Браузерные тесты могут загружать страницу из data URI без веб-сервера.
• API. Некоторые API для почты, рендеринга PDF и документов принимают тело HTML как поле Base64, чтобы кавычки и переводы строк не пришлось экранировать в JSON.

Браузеры не позволяют веб-странице перевести главное окно на URL data:text/html, поэтому ссылки и редиректы на него молча не срабатывают или показывают ошибку. На iframe это не распространяется.

Размер и альтернативы

Base64 увеличивает разметку примерно на треть: 49-байтовый документ <!doctype html><meta charset="utf-8"><p>café</p> превращается в 68 символов. Для HTML, который почти целиком состоит из ASCII, data URI с percent-encoding часто короче, потому что экранировать нужно лишь горстку символов вроде #, % и байтов вне ASCII. Base64 надёжнее, когда разметка большая, в ней много спецсимволов или она идёт в поле, которое принимает только Base64. Генератор data URI собирает ссылки data: для HTML, CSS и изображений, а о кешировании и компромиссах по размеру рассказывает статья о производительности data URI.

HTML в Base64 в коде

import base64

html = '<!doctype html><meta charset="utf-8"><p>café</p>'
uri = "data:text/html;charset=utf-8;base64," + base64.b64encode(html.encode("utf-8")).decode()

// Node.js
const html = "<p>café</p>";
const uri = "data:text/html;charset=utf-8;base64," + Buffer.from(html, "utf8").toString("base64");
// "data:text/html;charset=utf-8;base64,PHA+Y2Fmw6k8L3A+"

В браузере используйте подход с TextEncoder из статьи Base64 в JavaScript: один только btoa портит или отвергает символы вне ASCII. См. также Base64 в Python.

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