Blob URLs: Browser Support, Features, Limitations

What is a Blob URL?

A Blob URL is a string of the form blob:https://example.com/<uuid> that the browser hands back from URL.createObjectURL(). It points at a Blob, File, or MediaSource object held in memory by the page that created it. The W3C File API specifies the scheme.

Which browsers does Blob URLs support?

Blob URLs are baseline widely available. Every major desktop and mobile browser shipped support more than ten major versions ago, and there are no flag-gated rollouts to worry about today.

How does a Blob URL work?

A Blob URL is a short opaque pointer that the browser keeps in a per-document blob store. The page hands the browser a Blob; the browser hands the page back a URL; the URL only resolves inside that document.

Three things happen end to end:

• Allocation: URL.createObjectURL stores a strong reference to the Blob in the document blob URL store and returns a string of the form blob:<origin>/<uuid>.
• Resolution: When the page sets the URL on an img.src, video.src, iframe.src, fetch, or anchor href, the browser looks the UUID up in the same store and serves the bytes from memory with no network hop.
• Release: URL.revokeObjectURL removes the entry. The Blob is then eligible for garbage collection once no other JavaScript reference holds it.

The URL is bound to the origin and the document that created it, which is why pasting a blob: URL into a different tab fails. Blob URLs cannot be sent over the wire either, since the bytes never leave the browser process.

What are the common use cases of Blob URLs?

Anywhere a page holds bytes the user wants to see, save, or stream, a Blob URL is the cheapest handle to that memory. The pattern shows up across upload pickers, media players, and offline tools.

• Image and file previews: Read a File from an <input type="file"> picker and assign the Blob URL to img.src so the user sees the picture before upload.
• Client-side downloads: Build a CSV or PDF in the page, wrap it in a Blob, set the Blob URL on an anchor with a download attribute, and click it to trigger a Save dialog without a server round trip.
• Streaming media playback: Pair a MediaSource object with URL.createObjectURL to feed adaptive bitrate chunks into a video element. YouTube, Twitch, and Vimeo use this path for HLS and DASH.
• Web Worker bootstrapping: Compile worker source as a string, wrap it in a Blob, and pass the Blob URL to new Worker(url) so the worker runs without a separate file.
• Capture and recording flows: The MediaRecorder API hands back Blob chunks the page can stitch into a Blob URL for instant playback on a video tag.
• Image cropping and editors: Canvas.toBlob produces a Blob the page can preview and re-upload via a Blob URL, a pattern Figma and Canva ship in their browser editors.

How do you create and revoke a Blob URL?

Creating a Blob URL is one method call; cleaning it up is one more. Skipping the cleanup step is the single most common Blob URL bug, so wire the revoke call up at the same time you write the create call.

• Build a Blob: Construct a new Blob from raw parts, or pull a File out of an <input type="file"> picker, or read response.blob() from a fetch.
• Call URL.createObjectURL: Pass the Blob in. The method returns a string that starts with blob: and ends with a UUID; assign it wherever you would assign a regular URL.
• Use the URL: Drop it on img.src, video.src, an <a download>, an iframe, or a fetch. The browser pulls the bytes straight out of memory.
• Revoke the URL: Call URL.revokeObjectURL(url) once the asset has loaded or the user has clicked the download. Wrap it in a load handler or a setTimeout so the browser has time to read the bytes.
• Confirm the cleanup: Take a heap snapshot in DevTools and search for Blob; the Blob should be gone after revoke fires and no other reference holds it.

// Paste into the browser DevTools console on any page.
// Builds a small text Blob, gets a blob: URL, opens it, and revokes it.
const blob = new Blob(["Hello from TestMu AI"], { type: "text/plain" });
const url = URL.createObjectURL(blob);

console.log("Blob URL:", url);
// Example output: blob:https://example.com/2f1e9c8a-7b32-4d11-9c23-c0f9d7e1a801

const link = document.createElement("a");
link.href = url;
link.download = "hello.txt";
link.textContent = "Download sample";
document.body.appendChild(link);

// Always free the memory once the URL is no longer needed.
link.addEventListener("click", () => {
  setTimeout(() => URL.revokeObjectURL(url), 1000);
});

If the snippet logs a blob: URL but the download link does nothing, the page is sandboxed; remove the sandbox attribute on the iframe or run the snippet on the top-level document instead.

What are the known issues with Blob URLs?

Blob URLs look universal on a compatibility chart, but the edges show up the moment a page outlives a single render or crosses a security boundary. Plan for these before you ship.

• Memory leaks in single-page apps: Each createObjectURL call holds a strong reference to the Blob until you revoke it or close the document. A gallery that swaps thumbnails on scroll without revoking will balloon the renderer process within minutes.
• Service worker registration is rejected: The spec forbids navigator.serviceWorker.register on a blob: script. The relevant PAA "service worker register blob url not allowed" reflects the error message Chrome and Firefox throw.
• Sandboxed iframes break the URL: A blob: URL only resolves inside its creator browsing context. Setting it on an iframe that has the sandbox attribute, or pasting it into a new tab, returns ERR_FILE_NOT_FOUND.
• Cross-origin reads are blocked: A second origin cannot fetch a Blob URL even if it can guess the UUID. CORS is enforced at the blob store layer, not at the network layer.
• iOS Safari downloads need a user gesture: Programmatically clicking an anchor with a Blob URL during page load is silently ignored on iOS Safari. The click has to fire inside a touch or pointer event handler.
• Internet Explorer needs msSaveOrOpenBlob: IE 10 and 11 honor URL.createObjectURL, but the download attribute does not work; fall back to navigator.msSaveOrOpenBlob for save dialogs.

In my experience, the leak path is the one that ships to production unnoticed; the security errors are loud, the leak is silent until the tab gets killed for using two gigabytes of memory.

Citations

All Blob URL version numbers and behavior notes in this guide come from these primary sources:

• W3C File API specification: w3.org/TR/FileAPI
• W3C File API editor draft (createObjectURL): w3c.github.io/FileAPI/#dfn-createObjectURL
• MDN Web Docs - URL.createObjectURL: developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static
• MDN Web Docs - blob: URI scheme: developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/blob
• MDN Web Docs - Blob: developer.mozilla.org/en-US/docs/Web/API/Blob
• MDN Web Docs - URL.revokeObjectURL: developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL_static
• WHATWG HTML living standard - blob URL store: html.spec.whatwg.org/multipage/origin.html
• Wikipedia - Blob URI scheme: en.wikipedia.org/wiki/Blob_URI_scheme
• Chrome Platform Status - File API: chromestatus.com/feature/4738988796936192
• WebKit Bugzilla - Blob URL implementation: bugs.webkit.org/show_bug.cgi?id=79392
• Microsoft Learn - URL.createObjectURL on IE: learn.microsoft.com/en-us/previous-versions/hh772298
• Service Worker spec - blob URL restriction: w3.org/TR/service-workers