Ссылки данных состоят из четырёх частей: префикса (data:), типа MIME, указывающего тип данных, необязательного base64 токена, если данные не текстовые, и самих данных:

data:[<mediatype>][;base64],<data>

mediatype — это строка типа MIME, например, 'image/jpeg' для файла изображения JPEG. Если опущен, по умолчанию text/plain;charset=US-ASCII

Если данные содержат символы, определённые в RFC 3986 как зарезервированные символы, или содержат пробелы, символы новой строки или другие непечатаемые символы, эти символы должны быть кодированы по процентам (также известные как "кодировка URL").

Если данные текстовые, вы можете встроить текст (используя соответствующие сущности или экранирования, основанные на типе окружающего документа). В противном случае вы можете указать base64 для вставки данных в кодировке base64. Более подробную информацию о типах MIME можно найти здесь и здесь.

Несколько примеров:

data:,Hello%2C%20World%21

Данные типа text/plain Hello, World!. Обратите внимание, как запятая кодируется по процентам как %2C, а пробел как %20.

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

Данные base64-кодированные

data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E

HTML-документ с <h1>Hello, World!</h1>

data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E

HTML-документ с <script>alert('hi');</script>, который выполняет JavaScript-сообщение. Обратите внимание, что закрывающий тег script необходим.

Base64 — это группа схем кодирования двоичных данных в текстовые, которые представляют двоичные данные в формате ASCII-строки, переводя их в представление с основанием 64. Поскольку base64-строки состоят только из ASCII-символов, они обычно безопасны для URL и поэтому могут использоваться для кодирования данных в ссылках данных.

В API веб-технологий есть собственные методы для кодирования и декодирования в base64: Кодирование и декодирование Base64.

Кодирование base64 файла или строки на системах Linux и macOS можно выполнить с помощью командной строки base64 (или, как альтернативу, утилиты uuencode с аргументом -m).

echo -n hello|base64
# outputs to console: aGVsbG8=

echo -n hello>a.txt
base64 a.txt
# outputs to console: aGVsbG8=

base64 a.txt>b.txt
# outputs to file b.txt: aGVsbG8=

В Windows можно использовать Convert.ToBase64String из PowerShell для выполнения кодирования Base64:

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
# outputs to console: aGVsbG8=

В качестве альтернативы, оболочка GNU/Linux (такая как WSL) предоставляет утилиту base64:

bash$ echo -n hello | base64
# outputs to console: aGVsbG8=

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

data:text/html,lots of text…<p><a name%3D"bottom">bottom</a>?arg=val</p>

Это представляет собой HTML-ресурс, содержимое которого:

lots of text…
<p><a name="bottom">bottom</a>?arg=val</p>

Синтаксис

Формат ссылок данных очень прост, но легко забыть поставить запятую перед сегментом "данные" или неправильно закодировать данные в формате base64.

Форматирование в HTML

Ссылка данных предоставляет файл внутри файла, который потенциально может быть очень широким по отношению к ширине окружающего документа. Как ссылка, ссылка данных должна быть форматируемой с пробелами (перевод строки, табуляция или пробелы), но есть практические проблемы, которые возникают при использовании кодирования base64.

Ограничения длины

Браузеры не обязаны поддерживать какую-либо максимальную длину данных. Например, браузер Opera 11 ограничил ссылки до 65535 символов, что ограничивает ссылки данных до 65529 символов (65529 символов — это длина закодированных данных, а не исходных данных, если вы используете обычное data:, не указывая тип MIME). Firefox версии 97 и новее поддерживает ссылки данных до 32 МБ (до 97 предел был близок к 256 МБ). Chromium возражает против ссылок больше 512 МБ, а Webkit (Safari) — против ссылок больше 2048 МБ.

Отсутствие обработки ошибок

Недействительные параметры в медиа или опечатки при указании 'base64' игнорируются, но ошибка не сообщается.

Отсутствие поддержки параметров запроса и т.д.

Часть данных ссылки данных не прозрачна, поэтому попытка использовать строку запроса (страничные параметры с синтаксисом <url>?parameter-data) с ссылкой данных просто включит строку запроса в данные, которые представляет ссылка.

Вопросы безопасности

С ссылками данных было связано несколько проблем безопасности (например, фишинг), и переходы к ним в главном уровне браузера. Для смягчения таких проблем переходы на главный уровень к ссылкам данных в современных браузерах блокируются. Подробнее см. этот пост из блога команды безопасности Mozilla.

• Кодирование и декодирование Base64
• Процентное кодирование
• atob()
• btoa()
• CSS url()
• URI