Menu
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)
739
These are three common types of authentication tokens: Connected: Keys, discs, drives, and other physical items plug into the system for access. If you've ever used a USB device or smartcard to log into a system, you've used a connected token.
What Is Token-based Authentication? Token-based authentication is a protocol that generates encrypted security tokens. It enables users to verify their identity to websites, which then generates a unique encrypted authentication token.
Token-based authentication is a process where the user sends his credential to the server, server will validate the user details and generate a token which is sent as response to the users, and user store the token in client side, so client do further HTTP call using this token which can be added to the header and ...
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>Here is how I approached a similar situation:
make a handshake endpoint that tells your server that you are going to request a video, this endpoint is protected by authentication, what this endpoint does is to return a uuid that represents the video that is about to be requested.
the video streaming endpoint only accepts the uuid that was returned from the handshake.
BTW, I maintain a session Map that record each user and their corresponding tokens, so if I found out a session is outdated (like idle for 30 minutes) and removed, then all the uuids generated for that session are also all removed, so no one can access them even if they somehow got the uuids.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
