How URL.createObjectURL Works with JavaScript Blobs

The URL.createObjectURL() method creates a unique, temporary URI pointing directly to a binary data object, such as a Blob or File, stored in browser memory. This article explains the internal mechanics of how the browser generates this pseudo-protocol string, maps it to in-memory resources, provides fast access for DOM elements, and manages the lifecycle of the referenced data.

The Internal Object URL Mapping

When you pass a Blob or File instance to URL.createObjectURL(blob), the JavaScript engine does not serialize, copy, or convert the binary data. Instead, the browser’s host environment adds an entry to an internal key-value table maintained in memory.

This internal mapping pairs a newly generated unique identifier with the reference to the underlying binary data in the application’s heap memory. Because the process only stores a memory reference rather than transforming the data into a format like Base64 (Data URLs), the operation is synchronous, near-instantaneous, and highly memory-efficient.

Structure of a Blob URL

The generated string conforms to the blob: URI scheme defined in the W3C File API specification. It typically follows this syntax:

blob:https://example.com/4a5b6c7d-8e9f-0a1b-2c3d-4e5f6a7b8c9d

The URL contains two essential security components: 1. Origin: The scheme and origin (e.g., https://example.com) of the Document or Worker context that executed the method. This enforces the Same-Origin Policy, preventing other websites from hijacking the memory reference. 2. UUID: A cryptographically random Universally Unique Identifier (UUID) acting as the lookup key in the browser’s internal object store.

Request Interception and Data Retrieval

When a Blob URL is assigned to an HTML attribute (such as the src of an <img>, <video>, or <iframe>, or the href of an <a> tag), the browser processes it through its internal networking layer:

  1. Scheme Recognition: The browser intercepts the network request upon identifying the blob: protocol, bypassing standard external network requests (DNS lookup, TCP/TLS handshake).
  2. Origin Verification: The browser checks whether the requesting context matches the origin embedded within the Blob URL. If the origins do not match, the request fails with a security error.
  3. Table Lookup: The browser extracts the UUID, queries its internal object map, and retrieves the associated Blob reference.
  4. Data Streaming: The underlying binary stream and its associated MIME type (defined on the Blob.type property) are delivered directly to the rendering engine or the requesting API.

Lifecycle and Memory Management

A Blob URL retains a strong reference to its associated Blob in memory. This prevents the JavaScript garbage collector from reclaiming the memory used by the binary data, even if all other variables referencing the Blob are out of scope.

The reference persists until one of two events occurs: - Explicit Revocation: Calling URL.revokeObjectURL(objectURL) removes the mapping from the browser’s internal table immediately, freeing the Blob for garbage collection once no other references exist. - Document Unload: When the current document unloads (e.g., closing the tab, reloading, or navigating away), the browser automatically clears its entire internal mapping table and releases all associated resources.