using token based authentication for HTML5 video

I'm currently using JWT for each route that needs authentication on my web app, using passport on a NodeJS server. The token is stored by the front-end and every request made is used with an axios instance with the header "Authorization" set to the token.

Everything works fine with that, but now I want to use show videos an user has uploaded. To do that, I want to use the same mechanism. The issue is that using the <video> HTML tag, the only thing to get the ressource is using the src attribute, but I can't figure a way to make make it use the 'Authorization' header as it's not using axios.

Is there a way to do that or am I forced to implement myself some sort of player using the Media Source API ? I tried also putting the token as a query string in the URL. It does work but is that safe to do so as the auth token (or a new one for the video ressource only) will be shown?

Note: (I'm able to download the whole file with axios and then put a blob as a src, but it's really inefficient)

I couldn't find any player that supports this. All players fallback to use browser when playing media files with <video> and there is not way to fiddle with Headers to set Authentication token.

The only way to add headers is when you use protocols like HSL. Then the request are made via XHR and you can access request headers:

<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>

using token based authentication for HTML5 video

Related

Recent Posts