WebアプリケーションにおけるBlob URLとObject URL

Blob URL（Object URL）

Blob URLはブラウザ内のインメモリデータオブジェクトを参照する一時的なURLです。URL.createObjectURL()を使用して作成され、blob:origin/uuidの形式に従います。

Blob URLの作成

// Fileインプットから
const file = document.getElementById("upload").files[0];
const blobUrl = URL.createObjectURL(file);
// "blob:https://example.com/550e8400-e29b-41d4-a716-446655440000"

// Blobから
const blob = new Blob(["Hello, World!"], { type: "text/plain" });
const textUrl = URL.createObjectURL(blob);

構造

blob:https://example.com/550e8400-e29b-41d4-a716-446655440000
\__/ \_________________/ \____________________________________/
  |         |                          |
スキーム  オリジン                     UUID

メモリ管理

Blob URLは基になるデータへの参照をメモリに保持します。メモリを解放するには明示的に取り消す必要があります：

const url = URL.createObjectURL(blob);
// ... URLを使用 ...
URL.revokeObjectURL(url);  // メモリを解放

重要な特性

• Blob URLは同一オリジンのみ — クロスオリジンでは使用不可
• 一時的 — ドキュメントのライフタイムの間のみ存続
• 共有不可 — 他のユーザーやタブからはアクセスできない
• ページリフレッシュで失われる
• ほとんどのブラウザでnew URL()では解析できない