URL de blobs y URL de datos: por qué algunas imágenes web no se pueden guardar normalmente
Comprenda las direcciones de imágenes generadas por el navegador, los datos base64, la duración de las URL de los objetos y los límites de las herramientas de descarga habituales.
La mayoría de las imágenes web tienen una dirección que apunta a un servidor: https://example.com/photo.jpg. Las URL de blobs y las URL de datos funcionan de forma diferente. Se pueden identificar los datos retenidos temporalmente por la sesión actual del navegador. El otro puede colocar los bytes del archivo directamente dentro de la URL.
Ambos aparecen en editores de imágenes, herramientas de lienzo, vistas previas de documentos, aplicaciones de gráficos, formularios de carga y aplicaciones de una sola página. Pueden confundir a los descargadores porque es posible que no haya ningún archivo público permanente en la dirección mostrada. Copiar una URL blob: en otra ventana del navegador a menudo falla. Copiar una URL data: muy larga puede generar una cadena ilegible en lugar de un nombre de archivo familiar.
Estos formatos no son mecanismos de protección por sí mismos. Son características del navegador. Aún necesita permiso para guardar el material subyacente y no debe usarlo para evadir la autenticación o los controles de acceso privado.
Qué es una URL de blob
Un blob es un objeto del navegador que contiene datos binarios. JavaScript puede crear una URL temporal para ese objeto:
const blob = new Blob([imageBytes], { type: "image/png" });
const url = URL.createObjectURL(blob);
image.src = url;
La dirección resultante se parece a:
blob:https://example.com/2f1b8d36-9b42-4f7a-b876-35f68c2d1a10
Se refiere a un objeto gestionado por el navegador. Tiene como ámbito el entorno que lo creó y no es una ruta normal en example.com. Enviar esa cadena a un descargador del lado del servidor no le da al servidor acceso al objeto en memoria de su navegador.
La documentación de URL de blobs de MDN los describe como URL de objetos y explica su ciclo de vida.
Por qué caduca una URL de blob
JavaScript puede liberar la URL del objeto cuando ya no sea necesario:
URL.revokeObjectURL(url);
El navegador también borra las URL de los objetos cuando se descarga el documento. Las aplicaciones deben revocarlos para evitar mantener viva la memoria innecesaria.
Esta es la razón por la que una URL de blob copiada puede funcionar en la pestaña original pero fallar después de una actualización, en otro navegador o en una herramienta de línea de comandos. El objeto útil pertenecía a la sesión de la página original.
De dónde provienen los bytes del blob
Es posible que la aplicación haya creado el blob a partir de varios orígenes:
- Un archivo que el usuario seleccionó localmente.
- Una respuesta obtenida de un servidor.
- Una exportación de lienzo
- SVG generado o datos de gráficos
- Una página de documento decodificada
- Medios ensamblados en el navegador.
Si es propietario de la página, inspeccione la ruta del código que crea el blob. La respuesta original de la red puede proporcionar un archivo más estable. Si la imagen se generó localmente, la aplicación debería ofrecer un botón de descarga que convierta el objeto en un archivo guardado.
Para una aplicación de terceros, utilice su control de exportación normal. No asuma que una dirección de blob es una invitación a eludir su flujo de trabajo.
Guardar una imagen de blob que está autorizado a conservar
La opción más sencilla es el botón Descargar o Exportar de la aplicación. Conoce el nombre del archivo deseado, el tipo de archivo y si se requiere algún procesamiento final.
Si está depurando su propia aplicación y no existe ningún botón, la página actual puede crear un enlace temporal:
const link = document.createElement("a");
link.href = objectUrl;
link.download = "export.png";
link.click();
Esto debe ejecutarse mientras la URL del objeto sea válida en el entorno de creación. No hará que funcione una dirección caducada.
Para un elemento de imagen normal en su propia página, abrir su menú contextual también puede funcionar porque el navegador puede acceder al objeto subyacente. Los resultados varían según el navegador y cómo la aplicación maneja los eventos de puntero.
Qué es una URL de datos
Una URL de datos incorpora contenido directamente:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
Comienza con data:, seguido de un tipo de medio, parámetros opcionales, una coma y los datos codificados. Base64 es común para imágenes binarias. Los SVG pequeños pueden utilizar texto codificado por porcentaje.
A diferencia de una URL de blob, los bytes están en la propia URL. La cuerda puede ser autónoma, pero puede ser extremadamente larga.
La referencia de URL de datos de MDN explica la sintaxis y el comportamiento del navegador.
Por qué los sitios web utilizan URL de datos
Incrustar un pequeño ícono o marcador de posición puede evitar una solicitud de red separada. Las herramientas de creación a veces incorporan pequeños activos automáticamente. Las API de lienzo y archivos también pueden devolver URL de datos para exportar o obtener una vista previa.
Las URL de datos son menos atractivas para fotografías grandes. Base64 aumenta el tamaño del texto, las cadenas gigantes son difíciles de almacenar en caché y depurar, y el navegador debe procesarlas como parte del documento o script.
Si un extractor devuelve uno, verifique si es una imagen significativa o un marcador de posición de un píxel utilizado antes de la carga diferida.
Convertir una URL de datos autorizada en un archivo
En una página del navegador que usted controle, un enlace puede usar la URL de datos como su href con un atributo download. Las herramientas de desarrollo también pueden ayudarle a inspeccionar el tipo y el contenido de los medios.
Tenga cuidado con las URL de datos que no son de confianza. Pueden representar más que imágenes. No pegue cadenas desconocidas en herramientas privilegiadas ni ejecute scripts copiados de una página aleatoria.
Al decodificar mediante programación, conserve el tipo de medio. Guardar bytes PNG con una extensión .jpg no convierte el archivo; simplemente le da un nombre engañoso.
Blob y datos no son lo mismo
| Propiedad | URL de burbuja | URL de datos |
|---|---|---|
| Contiene bytes de archivo en la cadena. | No | si |
| Generalmente temporal | si | No inherentemente |
| Funciona en otra sesión del navegador | Generalmente no | Puede, si se copia intacto |
| Práctico para archivos grandes | mejor | Generalmente pobre |
| forma común | ||
| El servidor puede recuperarlo directamente | No | No como una URL remota normal |
Tratar a ambas como direcciones HTTP ordinarias es el error básico detrás de muchas descargas fallidas.
Cómo el lienzo cambia el problema
Una página web puede dibujar una imagen remota, formas, texto y filtros en <canvas> y luego exportar el resultado combinado como un blob o una URL de datos. Es posible que el objeto visual final nunca exista como un archivo en el servidor.
Para su propia aplicación, llame a canvas.toBlob() para realizar descargas cuando sea posible. Evita crear una enorme cadena base64:
canvas.toBlob((blob) => {
if (!blob) return;
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "canvas-export.png";
link.click();
URL.revokeObjectURL(url);
}, "image/png");
Las imágenes de origen cruzado pueden "contaminar" un lienzo a menos que el servidor remoto y la solicitud utilicen la configuración CORS adecuada. Esa restricción impide que una página lea píxeles de orígenes arbitrarios. No intentes desactivarlo como acceso directo; configure sus propios servidores correctamente o utilice activos autorizados del mismo origen.
Por qué un extractor de imágenes puede omitir estas URL
Un extractor del lado del servidor puede recuperar recursos http: y https:. No puede pedirle a su navegador un objeto almacenado en la memoria. Un extractor renderizado puede detectar la URL del blob en el DOM, pero descargarlo requiere acceso dentro de esa sesión del navegador.
Se pueden detectar URL de datos, pero guardarlas todas rara vez resulta útil. Muchos son pequeños marcadores de posición, íconos de interfaz de usuario o recursos en línea repetidos. Las buenas herramientas pueden filtrarlos, limitar su tamaño o etiquetarlos por separado.
Si la imagen útil provino de una solicitud de red normal antes de convertirse en un blob, inspeccione el panel Red. Mire las solicitudes Fetch/XHR e Img, no solo el DOM. La respuesta de origen puede ser el activo estable que necesita para un flujo de trabajo autorizado.
Utilice la guía de extracción de URL de imágenes para direcciones normales y la guía de imágenes con carga diferida cuando un marcador de posición se convierta posteriormente en una fuente normal.
Lista de verificación de solución de problemas
Cuando la dirección de una imagen comienza con blob::
- Mantenga abiertas la página original y la sesión.
- Busque un botón Descargar o Exportar normal.
- Compruebe si la imagen proviene de una respuesta de la red.
- Para su propia aplicación, exporte el blob desde la página de creación.
- No envíe la URL del blob a un descargador remoto.
Cuando comienza con datos::
- Confirme el tipo de medio declarado.
- Decide si se trata de un activo real o un marcador de posición.
- Decodificarlo sólo en un entorno confiable.
- Asigne a la salida una extensión que coincida con sus bytes reales.
- Reemplace imágenes en línea grandes con archivos normales al optimizar su propio sitio.
Los enlaces caducados pueden parecer un problema de blobs
No todas las URL de apariencia temporal son blobs. Una dirección HTTPS normal puede contener una hora de vencimiento y una firma. Puede funcionar brevemente y luego devolver 403. Esa es una URL firmada controlada por el servidor, no una URL de objeto del navegador.
La guía de URL de imágenes 403 y caducadas explica las cookies, los referentes, los tokens y la entrega firmada.
Seguridad y permiso
Las URL de blobs y datos suelen aparecer en editores, paneles privados y vistas previas generadas por los usuarios. El hecho de que su navegador muestre una imagen no autoriza a tomar el archivo privado de otro usuario ni a eludir las reglas de acceso de la aplicación.
Utilice métodos de exportación para sus propios datos, contenido de clientes autorizados, recursos abiertos o archivos cuya licencia permita su uso. Si la fuente no está clara, sigue la lista de control de licencia y fuente de imágenes.
Guarde los datos, no la dirección temporal
Una dirección blob: es un identificador temporal dentro de una sesión del navegador. Una dirección data: lleva el contenido en la propia cadena. Copiar cualquiera de los dos y esperar una URL pública permanente es donde comienza la mayor confusión.
Utilice el botón de exportación de la aplicación cuando tenga uno. En el software que usted controla, guarde el blob mientras esté activo, mantenga el tipo de medio y luego revoque la URL temporal. Si una respuesta normal de red autorizada proporcionó la imagen antes de que JavaScript la convirtiera en un blob, esa respuesta suele ser el registro más limpio para archivar.