How to Pass Authorization Header in HTTP Request when using HTML5 Player (Audio tag) for security

Question

i am using HTML5 audio player as follows :

<audio controls>
  <source src="<url>" type="audio/mp3">
</audio>

Now , i want to secure my app , So i want to pass some sessionId in Header parameter in http request for mp3 .

I could not find any way to do this , Please help if anyone knows the solution .

or

Is there any other player which gives this support ?

Answer 1

You cannot add any custom headers this way.

The established way to add user specific authorization is to have a session cookie. If such a cookie is set for the target URL (i.e. the user is already authenticated against the target) then it will be sent automatically within the request.

If instead the authorization is not specific for the user but instead some application specific access token you can include it in the URL. If you don't like that it is part of the URL and thus visible in the history you might behave as in the scenario above with the logged in user and cookie based session id. Only that you either set the cookie from within Javascript (in case of same-site request) or get a cookie for the target site by automatically "logging in" with your access token using XHR.

Yet another way is if the target sends a "authentication required" (HTTP status code 401) request back with an appropriate WWW-Authenticate header. In this case the browser will prompt the user for the login credentials and send these with each request to the site using the Authorization header.

Answer 2

You can use fetch:

<audio controls>
  <source id="my-audio" type="audio/mp3" />
</audio>

var url =
  "https://storage.googleapis.com/media-session/sintel/snow-fight.mp3";

async function init() {
  const audioSource = document.getElementById("my-audio");

  const result = await fetch(url, {
    // headers: {
    //   Authorization: "<token>"
    // }
  });

  const blob = await result.blob();

  if (blob) {
    audioSource.src = URL.createObjectURL(blob);

    // Load the new resource
    audioSource.parentElement.load();

    console.info("Ready!", audioSource.src);
  } else {
    console.warn("Can not load");
  }
}

init();

Source: https://stackoverflow.com/a/67628257/717267