stringtranslate.com

esquema de URI de datos

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 , los URI de datos son totalmente compatibles con todos los navegadores principales. [4]

Sintaxis

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,

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.

Ejemplos de uso

HTML

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 de 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 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:

< 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>' />

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 ( '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.

JavaScript

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

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= "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>   

Malware y phishing

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), incorporando la carga útil del ataque completamente dentro de la barra de direcciones y alojándola mediante 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]

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...". Consultado el 31 de agosto de 2015 .
  5. ^ Masinter, L (agosto de 1998). "RFC 2397 - El esquema de URL de "datos"". Grupo de trabajo de ingeniería de Internet . Consultado el 12 de agosto de 2008 .
  6. ^ Freed, Ned; Dürst, Martin, eds. (20 de diciembre de 2013). «Character Sets». Autoridad de Números Asignados en Internet . Consultado 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 una 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/
  9. ^ "URL de datos - HTTP | MDN". MDN Web Docs . Mozilla . Consultado el 11 de mayo de 2018 .