URL.createObjectURL() — Methode · JavaScript-Referenz

Signatur

URL.createObjectURL(object)

Beschreibung

URL.createObjectURL() ist eine statische Methode der URL-Schnittstelle. Sie nimmt ein Blob (dazu gehört auch File) oder ein MediaSource-Objekt entgegen und gibt einen String der Form blob:https://example.com/550e8400-e29b-41d4-a716-446655440000 zurück. Diese URL lässt sich überall dort einsetzen, wo eine normale URL erwartet wird, etwa in <img src>, <video src>, <a href>, beim Erzeugen eines Worker oder bei fetch().

Typische Einsatzfälle sind die Vorschau von Dateien, die der Nutzer hochladen will (ohne sie vorher an den Server zu senden), Downloads von Daten, die im Browser erzeugt wurden (CSV, JSON, Canvas-Bilder), sowie das Streamen von Medien über die Media Source Extensions. Anders als eine Data-URL (data:...;base64,...) werden die Daten nicht kodiert und kopiert: Die URL ist nur ein kurzer Verweis auf das Objekt im Speicher. Das ist bei großen Dateien deutlich schneller und sparsamer.

Wichtig: Jede erzeugte URL hält das zugehörige Objekt im Speicher fest, bis das Dokument entladen oder URL.revokeObjectURL() aufgerufen wird. Auch zwei Aufrufe mit demselben Blob liefern zwei verschiedene URLs. Wer viele Objekt-URLs erzeugt, z. B. in einer Bildergalerie, muss sie gezielt wieder freigeben, sonst entstehen Speicherlecks.

Parameter

Name	Typ	Default	Beschreibung
$object Pflicht	Blob \| File \| MediaSource		Das Objekt, auf das die URL verweisen soll. `MediaSource` ist nur im Fenster-Kontext erlaubt, nicht in Workern.

Rückgabewert

Typ

string

Beschreibung

Eine eindeutige blob:-URL, die auf das übergebene Objekt verweist. Sie gilt nur im Ursprung (Origin) und in der Lebensdauer des erzeugenden Dokuments bzw. Workers.

Beispiele

Bildvorschau vor dem Hochladen

// HTML: <input type="file" id="upload" accept="image/*"> <img id="preview" alt="">
const input = document.querySelector('#upload');
const preview = document.querySelector('#preview');
let currentUrl = null;

input.addEventListener('change', () => {
  const [file] = input.files;
  if (!file) return;

  // Alte URL freigeben, bevor eine neue erzeugt wird
  if (currentUrl) URL.revokeObjectURL(currentUrl);

  currentUrl = URL.createObjectURL(file);
  preview.src = currentUrl;
  console.log(currentUrl);
});

blob:https://example.com/3f1c2a9e-8b7d-4e21-9a0f-5c6d7e8f9a0b

Im Browser erzeugte CSV-Datei herunterladen

const rows = [
  ['Name', 'Punkte'],
  ['Anna', 42],
  ['Ben', 37],
];
const csv = rows.map((r) => r.join(';')).join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });

const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'ergebnisse.csv';
document.body.append(link);
link.click();
link.remove();

// Kurz verzögert freigeben, damit der Download sicher startet
setTimeout(() => URL.revokeObjectURL(url), 0);

Web Worker aus einem Code-String erzeugen

const workerCode = `
  self.onmessage = (e) => {
    const summe = e.data.reduce((a, b) => a + b, 0);
    self.postMessage(summe);
  };
`;
const blob = new Blob([workerCode], { type: 'text/javascript' });
const url = URL.createObjectURL(blob);
const worker = new Worker(url);

worker.onmessage = (e) => {
  console.log('Summe:', e.data);
  worker.terminate();
  URL.revokeObjectURL(url);
};
worker.postMessage([1, 2, 3, 4, 5]);

Summe: 15

Blob-URL per fetch() wieder auslesen

const blob = new Blob([JSON.stringify({ ok: true })], { type: 'application/json' });
const url = URL.createObjectURL(blob);

const data = await (await fetch(url)).json();
console.log(data);

URL.revokeObjectURL(url);

{ ok: true }

// Wichtig · Fallstricke

Speicherlecks: Das Objekt bleibt im Speicher, solange die URL existiert. Nicht mehr benötigte URLs mit URL.revokeObjectURL() freigeben, z. B. im load-Event eines Bildes. Nach dem Freigeben lädt die URL nicht mehr. Bereits angezeigte Inhalte bleiben aber in der Regel sichtbar.
Nicht persistent: Blob-URLs gelten nur im erzeugenden Dokument bzw. Worker. Man kann sie also nicht speichern, an den Server schicken oder in einem anderen Tab öffnen, nachdem das Dokument geschlossen wurde. Sie sind außerdem an den Ursprung (Origin) gebunden.
Video/Audio: Für MediaStream-Objekte (Kamera, Mikrofon) wurde die Übergabe an createObjectURL() aus der Spezifikation entfernt, und moderne Browser werfen einen TypeError. Stattdessen videoElement.srcObject = stream verwenden.
Service Worker: In Service Workern ist die Methode nicht verfügbar. MediaSource lässt sich außerdem nur im Fenster-Kontext übergeben (in Chrome mit Ausnahmen für dedizierte Worker).
Sicherheit: Blob-URLs mit HTML- oder SVG-Inhalt laufen im Ursprung der Seite. Wer von Nutzern hochgeladene Dateien per Blob-URL in einem neuen Tab oder iframe öffnet, kann dadurch XSS ermöglichen. Unbekannte Inhalte daher nur als <img> anzeigen oder mit download-Attribut herunterladen. Unter einer strengen CSP muss blob: in der passenden Direktive erlaubt sein (z. B. img-src 'self' blob:, worker-src blob:).
Node.js: Verfügbar ab Version 16.7. Dort sind die URLs nur innerhalb desselben Prozesses nutzbar, z. B. mit resolveObjectURL() aus node:buffer.

Siehe auch

URL.revokeObjectURL() URL Blob File MediaSource FileReader.readAsDataURL() HTMLMediaElement.srcObject