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

参考文献url

re: https://dxkite.cn/index.php/a...