Data text html url

Data URLs

Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. They were formerly known as «data URIs» until that name was retired by the WHATWG.

Note: Data URLs are treated as unique opaque origins by modern browsers, rather than inheriting the origin of the settings object responsible for the navigation.

Syntax

Data URLs are composed of four parts: a prefix ( data: ), a MIME type indicating the type of data, an optional base64 token if non-textual, and the data itself:

The mediatype is a MIME type string, such as ‘image/jpeg’ for a JPEG image file. If omitted, defaults to text/plain;charset=US-ASCII

If the data contains characters defined in RFC 3986 as reserved characters, or contains space characters, newline characters, or other non-printing characters, those characters must be percent-encoded (aka «URL-encoded»).

If the data is textual, you can embed the text (using the appropriate entities or escapes based on the enclosing document’s type). Otherwise, you can specify base64 to embed base64-encoded binary data. You can find more info on MIME types here and here.

The text/plain data Hello, World! . Note how the comma is percent-encoded as %2C , and the space character as %20 .

base64-encoded version of the above

An HTML document with

Hello, World!

An HTML document that executes a JavaScript alert. Note that the closing script tag is required.

Encoding data into base64 format

Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. By consisting only of ASCII characters, base64 strings are generally url-safe, and that’s why they can be used to encode data in Data URLs.

Encoding in Javascript

The Web APIs have native methods to encode or decode to base64: Base64 encoding and decoding.

Encoding on a Unix system

Base64 encoding of a file or string on Linux and Mac OS X systems can be achieved using the command-line base64 (or, as an alternative, the uuencode utility with -m argument).

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= 

Encoding on Microsoft Windows

On Windows, Convert.ToBase64String from PowerShell can be used to perform the Base64 encoding:

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

Alternatively, a GNU/Linux shell (such as WSL) provides the utility base64 :

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

Common problems

This section describes problems that commonly occur when creating and using data URLs.

This represents an HTML resource whose contents are:

lots of text. p>a name="bottom">bottoma>?arg=val 

The format for data URLs is very simple, but it’s easy to forget to put a comma before the «data» segment, or to incorrectly encode the data into base64 format.

A data URL provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the data should be formattable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding.

Browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited URLs to 65535 characters long which limits data URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data: , without specifying a MIME type). Firefox version 97 and newer supports data URLs of up to 32MB (before 97 the limit was close to 256MB). Chromium objects to URLs over 512MB, and Webkit (Safari) to URLs over 2048MB.

Invalid parameters in media, or typos when specifying ‘base64’ , are ignored, but no error is provided.

No support for query strings, etc.

The data portion of a data URL is opaque, so an attempt to use a query string (page-specific parameters, with the syntax ?parameter-data ) with a data URL will just include the query string in the data the URL represents.

A number of security issues (for example, phishing) have been associated with data URLs, and navigating to them in the browser’s top level. To mitigate such issues, top-level navigation to data: URLs is blocked in all modern browsers. See this blog post from the Mozilla Security Team for more details.

Specifications

Browser compatibility

BCD tables only load in the browser

Источник

Data URL

Data URL, URL имеющий приставку data: , делает возможным встраивание файлов небольшого размера прямо в документ.

Примечание: современные браузеры обрабатывают Data URL, как неявный уникальный origin, и не заимствуют значение origin из объекта настроек ответственного за навигацию.

Синтаксис

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

тип данных описывается строкой в формате MIME типа, например ‘image/jpeg’ для JPEG файла изображения. При не указывании типа данных, браузер автоматически будет интерпретировать строку данных, как text/plain;charset=US-ASCII

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

base64-кодированная версия примера выше

HTML строка вида:

Hello, World!

HTML строка, вызывающая JavaScript alert функцию. Заметьте необходимость закрывающего тега.

Кодирование данных в формат base64

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

Кодирование в Javascript

Web API имеет встроенные методы для кодирования и декодирования формата base64: Base64 кодирование и декодирование.

Кодирование на Unix системах

На Linux и Mac OS X системах, кодирование файлов или строк в формат Base64 может быть выполнено через программу base64 в командной строке (или, в качестве альтернативы, программу uuencode с -m аргументом).

echo -n hello|base64 # выводит в консоль: aGVsbG8= echo -n hello>a.txt base64 a.txt # выводит в консоль: aGVsbG8= base64 a.txt>b.txt # записывает в файл b.txt: aGVsbG8= 

