blob:http 地址的原理及生成方法

blob 其实是 h5 表征的 Blob 对象数据，具体请看文档。我们可以使用 Blob 对象隐藏真实的资源路径，在一定程度上可以起到数据的加密性，更多的是为了干扰爬虫。

ASP代码

用ASP代码来实现blob:http 地址的原理及生成方法。
查看演示: https://www.xiyueta.com/article/blob-http/case/asp-blob.html
查看演示>> 下载案例源码>>

HTML页面
ASP页面


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>asp版Blob Url测试</title>
</head>

<body>
    <video id="video" width="400" controls="controls"></video>
    <img id="image" src="">
    <script type="text/javascript">
    function case1() {
        //创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //配置请求方式、请求地址以及是否同步
        xhr.open('POST', 'blob.asp?act=video', true);
        //设置请求结果类型为blob
        xhr.responseType = 'blob';
        //请求成功回调函数
        xhr.onload = function(e) {
            if (this.status == 200) { //请求成功
                //获取blob对象
                var blob = this.response;
                //获取blob对象地址，并把值赋给容器
                console.log("blob video", blob)
                document.getElementById("video").src = URL.createObjectURL(blob);
            }
        };
        xhr.send();
    }

    function case2() {
        //创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //配置请求方式、请求地址以及是否同步
        xhr.open('POST', 'blob.asp?act=image', true);
        //设置请求结果类型为blob
        xhr.responseType = 'blob';
        //请求成功回调函数
        xhr.onload = function(e) {
            if (this.status == 200) { //请求成功
                //获取blob对象
                var blob = this.response;
                //获取blob对象地址，并把值赋给容器
                console.log("blob image", blob)
                document.getElementById("image").src = URL.createObjectURL(blob);
            }
        };
        xhr.send();
    }
    case1()
    case2()
    </script>
</body>

</html>


<%
if request("act")="image" then
    call popupDownFile("weixin.jpg")
else
    call popupDownFile("video.mp4")
end if
'下载文件程序
sub popupDownFile(path)
    dim OSM, SZ 
    path=server.mapPath(path)
    response.clear 
    set OSM = createObject("ADODB.Stream")
        OSM.open 
        OSM.type = 1 
        call OSM.loadFromFile(path) 
        SZ = inStrRev(path, "\") + 1 
        call response.addHeader( "Content-Disposition", "attachment; filename=" & mid(path, SZ) )
        call response.addHeader ( "Content-Length", OSM.size )
        response.charset = "UTF-8" 
        response.contentType = "application/octet-stream" 
        call response.binaryWrite( OSM.read )
        response.flush 
        response.write("") 
        OSM.close 
    set OSM = nothing 
end sub 
%>

PHP代码

用PHP代码来实现blob:http 地址的原理及生成方法。
查看演示: https://www.xiyueta.com/article/blob-http/case/php-blob.html
查看演示>> 下载案例源码>>

HTML页面
PHP页面


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>php版Blob Url测试</title>
</head>

<body> 
    <video id="video" width="400" controls="controls"></video>
    <img id="image" src="">
    <script type="text/javascript">
    function case1() {
        //创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //配置请求方式、请求地址以及是否同步
        xhr.open('POST', 'blob.php?act=video', true);
        //设置请求结果类型为blob
        xhr.responseType = 'blob';
        //请求成功回调函数
        xhr.onload = function(e) {
            if (this.status == 200) { //请求成功
                //获取blob对象
                var blob = this.response;
                //获取blob对象地址，并把值赋给容器
                console.log("blob video", blob)
                document.getElementById("video").src = URL.createObjectURL(blob);
            }
        };
        xhr.send();
    }
    function case2() {
        //创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //配置请求方式、请求地址以及是否同步
        xhr.open('POST', 'blob.php?act=image', true);
        //设置请求结果类型为blob
        xhr.responseType = 'blob';
        //请求成功回调函数
        xhr.onload = function(e) {
            if (this.status == 200) { //请求成功
                //获取blob对象
                var blob = this.response;
                //获取blob对象地址，并把值赋给容器
                console.log("blob image", blob)
                document.getElementById("image").src = URL.createObjectURL(blob);
            }
        };
        xhr.send();
    }
    case1()
    case2()
    </script>
</body>

</html>


<?php
// 返回二进制流数据
if($_REQUEST['act']=='image'){
    $file_path = __DIR__ . '/weixin.jpg';
}else{
    $file_path = __DIR__ . '/video.mp4';
}
$file_size = filesize($file_path);
$oct_data = fread(fopen($file_path, "r"), $file_size);
 
header("Content-type: video/mpeg4;charset=UTF-8");
header("Content-Length: " . $file_size);
echo $oct_data;