¿Qué son las URL de datos?

Una URL de datos es un esquema de URI que proporciona una forma de insertar datos en un documento, y se usa comúnmente para insertar imágenes en HTML y CSS.

Introducción

Una URL de datos es un esquema de URI que proporciona una forma de insertar datos en un documento HTML.

Supongamos que desea incrustar una imagen pequeña. Puede seguir el camino habitual, cargarlo en una carpeta y usar elimgetiqueta para que el navegador haga referencia a ella desde la red:

<img src="image.png" />

o puede codificarlo en un formato especial, llamado URL de datos, que permite incrustar la imagen directamente en el documento HTML, por lo que el navegador no tiene que realizar una solicitud por separado para obtenerla.

Las URL de datos pueden ahorrar algo de tiempo para archivos pequeños, pero para archivos más grandes hay desventajas en el mayor tamaño del archivo HTML, y son especialmente un problema si la imagen se vuelve a cargar en todas sus páginas, ya que no puede aprovechar el almacenamiento en caché del navegador. capacidades.

Además, una imagen codificada como URL de datos suele ser un poco más grande que la misma imagen en formato binario.

No son muy prácticos si sus imágenes se editan con frecuencia, ya que cada vez que se cambia la imagen, debe codificarse nuevamente.

Dicho esto, tienen su lugar en la plataforma web.

¿Cómo se ve una URL de datos?

Una URL de datos es una cadena que comienza condata:seguido del formato de tipo MIME. Por ejemplo, una imagen PNG tiene tipo mimoimage/png.

A esto le sigue una coma y luego los datos reales.

El texto generalmente se transfiere en texto sin formato, mientras que los datos binarios generalmente se codifican en base64.

A continuación, se muestra un ejemplo de cómo se verá dicha URL de datos:

<img src="data:image/png,%89PNG%0D%0A..." />

Yaquí hay una versión pequeña de la imagen del banner de este artículo codificada en un enlace

Así es como se ve una URL de datos codificada en base64. Note que comienza condata:image/png;base64:

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

Yaquí hay una versión pequeña de la imagen del banner de este artículo codificada en base64 en un enlace.

Este sitio tiene un generador de URL de datos muy bueno:https://dopiaza.org/tools/datauri/index.phpque puede utilizar para transformar cualquier imagen que se encuentre en su escritorio en una URL de datos.

Las URL de datos se pueden usar en cualquier lugar donde se pueda usar una URL, como vio, puede usarla para enlaces, pero también es común usarlas en CSS:

.main {
    background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}

Soporte de navegador

Soncompatible con todos los navegadores modernos.

Seguridad

Las URL de datos pueden codificar cualquier tipo de información, no solo imágenes, por lo que vienen con su conjunto de implicaciones de seguridad.

DesdeWikipedia:

El URI de datos se puede utilizar para construir páginas de ataque que intentan obtener nombres de usuario y contraseñas de usuarios web desprevenidos. También se puede utilizar para sortear las 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.

Controlareste artículo del Blog de Mozilla Firefoxpara obtener más información sobre cómo los usuarios malintencionados pueden utilizar las URL de datos para hacer cosas malas, y cómo el navegador Firefox mitiga dichos riesgos.

Las URL de datos se definen enRFC 2397.