In questo articolo Indice dei contenuti 2 sezioni
Capita spesso, aprendo un PDF generato al volo o un’immagine appena selezionata dal computer, di ritrovarsi davanti a indirizzi blob nella barra del browser, con quella stringa iniziale blob: seguita da un dominio e da una sequenza di caratteri apparentemente casuale. Qualcosa come blob:https://www.example.com/7e9bb365-64e3-4e9a-a087-b37c253bb3e8. Sembrano URL normali, si comportano come URL normali finché la pagina resta aperta, ma provando a copiarli altrove o a inviarli a un’altra persona quasi sempre non succede nulla. Il motivo è semplice: quell’indirizzo non punta a una risorsa ospitata su un server, ma è un riferimento temporaneo creato dal browser verso dati già presenti in locale nel contesto dell’applicazione web.
Il nome deriva dall’oggetto JavaScript Blob, sigla storicamente legata a Binary Large Object. Un Blob è una quantità di dati trattata come oggetto binario e può contenere praticamente qualsiasi cosa: un’immagine, del testo, un documento, un archivio ZIP, un frammento audio. JavaScript può crearne uno al volo, per esempio un piccolo file di testo, senza che esista da nessuna parte un file fisico chiamato documento.txt e senza che esista, in quel momento, alcun indirizzo associato.
Come nasce un Blob URL e perché non si può condividere
A colmare quel vuoto ci pensa createObjectURL(), il meccanismo definito dalla specifica File API che registra l’oggetto nello store interno dei Blob URL e restituisce l’indirizzo corrispondente. L’esempio più immediato riguarda un file scelto dall’utente: dopo la selezione di una foto dalla memoria locale, l’immagine compare subito nella pagina. Non significa affatto che sia stato fatto un upload verso i server dell’applicazione. Il browser sta soltanto usando un indirizzo temporaneo per rendere quel file accessibile all’elemento della pagina.
Ecco perché la condivisione non funziona. Il Blob URL rimanda a una voce mantenuta dal browser nell’ambiente che l’ha generata, quindi non ha senso fuori da lì, né per altri utenti né per altri dispositivi sulla stessa rete locale. Va però detto con chiarezza che vedere un indirizzo blob: non basta per capire da dove arrivino i dati. Potrebbero essere stati prodotti interamente nel browser, provenire da un file locale oppure essere stati scaricati in precedenza con una richiesta di rete. E il fatto che siano rappresentati così non esclude che l’applicazione li spedisca poi a un server. Per ricostruire il percorso reale servono il codice JavaScript e, soprattutto, il pannello Network degli Strumenti per sviluppatori, richiamabile con F12.
Un altro punto riguarda la durata. Un Blob URL non va considerato permanente: l’applicazione può revocarlo esplicitamente e da quel momento il browser scollega l’indirizzo dalla risorsa. La revoca serve a non tenere occupata memoria inutilmente. Basti pensare a un editor fotografico web in cui vengano aperte centinaia di immagini: se l’applicazione continuasse a generare object URL senza liberare quelli ormai inutili, i Blob sottostanti resterebbero lì a pesare.
Differenza con gli URL data: e come sbirciare dentro un Blob
Fonte classica di confusione sono gli indirizzi che iniziano con data:, tipo data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA e via così. Entrambi permettono di usare dati come se fossero risorse raggiungibili via URL, ma il funzionamento è diverso. Con data: il contenuto fa parte dell’indirizzo stesso, i caratteri dopo base64 codificano direttamente l’immagine. Un Blob URL, invece, non contiene i byte: è solo un puntatore verso un oggetto che il browser gestisce separatamente. Da un data: si può ricostruire il contenuto, da un Blob URL no.
C’è comunque un modo per capire cosa si nasconde dietro un indirizzo ancora valido, sempre passando dalla console degli Strumenti per sviluppatori. Assegnando l’URL a una variabile e usando fetch seguito da risposta.blob(), la console restituisce tipo e dimensione della risorsa. Un output come image/png accompagnato da 582341 racconta che si tratta di un PNG da circa 582 KB. Se invece il contenuto è testuale, una chiamata a risposta.text() permette di leggerlo direttamente. Il tutto funziona soltanto se l’ambiente da cui parte la richiesta ha accesso a quell’object URL e se l’indirizzo non è già stato revocato.
