文件转Blob 防盗链

      Posted on
      2021-01-25 22:16:31

      In
      
          代码
        
      Author:
      
        可乐小可爱メ

1. 背景

一直想研究下 bilibili 视频 blob防盗链的鬼，今天做个初探吧

2. 代码

直接上代码吧~~

2.1 后端部分

const Express = require("express")
const app = new Express()
const fs = require("fs")

app.get("/video", (req, res) => {
  const { referer } = req.headers
  if (referer !== "http://127.0.0.1:8080/") {
    return res.send("404")
  }
  res.header("Access-Control-Allow-Origin", "*")
  const file = fs.readFileSync("./cat.mp4")
  res.send(file)
})
app.listen(5010)

2.2 前端部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blob</title>
    <style>
      video {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <video src="" id="video" controls></video>
  </body>
  <script>
    const vi = document.getElementById("video")
    const xhr = new XMLHttpRequest()
    xhr.open("GET", "http://localhost:5010/video", true)
    xhr.responseType = "blob"
    xhr.onload = function (res) {
      if (this.status === 200) {
        let blob = this.response
        vi.src = URL.createObjectURL(blob)
        vi.addEventListener(
          "loadedmetadata",
          function () {
            URL.revokeObjectURL(blob)
          },
          false
        )
      }
    }
    xhr.send()
  </script>
</html>

3. 分析

3.1 暂时用到了 window.URL.createObjectURL ；即通过ajax 获取后端的 mp4资源转换成 blob流.

3.2 后端部分读取文件用 pipe管道防止内存爆, 同时做 referer 验证，防止通过抓包直接下载资源.

3.3 后续在研究下是否能直接返回blob地址

4. 参考资料

为什么视频网站的视频链接地址是blob？

文件转Blob 防盗链

当前评论 (1) 登录后评论