javascript 对HTML5视频使用基于令牌的认证

ubby3x7f 于 2023-05-12 发布在 Java

关注(0)|答案(2)|浏览(200)

我目前在我的Web应用程序上使用JWT处理每个需要身份验证的路由，在NodeJS服务器上使用passport。令牌由前端存储，每个请求都与axios示例一起使用，并将头部“Authorization”设置为令牌。
一切正常，但现在我想使用显示视频用户上传。为了做到这一点，我想使用相同的机制。问题是，使用<video> HTML标记，唯一可以获得resource的是使用src属性，但我无法找到一种方法使其使用'Authorization'头，因为它没有使用axios。
有没有办法做到这一点，或者我被迫实现自己的某种播放器使用媒体源API？我还尝试将令牌作为查询字符串放在URL中。它确实工作，但这样做安全吗？因为将显示auth令牌（或仅用于视频资源的新令牌）？
注意：（我可以用axios下载整个文件，然后把一个blob作为src，但这真的很低效）

JavaScript

来源：https://stackoverflow.com/questions/56146913/using-token-based-authentication-for-html5-video

2条答案

按热度按时间

kognpnkq1#

我找不到任何玩家支持这个。所有播放器回退使用浏览器时，播放媒体文件与<video>和没有办法摆弄头设置身份验证令牌。
添加头的唯一方法是使用HLS等协议。然后通过XHR发出请求，您可以访问请求头：

<html>

<head>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <meta charset="utf-8">
</head>

<body>
  <video
         id="my_video"
         class="video-js"
         controls
         preload="auto"
         width="640"
         height="268"
         data-setup="{}"
         >
  </video>
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script>
  videojs.Hls.xhr.beforeRequest = function(options) {
    options.headers = options.headers || {};
    options.headers.Authorization = 'Bearer token';
    console.log('options', options)
    return options;
  };
  var player = videojs('my_video');
  player.ready(function() {
    this.src({
       src: "https://dl5.webmfiles.org/big-buck-bunny_trailer.webm",
      type: "video/webm",
    });
  });
</script>
</body>

</html>

赞(0）回复(0）举报 2023-05-12

ozxc1zmp2#

以下是我如何处理类似情况的：
1.创建一个握手端点，告诉你的服务器你将要请求一个视频，这个端点受身份验证的保护，这个端点所做的是返回一个uuid，代表将要请求的视频。
1.视频流端点仅接受从握手返回的UUID。
顺便说一句，我维护了一个记录每个用户及其相应令牌的会话Map，所以如果我发现一个会话已经过时（比如空闲30分钟）并被删除，那么为该会话生成的所有uuid也都被删除，所以即使他们以某种方式获得了uuid，也没有人可以访问它们。

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 对HTML5视频使用基于令牌的认证

2条答案

相关问题

热门标签

最新问答