El esquema de URI de datos es un esquema de identificador uniforme de recursos (URI) que proporciona una manera de incluir datos en línea en páginas web como si fueran recursos externos. Es una forma de archivo literal o aquí documento . Esta técnica permite recuperar elementos normalmente separados, como imágenes y hojas de estilo, en una única solicitud del Protocolo de transferencia de hipertexto (HTTP) , que puede ser más eficiente que múltiples solicitudes HTTP, [1] y también es utilizada por varias extensiones del navegador para empaquetar imágenes. como otro contenido multimedia en un único archivo HTML para guardar la página. [2] [3] A partir de 2024 [actualizar], los URI de datos son totalmente compatibles con todos los principales navegadores. [4]
La sintaxis de los URI de datos se define en la Solicitud de comentarios (RFC) 2397, publicada en agosto de 1998, [5] y sigue la sintaxis del esquema de URI . Un URI de datos consta de:
datos: contenido/tipo; base64,
data. Va seguido de dos puntos ( :).attribute=value, separados por punto y coma ( ;). Un parámetro de tipo de medio común es charset, que especifica el juego de caracteres del tipo de medio, donde el valor proviene de la lista de nombres de juegos de caracteres de la IANA . [6] Si no se especifica ninguno, se supone que el tipo de medio del URI de datos es text/plain;charset=US-ASCII.base64 opcional , separada de la parte anterior por un punto y coma. Cuando está presente, esto indica que el contenido de datos del URI son datos binarios , codificados en formato ASCII utilizando el esquema Base64 para codificación de binario a texto . La extensión base64 se distingue de cualquier parámetro de tipo de medio en virtud de que no tiene un =valuecomponente y viene después de cualquier parámetro de tipo de medio. Dado que los datos codificados en Base64 son aproximadamente un 33 % más grandes que los datos originales, se recomienda utilizar URI de datos de Base64 solo si el servidor admite la compresión HTTP o los archivos incrustados tienen menos de 1 KB.,). Los datos son una secuencia de cero o más octetos representados como caracteres. La coma es necesaria en un URI de datos, incluso cuando la parte de datos tiene longitud cero. Los caracteres permitidos dentro de la parte de datos incluyen letras mayúsculas y minúsculas ASCII, dígitos y muchos signos de puntuación y caracteres especiales ASCII. Tenga en cuenta que esto puede incluir caracteres, como dos puntos, punto y coma y coma, que son delimitadores en los componentes del URI que preceden a la parte de datos. Otros octetos deben estar codificados en porcentaje . Si los datos están codificados en Base64, entonces la parte de datos puede contener solo caracteres Base64 válidos. [7] Tenga en cuenta que los URI codificados en Base64 data:utilizan el conjunto de caracteres Base64 estándar (con ' +' y ' /' como caracteres 62 y 63) en lugar del conjunto de caracteres denominado " Base64 seguro para URL ".Ejemplos de URI de datos que muestran la mayoría de las características son:
datos:text/vnd-example+xyz;foo=bar;base64,R0lGODdh
datos:texto/sin formato;charset=UTF-8;página=21,the%20data:1234,5678(salidas: "los datos: 1234,5678")
datos:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD
datos:image/svg+xml;utf8,<svg width='10'... </svg>
El URI de datos mínimo es data:,, que consta del esquema, sin tipo de medio y datos de longitud cero.
Por lo tanto, dentro de la sintaxis general de URI, un URI de datos consta de un esquema y una ruta , sin ninguna parte de autoridad , cadena de consulta o fragmento . El tipo de medio opcional , el indicador base64 opcional y los datos son partes de la ruta URI.
Un fragmento HTML que incorpora una imagen PNG codificada en base64 de un pequeño punto rojo:
< img alt = "" src = "data:image/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU 5ErkJggg==" estilo = "ancho:36pt;alto:36pt" />En este ejemplo, las líneas están divididas por motivos de formato. En los URI reales, incluidos los URI de datos, los caracteres de control (ASCII 0 a 31 y 127) y los espacios (ASCII 32) son "caracteres excluidos". Esto significa que no se permiten caracteres de espacio en blanco en los URI de datos. Sin embargo, en el contexto de HTML 4 y HTML 5, los cambios de línea dentro del valor de un atributo de elemento (como el "src" anterior) se ignoran [ cita necesaria ] . Por lo tanto, el URI de datos anterior se procesaría ignorando los cambios de línea, dando el resultado correcto. Pero tenga en cuenta que esta es una característica HTML, no una característica de URI de datos, y en otros contextos, no es posible confiar en que se ignoren los espacios en blanco dentro del URI.
Un fragmento HTML que incorpora una imagen SVG codificada en utf8 de un pequeño punto rojo:
< img alt = "Punto rojo" 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>" />En este ejemplo, los datos de la imagen están codificados con utf8 y, por lo tanto, los datos de la imagen se pueden dividir en varias líneas para facilitar la lectura. Se deben utilizar comillas simples en los datos SVG, ya que se utilizan comillas dobles para encapsular la fuente de la imagen.
También se puede crear un favicon con codificación utf8 y datos SVG que deben aparecer en la sección 'head' del HTML:
< enlace 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>' />Una regla de hojas de estilo en cascada (CSS) que incluye una imagen de fondo:
ul . lista de verificación li . completar { relleno-izquierda : 20 px ; fondo : URL blanca ( 'data:image/png;base64,iVB\ ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\ AAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\ yw83NDDeNGe4Ug9C9zwz3gVLMDA /A6P9/AFGGFyjOXZtQAAAAAEl\ FTkSuQmCC' ) no- repetir desplazamiento arriba hacia la izquierda ; } En este ejemplo, los \ + <linefeed>terminadores de línea son una característica de CSS que indica la continuación en la siguiente línea. El procesador de hojas de estilo CSS los eliminaría y el URI de datos se reconstituiría sin espacios en blanco, haciéndolo correcto, ya que no se permiten espacios en blanco dentro del componente de datos de un URI de datos.
Una declaración de JavaScript que abre una subventana incrustada, como para un enlace de nota al pie:
ventana . open ( 'data:text/html;charset=utf-8,' + encodeURIComponent ( // Escape para formato de URL '<!DOCTYPE html>' + '<html lang="en">' + '<head><title >Ventana incrustada</title></head>' + '<body><h1>42</h1></body>' + '</html>' ) ); Una imagen de gráfico vectorial escalable que contiene una imagen JPEG incrustada codificada en Base64:
<svg> < ancho de imagen= "64" alto= "24" href= "data:image/jpeg;base64, /9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf r6zI4f/zyNT/16yv+v/9////// //wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O//////// ////////////////////// /////////////////////////////////////////wAARCAAYAEADAREA AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAAQIR AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAP/ EABQRAQAAAAAAAAAAAAAAAAAA AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4 MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLM Clásico E2rK5VR0YH /9k=" /> </svg> El URI de datos se puede utilizar para construir páginas de ataque que intenten obtener nombres de usuario y contraseñas de usuarios web desprevenidos. También se puede utilizar para sortear las restricciones de secuencias de comandos entre sitios (XSS), incrustando la carga útil del ataque completamente dentro de la barra de direcciones y alojada a través de servicios de acortamiento de URL en lugar de necesitar un sitio web completo controlado por un tercero. [8] Como resultado, algunos navegadores ahora impiden que las páginas web naveguen a URI de datos. [9]