7

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 ?

4
  • 1
    I've removed the vulnerability-assessment tag since it is unrelated in my opinion. If you feel otherwise you might try to add it again but then please add the necessary content to your question so that this tag makes sense. Dec 18, 2017 at 10:39
  • I added this tag because this vulnerability came in vulnerability assessment of my application Dec 18, 2017 at 10:55
  • 1
    It does not matter when and where the problem came up, all what matters is the problem. You will not add a food tag either if you got the idea while eating or a sleep tag if you've dreamed of the problem. vulnerability-assessment might make sense for example if you are trying to dispute a report which highlighted this problem. Dec 18, 2017 at 13:38
  • Ok Accepted your comment Dec 18, 2017 at 14:03

2 Answers 2

4

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.

5
  • Yes , I also thought about it , But if i will add cookie then my application will be vulnerable by CSRF attacks . Dec 18, 2017 at 10:57
  • As i am solving VAPT for our application CSRF is also another vulnerability which should not come . So i can not add cookies Dec 18, 2017 at 12:21
  • i can try WWW-Authenticate Solution if it works But just want to ask one thing , where browser stores this info for sending it in authorization header to server Dec 18, 2017 at 13:23
  • @SahilAggarwal: somewhere in memory, maybe also on disk. And, if you are trying to avoid cookies because of CSRF you should avoid this Basic Authorization too because the header will be sent with each request to the server, similar to a cookie. Note that there are ways to avoid CSRF even when using cookies. Dec 18, 2017 at 13:44
  • 1
    @SteffenUllrich Is the lack of support for setting a Authorization header a legacy constraint of the HTML5 Player or are there actual valid security reasons for this lack? Because if I have an Authorization header that I can and do use to authenticate a user, why also use a session cookie? Are there security concerns with Eduardo Cuomo's approach below which successfully does use an Auth header instead of a session cookie?
    – Frikster
    Oct 4, 2021 at 4:59
1

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

2
  • 1
    thanks for providing updated info - also relevant: developer.mozilla.org/en-US/docs/Web/API/Headers
    – brynk
    May 20, 2021 at 22:35
  • This works great except it has to load the entire song ahead of time, meaning that you have to wait until the entire file is downloaded before play starts. Looks like the audio tag automatically starts playing music as soon as part of it is downloaded
    – NotSimon
    May 5 at 19:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.