- Data URLs
- Syntax
- Hello, World!
- Кодирование данных в формат base64
- Кодирование в JavaScript
- Кодирование в системе Unix
- Specifications
- Data URLs
- Syntax
- Hello, World!
- Encoding data into base64 format
- Encoding in Javascript
- Encoding on a Unix system
- Encoding on Microsoft Windows
- Common problems
- Specifications
- Browser compatibility
- Свойства узлов: тип, тег и содержимое
- Классы DOM-узлов
Data URLs
URL- адреса данных, URL- адреса с префиксом data: scheme, позволяют создателям контента встраивать в документы небольшие файлы. Раньше они назывались «URI данных», пока WHATWG не удалила это имя.
Примечание. URL-адреса данных обрабатываются современными браузерами как уникальные непрозрачные источники, а не наследуют источник объекта настроек, отвечающего за навигацию.
Syntax
URL — адрес данных состоят из четырех частей: префикс ( data: ), A типа MIME , указывающий типа данных, дополнительный base64 маркер , если нетекстовые, а сам данные:
mediatype является тип MIME строки, такие , как ‘image/jpeg’ для файла изображения JPEG. Если не указано, по умолчанию используется text/plain;charset=US-ASCII .
Если данные содержат символы, определенные в RFC 3986 как зарезервированные символы , или содержат пробелы, символы новой строки или другие непечатаемые символы, эти символы должны быть закодированы в процентах ( т . н . «URL-кодированные»).
Если данные являются текстовыми, вы можете встроить текст (используя соответствующие сущности или экранирования в зависимости от типа включающего документа). В противном случае вы можете указать base64 для внедрения двоичных данных в кодировке base64. Вы можете найти дополнительную информацию о типах MIME здесь и здесь .
Текст / простые данные Hello, World! . Обратите внимание, как запятая закодирована в процентах как %2C , а символ пробела как %20 .
базовая64-кодированная версия вышеизложенного
HTML-документ с
Hello, World!
HTML-документ,выполняющий предупреждение JavaScript.Обратите внимание,что требуется закрывающий тег скрипта.
Кодирование данных в формат base64
Base64-это группа схем кодирования двоичных данных в текст,которые представляют двоичные данные в формате строк ASCII путем перевода их в представление radix-64.Состоящие только из символов ASCII,строки base64,как правило,безопасны для url,поэтому их можно использовать для кодирования данных в URL-адресах данных.
Кодирование в JavaScript
У веб-API есть собственные методы для кодирования или декодирования в base64: кодирование и декодирование Base64 .
Кодирование в системе Unix
Кодирование файла или строки в формате Base64 в системах Linux и macOS можно выполнить с помощью командной строки base64 (или, в качестве альтернативы, с помощью утилиты uuencode с аргументом -m ).
echo -n hello|base64 echo -n hello>a.txt base64 a.txt base64 a.txt>b.txt Кодирование в Microsoft WindowsВ Windows Convert.ToBase64String из PowerShell можно использовать для кодирования Base64:
[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello")) В качестве альтернативы оболочка GNU / Linux (например, WSL ) предоставляет утилитуa name="bottom">bottom a>?arg=val p>base64
:bash$ echo -n hello | base64 Common problemsВ этом разделе описаны проблемы, которые обычно возникают при создании и использовании URL-адресов
data
.data:text/html,lots of text…>bottom?arg=val"bottom"
Это представляет собой HTML ресурс,содержимое которого:
lots of text… p>
Формат URL-адресов data очень прост, но легко забыть поставить запятую перед сегментом «данные» или неправильно закодировать данные в формате base64.
data URL - адрес содержит файл в файл, который потенциально может быть очень широким по сравнению с шириной вмещающего документа. В качестве URL-адреса data должны быть отформатированы с использованием пробелов (перевод строки, табуляция или пробелы), но при использовании кодировки base64 возникают практические проблемы .
Браузеры не обязаны поддерживать какую-либо конкретную максимальную длину данных. Например, браузер Opera 11 ограничивал длину URL-адресов до 65535 символов, что ограничивает URL-адреса data до 65529 символов (65529 символов — это длина закодированных данных, а не источника, если вы используете простые data: без указания типа MIME). Firefox версии 97 и новее поддерживает URL-адреса data размером до 32 МБ (до версии 97 ограничение было близко к 256 МБ). Chromium возражает против URL-адресов размером более 512 МБ, а Webkit (Safari) — для URL-адресов размером более 2048 МБ.
Отсутствие обработки ошибок
Недействительные параметры в носителе или опечатки при указании 'base64' игнорируются, но ошибки не выводятся.
Отсутствие поддержки строк запросов и т.д.
Часть данных URL-адреса данных непрозрачна, поэтому попытка использовать строку запроса (параметры страницы, с синтаксисом ?parameter-data ) с URL-адресом данных просто включит строку запроса в данные URL-адреса. представляет.
Ряд проблем безопасности (например, фишинг) был связан с URL-адресами данных и переходом к ним на верхнем уровне браузера. Чтобы смягчить такие проблемы, навигация верхнего уровня к data: URL-адреса заблокированы во всех современных браузерах. См. этот пост в блоге команды безопасности Mozilla для получения более подробной информации.
Specifications
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 is textual, you can simply 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.
data:,Hello%2C%20World! Simple text/plain data. Note the use of percent-encoding (URL-encoding) for the quote and space characters. Also, for CSV data (MIME type "text/csv"), percent-encoding is needed to preserve the line endings that delimit rows of the spreadsheet. data:text/plain;base64,SGVsbG8sIFdvcmxkIQ== base64-encoded version of the above data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E An HTML document with
Hello, World!
data:text/html, 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 in 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
Encoding on Windows can be done through powershell or some dedicated tool. It can even be done via bash base64 utility (see section Encoding on a Unix system) if WSL is activated.
[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello")) # outputs to console: aGVsbG8= bash -c "echo -n hello`|base64" # outputs to console: aGVsbG8= # the backtick (`) is used to escape the piping (|) character here
Common problems
This section describes problems that commonly occur when creating and using data URLs.
This represents an HTML resource whose contents are:
Syntax 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. Formatting in HTML 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 formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding. Length limitations Although Firefox supports data URLs of essentially unlimited length, 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). Lack of error handling 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.
Security issues A number of security issues (e.g. 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 has been blocked in Firefox 59+ (release version, Nightly/Beta from 58), and we hope to see other browsers follow suit soon. See Blocking Top-Level Navigations to data URLs for Firefox 58 for more details.
Specifications
Browser compatibility
Desktop | Mobile | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet |
data URL scheme | Chrome Full support Yes | Edge Full support 12 |
Свойства узлов: тип, тег и содержимое
Теперь давайте более внимательно взглянем на DOM-узлы.
В этой главе мы подробнее разберём, что они собой представляют и изучим их основные свойства.
Классы DOM-узлов
Каждый DOM-узел принадлежит соответствующему встроенному классу.
Корнем иерархии является EventTarget, от него наследует Node и остальные DOM-узлы.
На рисунке ниже изображены основные классы:
Существуют следующие классы:
- EventTarget – это корневой «абстрактный» класс для всего. Объекты этого класса никогда не создаются. Он служит основой, благодаря которой все DOM-узлы поддерживают так называемые «события», о которых мы поговорим позже.
- Node – также является «абстрактным» классом, и служит основой для DOM-узлов. Он обеспечивает базовую функциональность: parentNode , nextSibling , childNodes и т.д. (это геттеры). Объекты класса Node никогда не создаются. Но есть определённые классы узлов, которые наследуются от него (и следовательно наследуют функционал Node ).
- Document, по историческим причинам часто наследуется HTMLDocument (хотя последняя спецификация этого не навязывает) – это документ в целом. Глобальный объект document принадлежит именно к этому классу. Он служит точкой входа в DOM.
- CharacterData – «абстрактный» класс. Вот, кем он наследуется:
- Text – класс, соответствующий тексту внутри элементов. Например, Hello в
Hello
.
- Comment – класс для комментариев. Они не отображаются, но каждый комментарий становится членом DOM.
- HTMLInputElement – класс для тега ,
- HTMLBodyElement – класс для тега ,
- HTMLAnchorElement – класс для тега ,
- …и т.д.
Также существует множество других тегов со своими собственными классами, которые могут иметь определенные свойства и методы, в то время как некоторые элементы, такие как , и , не имеют каких-либо определенных свойств, поэтому они являются экземплярами класса HTMLElement .
Таким образом, полный набор свойств и методов данного узла является результатом цепочки наследования.
Рассмотрим DOM-объект для тега . Он принадлежит классу HTMLInputElement.
Он получает свойства и методы из (в порядке наследования):
- HTMLInputElement – этот класс предоставляет специфичные для элементов формы свойства,
- HTMLElement – предоставляет общие для HTML-элементов методы (и геттеры/сеттеры),
- Element – предоставляет типовые методы элемента,
- Node – предоставляет общие свойства DOM-узлов,
- EventTarget – обеспечивает поддержку событий (поговорим о них дальше),
- …и, наконец, он наследует от Object , поэтому доступны также методы «обычного объекта», такие как hasOwnProperty .
Для того, чтобы узнать имя класса DOM-узла, вспомним, что обычно у объекта есть свойство constructor . Оно ссылается на конструктор класса, и в свойстве constructor.name содержится его имя:
- Text – класс, соответствующий тексту внутри элементов. Например, Hello в