Blob URL 是什麼？深入解析其功能、CSP 限制與安全應用

Blob URL 是什麼？

當你在瀏覽器端使用 URL.createObjectURL() 將某些資料（如 Blob 或 File）轉換為參考連結時，就會產生一種類似 blob:http://your-domain/… 的 Blob URL（又稱 Object URL）。這類 URL 有幾個特性：

只在當前瀏覽器 session 有效，只在目前的瀏覽器 session 中有效，不能跨 tab 共用，重新整理後也不能繼續使用；
常見用途包括顯示從 <input type="file">、Canvas.toBlob()、AJAX/WebSocket 接收到的二進位資料，或動態產生 PDF / 影片片段等；
可用於圖片 (<img>)、下載連結 (<a href>)、嵌入 (<iframe>)、<video>、Web Worker Script 等標籤使用。

範例：

const blob = new Blob(["Hello World!"], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
console.log(url);  // blob:http://your-domain/xxxx-xxxx-xxxx

CSP 對 Blob URL 的限制

Blob URI 不是由 server 直接回傳，一般 CSP 設定不會自動允許。若未明確列入允許範圍，可能出現以下問題：

<script>、Web Worker、<iframe>、PDF、影像等皆可能遭拒載；
限制範圍視 CSP 指令而定，如 script-src, worker-src, img-src, media-src, object-src 等。

例如：

Content-Security-Policy:
  default-src 'self';
  img-src 'self';
  script-src 'self';

上述未列出 blob:，因此用 blob: 產生的圖片、Worker、JS 等都會被瀏覽器封鎖。

在 CSP 中允許 Blob URL

依照 W3C 規範，需要在實際使用的資源指令中明確加入 blob:：

Content-Security-Policy:
  img-src 'self' blob:;
  media-src 'self' blob:;
  worker-src 'self' blob:;
  object-src 'self' blob:;

或使用通用 default-src blob: 'self'。較穩妥的做法是只在必要的指令中開放，維持最小權限。

Security StackExchange 的討論中，object-src 'self' blob: 是標準設定，Firefox 等現代瀏覽器也支援。

Blob URL 的安全設定與 PCI DSS 實務

只在必要範圍內允許 Blob
- 例如圖片顯示可以在 img-src 加上 blob:，其餘腳本或 Worker 部分完全不允許。
不要用 blob: URL 載入 JavaScript
- 若 Blob 內容可被攻擊者控制，用它載入 JS 會增加注入風險。
動態 JS 可改用 <script nonce="…"> 或 CSP hash
若要產生 JS 腳本或 Worker，不應使用 Blob，也不要用：

new Blob([jsCode], { type: 'application/javascript' });

可採用以下方式：

外部檔案搭配 <script nonce="…">；
或採用 CSP 的 script-src 'nonce-…'、sha256-…；
以及 worker-src, object-src, media-src 根據用途添加 blob:。

實務範例：允許圖片、禁止 JS

Content-Security-Policy:
  default-src 'none';
  img-src 'self' blob:;
  media-src 'self' blob:;
  script-src 'self' 'nonce-ABC123';
  worker-src 'self';
  object-src 'none';