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"，用于指定包含行结束符 的字符串如何被写入。

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!");
  }
}