Кодирование на Microsoft Windows

Кодирование на Windows может быть выполнено через powershell или какую-либо другую предназначенную для этого программу. Так же кодирование может быть выполнено и через программу base64 (смотрите секцию Кодирование на Unix системах), при условии активированной технологии WSL.

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello")) # выводит в консоль: aGVsbG8= bash -c "echo -n hello`|base64" # выводит в консоль: aGVsbG8= # обратный апостроф (`) используется здесь для экранирования символа вертикальной черты (|)

Распространённые проблемы

Эта секция описывает ряд проблем, которые могут возникнуть при использовании Data URL.

Для примера рассмотрим Data URL вида:

результатом декодирования которого будет HTML строка:

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

Форматирование внутри документа

Встраивание Data URL по сути является встраиванием файла внутрь файла, и длина его строки может быть намного шире, чем ширина заключающего его документа. Так же, несмотря на то, что использование пробелов считается обычной практикой при форматировании данных, есть вероятность, что у вас возникнут проблемы при их base64 кодировании.

Хотя Firefox поддерживает Data URL практически неограниченных размеров, каждый отдельный браузер имеет свои ограничения на их длину. Например, Opera 11 ограничивает допустимую длину URL до 65535 символов, что означает ограничение сегмента данных в Data URL до 65529 символов (длина в 65529 символов взята из условия использования только только data: сегмента, без определения MIME типа данных).

Нехватка возможности обработки ошибок

Опечатки в определении MIME типа или написания ключевого слова ‘base64’ будут проигнорированы без каких-либо уведомлений об ошибках.

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

В связи с неопределённостью типа сегмента данных в Data URL, строка параметров (характерные для страницы параметры, представляющиеся в виде ?parameter-data ), добавленная к сегменту данных будет рассматриваться, как часть этих данных.

Несколько проблем с безопасностью (например: фишинг) связаны с Data URL и переходом по ним из корневого контекста документа. Чтобы избавиться от этих проблем, переход по URI, начинающихся со схемы data:// , из корневого контекста документа перестал быть возможен в Firefox, начиная с версии 59 (и начиная с версии 58 в Nightly/Beta вариантах браузера). Надеемся, что остальные браузеры так же последуют этому примеру. Для дополнительной информации смотрите Blocking Top-Level Navigations to data URLs for Firefox 58.

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Источник

URL-схема data:

URL-схема data: (от англ. «data» ‒ «данные») позволяет включать небольшие элементы данных в URL строку так, как если бы они являлись ссылкой на внешний ресурс.

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

Спецификация

URL составляющие схемы

Указывает спецификацию типа носителей данных. «медиаТип» имеет вид [ тип «/» подтип ] *( «;» параметр ) .

тип Указывает медиа тип данных.

data: text /plain;charset=US-ASCII,A%20brief%20note

подтип Указывает медиа подтип данных.

data:text/ plain ;charset=US-ASCII,A%20brief%20note

параметр Указывает параметы медиа типа данных.

data:text/plain; charset=US-ASCII ,A%20brief%20note

по умолчанию: « text/plain;charset=US-ASCII ».

Примечание: При указании значения использующегося по умолчанию, можно опустить « text/plain », оставив только параметр « charset ».

base64

Указывает способ представления (кодирования) данных. Если указано « base64 », то это означает, что данные закодированы в base64. Если же запись « base64 » отсутствует, то это означает, что данные представлены, с помощью кодировки ASCII. При этом символы, которые находятся в диапазоне безопасных URL символов, записываются как обычно, а символы, которые находятся вне диапазона безопасных URL символов, кодируются при помощи стандартного шестнадцатеричного кодирования символов используемого в URL.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZ SiLoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA 7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAAZ SURBVBhXY7hx48Z/MGAAYggHxAJxbtwAAH8HGYcGiB3UAAAAAElFTkSuQmCC

Указываются закодированные данные. Является обязательным параметром.

Пример использования

Схема data:

.box padding: 3px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAAZSURBVBhXY7hx48Z/MGAAYggHxAJxbtwAAH8HGYcGiB3UAAAAAElFTkSuQmCC) repeat;
border: 1px solid #E5E5E5;
>

Примеры со схемой «data:»

Источник