Cosa sono gli strani indirizzi blob: che compaiono nel browser

Capita soprattutto aprendo immagini, PDF, video, documenti generati da un’applicazione Web o contenuti scaricabili dinamicamente: nella barra degli indirizzi del browser, nel codice HTML o negli Strumenti per sviluppatori compare un indirizzo che inizia con la stringa blob:.

A volte c’è proprio un riferimento a un indirizzo HTTPS, seguito da una lunga sequenza apparentemente casuale. Un esempio? blob:https://www.example.com/7e9bb365-64e3-4e9a-a087-b37c253bb3e8

Provando a copiare l’indirizzo in un altro browser, a inviarlo a un’altra persona o riutilizzarlo dopo aver chiuso la pagina, quasi sempre non funziona.

In realtà un indirizzo che comincia per blob: non identifica una risorsa disponibile su un server: si tratta piuttosto un riferimento temporaneo creato dal browser verso dati già disponibili in locale nel contesto dell’applicazione web. Il browser costruisce una specie di “URL artificiale” per permettere a immagini, video, PDF, file prodotti da JavaScript e altri contenuti di essere utilizzati dalle normali API web come se avessero un indirizzo reale.

Che cos’è il formato Blob

Il nome, così curioso, deriva dall’oggetto JavaScript Blob, abbreviazione storicamente associata a Binary Large Object. Un Blob rappresenta essenzialmente una quantità di dati trattata come un oggetto binario: può contenere un’immagine, del testo, un documento, un archivio ZIP, un frammento audio o praticamente qualsiasi sequenza di byte.

JavaScript può ad esempio creare direttamente un piccolo file di testo:

const dati = new Blob(
    ["Documento creato interamente nel browser"],
    { type: "text/plain" }
);

A questo punto esiste un oggetto Blob, ma non esiste necessariamente un file fisico chiamato, per esempio, documento.txt. E soprattutto, non esiste ancora un URL corrispondente.

La specifica File API definisce createObjectURL() come il meccanismo che aggiunge il relativo oggetto allo store interno dei Blob URL e restituisce l’indirizzo associato.

Un caso ancora più intuitivo riguarda un file selezionato dall’utente: supponiamo che questi l’abbia scelto da una posizione di memoria locale. Dopo la selezione della foto, potremmo ritrovare nell’elemento HTML <img> qualcosa come <img src="blob:https://example.com/64d6a54b-...">. La foto compare immediatamente nella pagina.

Da ciò non bisogna però dedurre che l’applicazione abbia necessariamente caricato l’immagine sui propri server. Nel nostro esempio non è avvenuto alcun upload: il browser sta semplicemente usando un URL temporaneo per rendere accessibile all’elemento <img> il file scelto dal sistema in uso, in locale.

Perché non posso copiare un URL blob e inviarlo a qualcuno? E quanto dura un URL di questo tipo?

Il Blob URL rimanda a una voce mantenuta dal browser nell’ambiente che lo ha creato: non può quindi essere condiviso con altri host o utenti. Né remoti né appartenenti alla rete locale.

Va però chiarito un aspetto importante: la presenza di un URL blob: non permette, da sola, di capire da dove provengano i dati. La risorsa potrebbe essere stata generata interamente nel browser, derivare da un file locale scelto dall’utente oppure essere stata ottenuta in precedenza tramite una richiesta di rete. Allo stesso modo, il fatto che sia rappresentata con un Blob URL non esclude che l’applicazione possa poi inviarla a un server. Per ricostruire il percorso effettivo dei dati bisogna analizzare il codice JavaScript e, soprattutto, le richieste mostrate nel pannello Network degli Strumenti per sviluppatori (tasto F12).

Un Blob URL, inoltre, non dovrebbe essere considerato permanente: l’applicazione può eliminarlo esplicitamente e dopo la revoca il browser scollega quell’indirizzo dalla relativa risorsa. La revoca serve soprattutto a evitare che il browser continui a conservare inutilmente i dati in memoria.

Immaginiamo un editor fotografico web nel quale l’utente apra centinaia di fotografie: se l’applicazione generasse continuamente URL.createObjectURL(...) senza liberare gli URL ormai inutilizzati, i Blob sottostanti continueranno a occupare memoria.

Blob URL e data: URL non sono la stessa cosa

Un’altra fonte frequente di confusione sono gli URL che iniziano con data:. Un esempio potrebbe essere il seguente:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

Sia data: che blob: permettono di usare dati come se fossero risorse raggiungibili tramite URL, ma funzionano in maniera profondamente diversa. Nel caso di data:, però, il contenuto fa parte dell’URL stesso. Ricordate l’esempio della pagina web codificata in un semplice URL?

Nell’esempio precedente, i caratteri dopo base64, codificano direttamente l’immagine. Il Blob URL blob:https://example.com/02f..., invece, non contiene invece i byte dell’immagine: è un riferimento verso un oggetto gestito separatamente dal browser. Da data: possiamo ricostruire il contenuto; da un Blob URL no.

Come scoprire cosa contiene un Blob URL

La console degli Strumenti per sviluppatori (F12) permette di eseguire una prova interessante. Se abbiamo un Blob URL ancora valido:

const u = "blob:https://example.com/...";

possiamo provare:

const risposta = await fetch(u);
const blob = await risposta.blob();

console.log(blob.type);
console.log(blob.size);

Il browser può così mostrarci, ad esempio:

image/png
582341

indicando che la risorsa è un PNG da circa 582 KB.

Se si tratta di testo un’istruzione come la seguente permette persino di leggerne direttamente il contenuto:

const risposta = await fetch(u);
console.log(await risposta.text());

Il meccanismo funziona naturalmente soltanto quando l’ambiente dal quale effettuiamo la richiesta ha accesso a quell’object URL e quest’ultimo è ancora valido.

Conclusioni

Gli indirizzi che iniziano con blob: possono sembrare strani soprattutto perché assomigliano a normali URL web, pur non funzionando come tali. Non identificano infatti una risorsa pubblicata su un server né costituiscono, di per sé, un collegamento condivisibile: sono riferimenti temporanei creati dal browser per associare un indirizzo a dati che l’applicazione web ha già a disposizione.

Un Blob URL può puntare a un file scelto dall’utente, a un’immagine generata al volo, a un PDF prodotto da JavaScript, a un contenuto multimediale o a qualsiasi altra sequenza di byte gestita dal browser.

Vedere un URL blob:, tuttavia, non permette di stabilire a colpo d’occhio se i dati siano stati scaricati da Internet, prodotti localmente oppure inviati successivamente a un server. Per ricostruire il flusso reale bisogna osservare il codice JavaScript e, soprattutto, le richieste registrate nel pannello Network degli Strumenti per sviluppatori (F12).