схема URI данных
Схема URI данных — это схема универсального идентификатора ресурса (URI) , которая позволяет включать данные в веб-страницы, как если бы они были внешними ресурсами. Это форма файлового литерала или здесь документа . Этот метод позволяет обычно получать отдельные элементы, такие как изображения и таблицы стилей, в одном запросе протокола передачи гипертекста (HTTP) , что может быть более эффективным, чем несколько HTTP-запросов. [ 1 ] и используется несколькими расширениями браузера для упаковки изображений, а также другого мультимедийного контента в один HTML-файл для сохранения страницы. [ 2 ] [ 3 ] По состоянию на 2024 год [update], URI данных полностью поддерживаются всеми основными браузерами. [ 4 ]
Синтаксис
[ редактировать ]Синтаксис URI данных определен в запросе на комментарии (RFC) 2397, опубликованном в августе 1998 г. [ 5 ] и соответствует синтаксису схемы URI . URI данных состоит из:
data:content/type;base64,
- Схема ,
data. После него ставится двоеточие (:). - Необязательный тип носителя . Часть типа носителя может включать в себя один или несколько параметров в формате
attribute=value, разделенные точкой с запятой (;) . Общий параметр типа носителя:charset, определяющий набор символов медиа-типа, где значение взято из списка имен наборов символов IANA . [ 6 ] Если он не указан, тип носителя URI данных: предполагается, чтоtext/plain;charset=US-ASCII. - Необязательное расширение base64.
base64, отделенный от предыдущей части точкой с запятой. Если он присутствует, это указывает на то, что содержимое данных URI представляет собой двоичные данные , закодированные в формате ASCII с использованием схемы Base64 для кодирования двоичного кода в текст . Расширение base64 отличается от любых параметров типа носителя отсутствием=valueкомпонент и следуя за любыми параметрами типа носителя. Поскольку данные в кодировке Base64 примерно на 33 % больше исходных данных, рекомендуется использовать URI данных Base64 только в том случае, если сервер поддерживает сжатие HTTP или размер встроенных файлов меньше 1 КБ. - Данные , отделенные от предыдущей части запятой (
,). Данные представляют собой последовательность из нуля или более октетов, представленную в виде символов. Запятая требуется в URI данных, даже если часть данных имеет нулевую длину. Символы, разрешенные в части данных, включают прописные и строчные буквы ASCII, цифры, а также множество знаков препинания и специальных символов ASCII. Обратите внимание, что сюда могут входить такие символы, как двоеточие, точка с запятой и запятая, которые являются разделителями в компонентах URI, предшествующих части данных. Остальные октеты должны быть закодированы в процентах . Если данные закодированы в формате Base64, часть данных может содержать только допустимые символы Base64. [ 7 ] Обратите внимание, что кодировка Base64data:URI используют стандартный набор символов Base64 (с '+' и '/' как символы 62 и 63), а не так называемый набор символов " URL-safe Base64 ".
Примеры URI данных, демонстрирующие большинство функций:
data:text/vnd-example+xyz;foo=bar;base64,R0lGODdh
data:text/plain;charset=UTF-8;page=21,the%20data:1234,5678
(выходные данные: «данные: 1234,5678»)data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD
data:image/svg+xml;utf8,<svg width='10'... </svg>
Минимальный URI данных: data:,, состоящий из
схема, без типа носителя и данные нулевой длины.
Таким образом, в общем синтаксисе URI URI данных состоит из схемы и пути , без авторитетной части, строки запроса или фрагмента . Необязательный тип носителя , необязательный индикатор base64 и данные — все это части URI-путь.
Примеры использования
[ редактировать ]HTML
[ редактировать ]Фрагмент HTML , встраивающий Base64 : в кодировке PNG- изображение маленькой красной точки 
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" style="width:36pt;height:36pt" />
В этом примере строки разбиты в целях форматирования. В реальных URI включая URI данных, управляющие символы (ASCII от 0 до 31 и 127) и пробелы (ASCII 32) являются «исключенными символами». Это означает, что символы пробелов не допускаются в URI данных. Однако в контексте HTML 4 и HTML 5 переводы строк внутри значения атрибута элемента (например, «src» выше) игнорируются. [ нужна ссылка ] . Таким образом, приведенный выше URI данных будет обработан без учета перевода строки, что даст правильный результат. Но обратите внимание, что это функция HTML, а не функция URI данных, и в других контекстах невозможно полагаться на то, что пробелы внутри URI игнорируются.
Фрагмент HTML , встраивающий utf8 : в кодировке SVG- изображение маленькой красной точки 
<img alt="Red dot" src="data:image/svg+xml;utf8,
<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'>
<circle style='fill:red' cx='5' cy='5' r='5'/>
</svg>"/>
В этом примере данные изображения закодированы с помощью utf8, и, следовательно, данные изображения могут быть разбиты на несколько строк для удобства чтения. В данных SVG необходимо использовать одинарную кавычку, поскольку двойная кавычка используется для инкапсуляции источника изображения.
Фавикон также может быть создан с использованием кодировки utf8 и данных SVG, которые должны появиться в разделе « head » HTML:
<link rel="icon" href='data:image/svg+xml;utf8,
<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg">
<circle style="fill:red" cx="5" cy="5" r="5"/>
</svg>'/>
CSS
[ редактировать ]Правило каскадных таблиц стилей (CSS) , включающее фоновое изображение:
ul.checklist li.complete {
padding-left: 20px;
background: white url('data:image/png;base64,iVB\
ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\
AAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\
yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\
FTkSuQmCC') no-repeat scroll left top;
}
В этом примере \ + <linefeed> терминаторы линии
являются функцией CSS, указывающей продолжение на следующей строке. Они будут удалены процессором таблицы стилей CSS, а URI данных будет восстановлен без пробелов, что сделает его правильным, поскольку пробелы не допускаются в компоненте данных данных:
УРИ.
JavaScript
[ редактировать ]Оператор JavaScript , открывающий встроенное подокно, как для ссылки в сноске:
window.open('data:text/html;charset=utf-8,' +
encodeURIComponent( // Escape for URL formatting
'<!DOCTYPE html>'+
'<html lang="en">'+
'<head><title>Embedded Window</title></head>'+
'<body><h1>42</h1></body>'+
'</html>'
)
);
SVG
[ редактировать ]
Масштабируемое векторное графическое изображение, содержащее встроенное изображение JPEG, закодированное в Base64:
<svg>
<image width="64" height="24" href="data:image/jpeg;base64,
/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
////////////////////////////////////////////////////////////wAARCAAYAEADAREA
AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k="/>
</svg>
Вредоносное ПО и фишинг
[ редактировать ]URI данных можно использовать для создания страниц атаки, которые пытаются получить имена пользователей и пароли от ничего не подозревающих веб-пользователей. Его также можно использовать для обхода ограничений межсайтового скриптинга (XSS), полностью встраивая полезные данные атаки в адресную строку и размещая через службы сокращения URL-адресов, вместо того, чтобы использовать полноценный веб-сайт, контролируемый третьей стороной. [ 8 ] В результате некоторые браузеры теперь блокируют веб-страницам переход к URI данных. [ 9 ]
Ссылки
[ редактировать ]- ^ «Использование URI данных для ускорения вашего веб-сайта» . Блог домика на дереве. 27 марта 2014 г.
- ^ «SingleFile — Интернет-магазин Chrome» . Интернет-магазин Chrome . Проверено 25 августа 2018 г.
- ^ «SingleFile – Дополнения для Firefox» . Дополнения Firefox . Проверено 25 августа 2018 г.
- ^ Деверия, Алексис (июль 2015 г.). «Могу ли я использовать...» Проверено 31 августа 2015 г.
- ^ Масинтер, Л. (август 1998 г.). «RFC 2397 — Схема URL-адреса данных» . Рабочая группа по интернет-инжинирингу . Проверено 12 августа 2008 г.
- ^ Фрид, Нед; Дюрст, Мартин, ред. (20 декабря 2013 г.). «Наборы символов» . Управление по присвоению номеров в Интернете . Проверено 31 августа 2015 г.
- ^ Бернерс-Ли, Тим ; Филдинг, Рой ; Масинтер, Ларри (январь 2005 г.). «Единые идентификаторы ресурсов (URI): общий синтаксис» . Рабочая группа по интернет-инжинирингу . Проверено 31 августа 2015 г.
- ^ Фишинг без веб-страницы - исследователь показывает, как сама ссылка может быть вредоносной, Naked Security от Sophos, 31 августа 2012 г. https://nakedsecurity.sophos.com/2012/08/31/phishing-without-a-webpage-researcher- показывает, как-ссылка-сама-может-быть-вредоносной/
- ^ «URL-адреса данных — HTTP | MDN» . Веб-документы MDN . Мозилла . Проверено 11 мая 2018 г.