Что такое URL-адреса данных

URL-адрес данных - это схема URI, которая обеспечивает способ встраивания данных в документ и обычно используется для встраивания изображений в HTML и CSS.

Вступление

URL-адрес данных - это схема URI, которая позволяет встроить данные в HTML-документ.

Допустим, вы хотите встроить небольшое изображение. Вы можете пойти обычным путем, загрузить его в папку и использоватьimgтег, чтобы браузер ссылался на него из сети:

<img src="image.png" />

или вы можете закодировать его в специальном формате, называемом URL-адресом данных, который позволяет встроить изображение непосредственно в HTML-документ, чтобы браузеру не приходилось делать отдельный запрос для его получения.

URL-адреса данных могут сэкономить время для небольших файлов, но для больших файлов есть недостатки в увеличенном размере файла HTML, и они особенно проблематичны, если изображение перезагружается на всех ваших страницах, поскольку вы не можете воспользоваться кешированием браузера. возможности.

Кроме того, изображение, закодированное как URL-адрес данных, обычно немного больше, чем такое же изображение в двоичном формате.

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

Тем не менее, у них есть свое место на веб-платформе.

Как выглядит URL-адрес данных

URL-адрес данных - это строка, которая начинается сdata:за которым следует формат типа MIME. Например, изображение PNG имеет тип пантомимы.image/png.

За ним следует запятая, а затем - фактические данные.

Текст обычно передается в виде обычного текста, а двоичные данные обычно кодируются в формате base64.

Вот пример того, как будет выглядеть такой URL-адрес данных:

<img src="data:image/png,%89PNG%0D%0A..." />

Ивот небольшая версия изображения баннера этой статьи, закодированная в ссылке

Вот как выглядит URL-адрес данных в кодировке base64. Обратите внимание, что это начинается сdata:image/png;base64:

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

Ивот небольшая версия изображения баннера этой статьи base64, закодированного в ссылке.

На этом сайте есть очень хороший генератор URL-адресов данных:https://dopiaza.org/tools/datauri/index.phpкоторый вы можете использовать для преобразования любого изображения, находящегося на вашем рабочем столе, в URL-адрес данных.

URL-адреса данных можно использовать везде, где можно использовать URL-адрес, как вы видели, вы можете использовать его для ссылок, но также их часто используют в CSS:

.main {
    background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}

Поддержка браузера

Они естьподдерживается во всех современных браузерах.

Безопасность

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

ИзВикипедия:

URI данных можно использовать для создания атакующих страниц, которые пытаются получить имена пользователей и пароли от ничего не подозревающих веб-пользователей. Его также можно использовать для обхода межсайтового скриптинга (XSS) ограничения, полностью встраивая полезную нагрузку в адресную строку и размещая через службы сокращения URL-адресов, вместо того, чтобы иметь полный веб-сайт, контролируемый третьей стороной.

Проверятьэта статья из блога Mozilla Firefoxдля получения дополнительной информации о том, как злоумышленники могут использовать URL-адреса данных для совершения вредоносных действий и как браузер Firefox снижает такие риски.

URL-адреса данных определены вRFC 2397.