Blob協議 - 瀏覽器的數據包裝

時間 2020-06-14

原文原文鏈接

咱們在使用網頁展現數據的時候，咱們會使用 data: 協議來顯示數據，比較常見的場景如上傳圖片顯示，通常來講都是經過從文件中讀取以後，轉換成base64代碼，而後使用 data: 協議來顯示圖片，具體操做不少，如 FileReader 從文件中讀取二進制, 使用Canvas繪製以後轉換成二進制等，我提出來的主要緣由是用於網頁視頻下載。php

現代HTML5視頻播放的常見操做

相較而言，對於視頻的提取，咱們一般提取的是視頻的原始地址，好比說 https://hostname/path/to/video.mp4?token=token_value?t=some_time，版權方或者視頻全部者會將視頻經過各類驗證（包括不限於時間，機器，IP，登陸會話）等方式來保證視頻的不被下載，在早些時候，大部分的視頻在HTML5時代，都是原始的視頻連接，加上一堆的驗證TOKEN來保證視頻被下載的難度，通過一段時間的發展，你們好像發現了一個通用解決方案，也就是 blob: 協議，經過JS從服務器處理視頻分片，而後在瀏覽器本地經過 URL.createObjectURL 建立一個 URI 來提供視頻下載，代碼以下：web

var data = URL.createObjectURL(new Blob(["hello,world"], {type: "text/plain"}))

獲得的URI以下：blob:https://dxkite.cn/1fbd093a-d40f-4798-9114-85992f0929fb，在瀏覽器新標籤中打開將會是 hello,world 的一個純文本響應，有效期爲頁面的存活期或者手動調用 URL.revokeObjectURL 回收數據，當數據回收以後，文件就會被刪除，在視頻播放器的操做中，一般就是這樣一份代碼，從後端獲取數據以後處理成 blob: 協議的數據，播放的時候就很難經過視頻連接（這裏是 blob 協議的地址）來獲取視頻，由於建立以後就刪除了後端

const video = document.getElementById('video');
const obj_url = window.URL.createObjectURL(blob);
video.src = obj_url;
video.play()
window.URL.revokeObjectURL(obj_url);

獲取blob流的可行方案

通常來講，視頻播放的時候，視頻建立的 blob 流就回收了，可是，衆所周知嘛，瀏覽器是咱本身的東西，想要他變成本身的形狀不是很容易嗎？JS這東西，什麼均可以改，好比：瀏覽器

(function() {
    'use strict';
    console.log('hook running');
    var _cou = window.URL.createObjectURL;
    window.URL.createObjectURL = function (obj) {
        var url = _cou(obj)
        console.log("createObjectURL obj:", obj)
        console.log("createObjectURL url:", url)
        return url
    }

    window.URL.revokeObjectURL = function (url) {
        console.log("revokeObjectURL:", url)
    }
})();

在全部腳本執行以前對其進行HOOK便可,如在B站Hook，能夠看到Hook的地址和播放器的地址：服務器

PS: 屑，blob沒有釋放他也失效了，我可能須要一個比較另類的方式繼續下去app

視頻播放的獲取

我都已經侵入了你的網頁，你怎麼顯示還不是歸我管？繼續修改JS，添加一層MediaSource的方法Hook：ide

// invoke SourceBuffer
    var _addSourceBuffer = window.MediaSource.prototype.addSourceBuffer
    window.MediaSource.prototype.addSourceBuffer = function(mime) {
        console.log("MediaSource.addSourceBuffer ",mime)
        var sourceBuffer = _addSourceBuffer.call(this, mime)
        var _append = sourceBuffer.appendBuffer
        sourceBuffer.appendBuffer= function(buffer) {
            console.log(mime, buffer)
            _append.call(this, buffer)
        }
        return sourceBuffer
    }

以上代碼實現了HOOK網頁中的媒體資源的控制，對，獲取到了視頻的原始二進制數據，屑，此次文檔到這裏結束了，再搞下去網站都要沒了。網站

依舊是拜年祭，ArrayBuffer爲視頻二進制數據，接下來只要導出便可this