Hispanopedia Wiki
Articulo de referencia

esquema URI de datos

El esquema URI de datos es un esquema de identificador uniforme de recursos (URI) que permite incluir datos en línea en páginas web como si fueran recursos externos. Es una form...

Hispanopedia WikiContenido en espanolLectura gratuita

El esquema URI de datos es un esquema de identificador uniforme de recursos (URI) que permite 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 obtener elementos normalmente separados, como imágenes y hojas de estilo, en una sola solicitud del Protocolo de Transferencia de Hipertexto (HTTP) , lo que puede ser más eficiente que múltiples solicitudes HTTP, [ 1 ] y es utilizado 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 2024Los URI de datos son totalmente compatibles con todos los navegadores principales. [ 4 ]

Sintaxis

La sintaxis de las 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 . Una URI de datos típica (por ejemplo, data:content/type;base64,) consta de:

  • El esquema , data. Le sigue un signo 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 común del tipo de medio es charset, que especifica el conjunto de caracteres del tipo de medio, donde el valor proviene de la lista de nombres de conjuntos de caracteres de IANA . [ 6 ] Si no se especifica ninguno, se asume que el tipo de medio del URI de datos es text/plain;charset=US-ASCII.
  • Una extensión Base64 opcional base64, separada de la parte anterior por un punto y coma. Cuando está presente, indica que el contenido de datos de la URI son datos binarios , codificados en formato ASCII mediante 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 por no tener un =valuecomponente y por aparecer 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 usar URI de datos Base64 solo si el servidor admite compresión HTTP o si los archivos incrustados son menores de 1 KB.
  • Los datos , separados de la parte precedente por una coma ( ,). 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 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 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 solo puede contener caracteres Base64 válidos. [ 7 ] Tenga en cuenta que los URI codificados en Base64 data:usan el conjunto de caracteres Base64 estándar (con ' +' y ' /' como caracteres 62 y 63) en lugar del llamado conjunto de caracteres " Base64 seguro para URL ".

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(salida: "los datos: 1234,5678")
  • data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD
  • data:image/svg+xml,<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.

Así, dentro de la sintaxis general de URI, 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 forman parte de la ruta de la URI.

Ejemplos de uso

HTML

Un fragmento HTML que incrusta una imagen PNG codificada en base64 de un pequeño punto rojo ( ):El punto

< img alt = "Punto rojo" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" ancho = "5" alto = "5" >

En este ejemplo, las líneas se han cortado por motivos de formato. En las URI reales, incluidas las URI de datos, los caracteres de control (ASCII del 0 al 31 y 127) y los espacios (ASCII 32) son caracteres excluidos. Esto significa que los espacios 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 del valor de un atributo de elemento (como el "src" anterior) se ignoran . 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 esta es una característica de HTML, no de las URI de datos, y en otros contextos, no es posible confiar en que los espacios en blanco dentro de la URI se ignoren.

Un fragmento HTML que incrusta una imagen SVG de un punto rojo más grande ( El punto):

< img alt = "Punto rojo" src = "data:image/svg+xml, <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, se deben usar comillas simples en los datos SVG, ya que se usan comillas dobles para encapsular el código fuente de la imagen.

También se puede crear un favicon con datos SVG que deben aparecer en la sección 'head' del HTML:

< link rel = "icon" href = "data:image/svg+xml, <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"> <circle style="fill:red" cx="5" cy="5" r="5"/> </svg>' >

CSS

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 ( 'datos:image/png;base64,iVB\ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\AAAD///+l2Z/dAAAAM 0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\FTkSuQmCC' ) desplazamiento sin repetición hacia la parte superior 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. Estos serían eliminados por el procesador de hojas de estilo CSS, y la URI de datos se reconstruiría sin espacios en blanco, lo que la haría correcta, ya que no se permiten espacios en blanco dentro del componente de datos de una URI de tipo data:.

JavaScript

Una instrucción JavaScript que abre una subventana incrustada, como por ejemplo un enlace a una nota al pie:

window.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>' ) );

SVG

Ejemplo de una imagen SVG con imágenes JPEG incrustadas

Una imagen gráfica vectorial escalable que contiene una imagen JPEG incrustada codificada en Base64:

<svg> < ancho de imagen= "64" alto= "24" href= "datos:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5lt c1p9tZ++u7Kfr6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O///////// ////////////////////////////////////////////////////////////wAARCAAYAEADAREAAhEBAxEB/8QAG QAAAgMBAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIRAAMSITEEEyJBgTORUWFx/8QAFA EBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4U yRHvjrAkC9KhpLMClQntlqFc2X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1e AzU/HX80YBYyJLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=" /> </svg>

Malware y phishing

La URI de datos puede utilizarse para construir páginas de ataque que intentan obtener nombres de usuario y contraseñas de usuarios web desprevenidos. También puede utilizarse para eludir las restricciones de secuencias de comandos entre sitios (XSS), insertando 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 que navegan a URI de datos. [ 9 ]

Referencias

  1. ↑ "Uso de URI de datos para acelerar su sitio web" . Blog de Treehouse. 27 de marzo de 2014.
  2. ↑ "SingleFile - Chrome Web Store" . Chrome Web Store . Consultado el 25 de agosto de 2018 .
  3. ↑ "SingleFile – Complementos para Firefox" . Complementos de Firefox . Consultado el 25 de agosto de 2018 .
  4. ↑ Deveria, Alexis (julio de 2015). "¿Puedo usar...?" Recuperado el 31 de agosto de 2015 .
  5. ↑ Masinter, L (agosto de 1998). "RFC 2397 - El esquema de URL "datos" . Grupo de trabajo de ingeniería de Internet . Recuperado el 12 de agosto de 2008 .
  6. ↑ Freed, Ned; Dürst, Martin, eds. (20 de diciembre de 2013). "Conjuntos de caracteres" . Autoridad de Números Asignados de Internet . Recuperado el 31 de agosto de 2015 .
  7. ↑ Berners-Lee, Tim ; Fielding, Roy ; Masinter, Larry (enero de 2005). "Identificadores uniformes de recursos (URI): sintaxis genérica" . Grupo de trabajo de ingeniería de Internet . Consultado el 31 de agosto de 2015 .
  8. ↑ Phishing sin página web: un investigador revela cómo un enlace en sí mismo puede ser malicioso, Naked Security de Sophos, 31 de agosto de 2012 https://nakedsecurity.sophos.com/2012/08/31/phishing-without-a-webpage-researcher-reveals-how-a-link-itself-can-be-malicious/ Archivado el 16 de abril de 2016 en Wayback Machine
  9. ↑ "URLs de datos - HTTP | MDN" . Documentación web de MDN . Mozilla . Consultado el 11 de mayo de 2018 .