esquema de URI de datos

El esquema de URI de datos es un esquema de identificador de recursos uniforme (URI) que proporciona una forma de incluir datos en línea en páginas web como si fueran recursos externos. Es una forma de archivo literal o documento aquí . Esta técnica permite que elementos normalmente separados, como imágenes y hojas de estilo, se obtengan en una sola solicitud del Protocolo de transferencia de hipertexto (HTTP) , que puede ser más eficiente que múltiples solicitudes HTTP, [1] y que varias extensiones del navegador también lo utilizan para empaquetar imágenes. como otros contenidos multimedia en un solo archivo HTML para guardar la página. [2] [3] A partir de 2021, los URI de datos son totalmente compatibles con la mayoría de los principales navegadores y son parcialmente compatibles con Internet Explorer . [4]

La sintaxis de los URI de datos se definió en Request for Comments (RFC) 2397, publicada en agosto de 1998, [5] y sigue la sintaxis del esquema de URI . Un URI de datos consta de:

datos : [  ] [ ; base64 ],
  • El esquema , data. Va seguido de dos puntos ( :).
  • Un tipo de medio opcional . La parte del tipo de medio puede incluir uno o más parámetros, en el formato 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 es de la lista IANA de nombres de juegos de caracteres . [6] Si no se especifica uno, se supone que el tipo de medio del URI de datos es text/plain;charset=US-ASCII.
  • Una extensión de base64 opcional 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 usando el esquema Base64 para la 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 un tamaño inferior a 1 KB.
  • Los datos , separados de la parte anterior por una coma ( ,). 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 una 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 ASCII y caracteres especiales. Tenga en cuenta que esto puede incluir caracteres, como dos puntos, un punto y coma y una coma, que son delimitadores en los componentes de 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 data:URI codificados en Base64 utilizan el conjunto de caracteres Base64 estándar (con ' +' y ' /' como caracteres 62 y 63) en lugar del conjunto de caracteres denominado " Base64 segura para URL ".

Algunos ejemplos de URI de datos que muestran la mayoría de las características son:

data:text/vnd-example+xyz;foo=bar;base64,R0lGODdh
data:text/plain;charset=UTF-8;page=21,the%20data:1234,5678 (salidas: "los datos: 1234,5678")

El URI de datos mínimo es data:,, que consiste en el 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 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.

HTML

Un fragmento HTML que incrusta una imagen de un pequeño punto rojo:Red-dot-5px.png 

< Img  src = "data: imagen / png; base64, iVBORw0KGgoAAA ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8 / w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU 5ErkJggg =="  alt = "punto rojo"  />

En este ejemplo, las líneas se dividen con fines 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 los caracteres de espacio en blanco no están permitidos en los URI de datos. Sin embargo, en el contexto de HTML 4 y HTML 5, los avances de línea dentro de un valor de atributo de elemento (como el "src" anterior) se ignoran [ cita requerida ] . Por lo tanto, el URI de datos anterior se procesaría ignorando los avances 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 de la URI.

CSS

Una regla de hojas de estilo en cascada (CSS) que incluye una imagen de fondo:

ul . lista de verificación  li . complete  {  padding-left :  20 px ;  fondo :  blanco  url ( 'datos: imagen / png; base64, IVb \ ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU \ AAAD /// + l2Z / dAAAAM0lEQVR4nGP4 / 5 / h / 1 + G / 58ZDrAz3D / McH8 \ yw83NDDeNGe4Ug9C9zwz3gVLMDA / A6P9 / AFGGFyjOXZtQAAAAAEl \ FTkSuQmCC' )  NO- repetir  desplazamiento  arriba a la izquierda  ; }

En este ejemplo, los \ + terminadores de línea son una característica de CSS, lo que indica la continuación en la siguiente línea. Estos serían eliminados por el procesador de hojas de estilo CSS y el URI de datos se reconstituiría sin espacios en blanco, haciéndolo correcto, ya que los espacios en blanco no están permitidos dentro del componente de datos de un dato: URI.

JavaScript

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 el formato de URL  '' +  '' +  '  Ventana incrustada  ' +  ' ' +  '