Схема URI данных — это схема унифицированного идентификатора ресурса (URI) , которая обеспечивает способ включения данных в веб-страницы , как если бы они были внешними ресурсами. Это форма файлового литерала или документа here . Этот метод позволяет обычно извлекать отдельные элементы, такие как изображения и таблицы стилей, в одном запросе протокола передачи гипертекста (HTTP) , что может быть более эффективным, чем несколько запросов HTTP, [1] и используется несколькими расширениями браузера для упаковки изображений, а также другого мультимедийного контента в один файл HTML для сохранения страницы. [2] [3] По состоянию на 2024 год [обновлять]URI данных полностью поддерживаются всеми основными браузерами. [4]
Синтаксис URI данных определен в Request for Comments (RFC) 2397, опубликованном в августе 1998 г. [5] и следует синтаксису схемы URI . URI данных состоит из:
данные:контент/тип;base64,
data:attribute=value, разделенных точкой с запятой ( ;). Обычный параметр типа носителя — charset, указывающий набор символов типа носителя, где значение берется из списка имен наборов символов IANA . [6] Если он не указан, предполагается, что тип носителяtext/plain;charset=US-ASCII URI данных — .base64 , отделенное от предыдущей части точкой с запятой. При наличии оно указывает, что содержимое данных URI представляет собой двоичные данные , закодированные в формате ASCII с использованием схемы Base64 для двоично-текстового кодирования . Расширение base64 отличается от любых параметров типа носителя тем, что не имеет =valueкомпонента и следует после любых параметров типа носителя. Поскольку данные, закодированные в Base64, примерно на 33% больше исходных данных, рекомендуется использовать URI данных Base64 только в том случае, если сервер поддерживает сжатие HTTP или встроенные файлы меньше 1 КБ.,data:+/Примеры URI данных, демонстрирующие большинство функций:
данные:текст/vnd-пример+xyz;foo=bar;base64,R0lGODdh
данные:текст/обычный;кодировка=UTF-8;страница=21,%20данные:1234,5678(выходные данные: "данные:1234,5678")
данные: изображение/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD
данные:image/svg+xml;utf8,<svg width='10'... </svg>
Минимальный URI данных — это data:,, состоящий из схемы, без типа носителя и данных нулевой длины.
Таким образом, в рамках общего синтаксиса URI, URI данных состоит из схемы и пути , без части полномочий , строки запроса или фрагмента . Необязательный тип носителя , необязательный индикатор base64 и данные являются частями пути URI.
Фрагмент HTML , содержащий PNG- изображение маленькой красной точки в кодировке base64 :
< 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 , содержащий SVG- изображение маленькой красной точки в кодировке utf8 :
< img alt = "Красная точка" 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:
< ссылка rel = "значок" 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) , включающее фоновое изображение:
ул . контрольный список ли . завершено { padding-left : 20 пикселей ; фон : белый URL-адрес ( 'data:image/png;base64,iVB\ ORw0KGgoAAAAANSUhEUgAAAAAAAAQAQMAAAAlPW0iAAAAABlBMVEU\ AAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\ yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\ FTkSuQmCC' ) неповторяющаяся прокрутка влево вверх ; } В этом примере \ + <linefeed>терминаторы строк являются функцией CSS, указывающей на продолжение на следующей строке. Они будут удалены процессором таблиц стилей CSS, а URI данных будет восстановлен без пробелов, что сделает его правильным, поскольку пробелы не допускаются в компоненте данных URI data:.
Оператор JavaScript , который открывает встроенное подокно, как для ссылки на сноску:
window . open ( 'data:text/html;charset=utf-8,' + encodeURIComponent ( // Escape для форматирования URL '<!DOCTYPE html>' + '<html lang="en">' + '<head><title>Встроенное окно</title></head>' + '<body><h1>42</h1></body>' + '</html>' ) ); Масштабируемое векторное графическое изображение, содержащее встроенное изображение 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/8QAGQAAAgMBAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAAQIR AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAD /2gAMAwEAAhEDEQA/AOgM52xQDrjvaV 5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4 MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2 X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2r K5VR0YH/9k=" /> </svg> URI данных можно использовать для создания страниц атак, которые пытаются получить имена пользователей и пароли от ничего не подозревающих веб-пользователей. Его также можно использовать для обхода ограничений межсайтового скриптинга (XSS), полностью встраивая атакующую нагрузку в адресную строку и размещая ее через службы сокращения URL, а не нуждаясь в полном веб-сайте, который контролируется третьей стороной. [8] В результате некоторые браузеры теперь блокируют веб-страницы от перехода к URI данных. [9]