El esquema URI de datos es un esquema de identificador uniforme de recursos (URI) que proporciona una forma de incluir datos en línea en páginas web como si fueran recursos externos. Es una forma de literal de archivo o documento aquí . Esta técnica permite que elementos normalmente separados, como imágenes y hojas de estilo, se obtengan en una sola solicitud de Protocolo de transferencia de hipertexto (HTTP) , que puede ser más eficiente que varias solicitudes HTTP, [1] y es utilizada por varias extensiones de navegador para empaquetar imágenes y otro contenido multimedia en un solo archivo HTML para guardar la página. [2] [3] A partir de 2024 [actualizar], los URI de datos son totalmente compatibles con todos los navegadores principales. [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 URI . Un URI de datos consta de:
datos:contenido/tipo;base64,
datava 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 conjunto de caracteres del tipo de medio, donde el valor es de la lista de nombres de conjuntos de caracteres de la IANA . [6] Si no se especifica uno, se supone que el tipo de medio del URI de datos es text/plain;charset=US-ASCII.base64, 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 Base64 solo si el servidor admite la compresión HTTP o los archivos integrados son más pequeños que 1 KB.,). Los datos son una secuencia de cero o más octetos representados como caracteres. La coma es obligatoria en un URI de datos, incluso cuando la parte de datos tiene longitud cero. Los caracteres permitidos en la parte de datos incluyen letras mayúsculas y minúsculas ASCII, dígitos y muchos signos de puntuación ASCII y caracteres especiales. 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 con porcentaje . Si los datos están codificados en Base64, 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 denominado conjunto de caracteres " Base64 seguro para URL ".Algunos ejemplos de URI de datos que muestran la mayoría de las características son:
datos:texto/vnd-ejemplo+xyz;foo=bar;base64,R0lGODdh
datos:texto/sin formato;conjunto de caracteres=UTF-8;página=21,los%20datos:1234,5678(salidas: "los datos:1234,5678")
datos:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD
datos:imagen/svg+xml;utf8,<svg ancho='10'... </svg>
El URI de datos mínimo es data:,, que consta del esquema, ningún tipo de medio y datos de longitud cero.
Por lo tanto, dentro de la sintaxis URI general, una URI de datos consta de un esquema y una ruta , sin parte de autoridad , cadena de consulta ni fragmento . El tipo de medio opcional , el indicador base64 opcional y los datos son todos partes de la ruta URI.
Un fragmento de HTML que incorpora una imagen PNG codificada en base64 de un pequeño punto rojo:
< img alt = "" src = "datos:imagen/png;base64,iVBORw0KGgoAAA ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU 5ErkJggg==" estilo = "ancho:36pt;alto:36pt" />En este ejemplo, las líneas se dividen por motivos de formato. En las URI reales, incluidas las URI de datos, los caracteres de control (ASCII 0 a 31 y 127) y los espacios (ASCII 32) son "caracteres excluidos". Esto significa que los caracteres de espacio en blanco no están permitidos en las URI de datos. Sin embargo, en el contexto de HTML 4 y HTML 5, los saltos de línea dentro de un valor de atributo de elemento (como el "src" anterior) se ignoran [ cita requerida ] . Por lo tanto, la URI de datos anterior se procesaría ignorando los saltos de línea, lo que daría el resultado correcto. Pero tenga en cuenta que se trata de una característica de HTML, no de una URI de datos, y en otros contextos, no es posible confiar en que se ignoren los espacios en blanco dentro de la URI.
Un fragmento HTML que incorpora una imagen SVG codificada en UTF8 de un pequeño punto rojo:
< img alt = "Punto rojo" src = "datos:imagen/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 UTF-8 y, por lo tanto, se pueden dividir en varias líneas para facilitar su lectura. Se deben utilizar comillas simples en los datos SVG, ya que las comillas dobles se utilizan 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:
< link rel = "icono" 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\ yw83NDDeNGe4Ug9C9zwz3gVLM DA/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 que se continúa en la siguiente línea. El procesador de hojas de estilo CSS los eliminaría y el URI de datos se reconstruiría sin espacios en blanco, lo que lo haría 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 . abierta ( 'data:text/html;charset=utf-8,' + encodeURIComponent ( // Escape para formato de URL '<!DOCTYPE html>' + '<html lang="en">' + '<head><title>Ventana incorporada</title></head>' + '<body><h1>42</h1></body>' + '</html>' ) ); Una imagen gráfica 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/8QAGQAAAgMBAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0 vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4 MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2 X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR 0YH/9k=" /> </svg> La URL 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 evitar restricciones de secuencias de comandos entre sitios (XSS), integrando la carga útil del ataque completamente dentro de la barra de direcciones y alojándola 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 bloquean las páginas web para que no naveguen a URL de datos. [9]