Unable to set Authorization headers for HLS

[lfuelling]

I have a stream that requires Auhtorization headers and had this code which worked until recently:

player.tech().vhs.xhr.onRequest((opts) => {
      if (!opts.headers) {
        opts.headers = {};
      }
      opts.headers["Authorization"] = localStorage.getItem("token");
    });

I am sure that this worked with v8.19.1 before, but since at least a few days, I get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'headers')

When I look at the types, it seems like this property never existed:

onRequest?: (args: ServeOnRequestArgs) => void

export interface ServeOnRequestArgs {
  remoteAddress: string
  method: string
  path: string
  status: number
  /** The time to generate the response, not to send it */
  timeInMS: number
}

What's the proper way to set authorization headers for HLS now?

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[pedro-demeu]

Good issue, I using Vhs.xhr.beforeRequest for this

[maartenvanderhoef]

In iOS it is not possible to set the Authorization header. Either the page itself is protected and has the Authorization header or not. For SPA's using a javascript library for authentication like keycloak.js, the Authorization header is not sent to the backend.

What is possible however, is to set a cookies in javascript with the token, and use withCredentials = true; in VideoJS. The cookie is then passed on to the backend.

With Nginx + Lua it is then possible to use the cookie as Authorization header.

[lfuelling]

In my case the domain to which the request is sent is different from where the frontend is served, automatic credential passing doesn't work unfortunately.