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

💡 Blob URL 是什麼？

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

只在當前瀏覽器 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 正確實作支援。

🛡️ 安全建議（符合 PCI DSS、實務保護）

只允許 Blob 在必要範圍內使用
- 例如圖片顯示可以在 img-src 加上 blob:，其餘腳本或 Worker 部分完全不允許。
避免 blob: URL 中包含 JavaScript 內容！
- 永遠不要用 Blob 來載入 JS，否則等同給攻擊者「本機」注入程式的機會。
動態 JS 應改用 <script nonce="…"> 或 CSP 散列
若要產生 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';