Blob隱藏真實路徑

使用 Blob 隱藏真實資源路徑

我們可以使用 Blob 對象隱藏真實的資源路徑，在一定程度上可以起到數據的加密性，更多的是為了干擾爬蟲。

比如日常使用的一些音頻，視頻，圖片，我們都可以使用其 Blob 二進制數據流來表征數據，而非使用 uri，就像經常用到的 image src 的 dataUrl。

如何使用 blob 隱藏路徑？

1. 服務端返回的資源為二進制數據

2. 前端接收到二進制數據后，使用 URL.createObjectURL(blobData) 方法將服務端返回的二進制數據轉換為 blob 的 url 資源掛載到相應的資源對象。

3. 【注】前端要規定返回類型為 blob 類型，否則默認返回的 string 類型，不好搞

let $v = document.querySelector("video");
let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState != 4) {
    return;
  }

  if (xhr.status >= 200) {
    let blob = xhr.response; //后台返回的是 二進制的數據(buffer)
    $v.src = URL.createObjectURL(blob);
    // $v.src = URL.createObjectURL(blob.slice(0, 1024 * 1024 * 6));  可以用slice切割過來的 blob 數據。
  }
};
xhr.open("get", "http://localhost:4000/video");
xhr.responseType = "blob"; // 規定返回值的類型為 blob
xhr.send();

生產場景往往是對切片格式的視頻 m3u8 地址進行 blob 格式處理，其實並不是為了加密，因為瀏覽器還是會解析 blob 並去 get 請求對應的 m3u8 地址，使用 blob uri 的好處在於可以在一定層度上干擾爬蟲。

正常創建 blob

• new Blob(arr,options)
  • arr: 一個數據序列，可以是任意格式的值，例如，任意數量的字符串，Blobs 以及 ArrayBuffers。
  • options: 一個包含了兩個屬性的對象,{ type: "",endings:"transparent" }
    • type，默認值為 ""，它代表了將會被放入到 blob 中的數組內容的 MIME 類型。
    • endings，默認值為"transparent"，用於指定包含行結束符\n 的字符串如何被寫入。

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一個包含DOMString的數組
var oMyBlob = new Blob(aFileParts, { type: "text/html" }); // 得到 blob

兼容 slice

文件分割

function sliceBlob(blob, start, end, type) {
  type = type || blob.type;
  if (blob.mozSlice) {
      return blob.mozSlice(start, end, type);
  } else if (blob.webkitSlice) {
      return blob.webkitSlice(start, end type);
  } else {
      throw new Error("This doesn't work!");
  }
}