Adding HTTP header to outgoing requests

[sdannyb]

Hi,

I am using Dash.js to play audio in VOD and Live mode on Chrome.
For security reasons, i need to add a specific HTTP header to each outgoing HTTP requests that Dash.JS makes.

Can you advise what is the best way to achieve that?
Thanks.

[davemevans]

This is available by extending the RequestModifier module something like below.

player.extend("RequestModifier", () => {
        return {
            modifyRequestHeader: xhr => {
                // do xhr.setRequestHeader type stuff here ...
                return xhr;
            },
            modifyRequestURL: url => {
                // modify url as you need - add querystring etc ...
                return url;
            }
        };
    },
    true
);

[sdannyb]

thanks

[iamprem]

How can I modify a XHR request header based on the url. Looks like there is no way to get the url from the XHR object itself. I want to set credentials to true for certain urls (lets say my service url) and false for some other (signed s3 url).

[epiclabsDASH]

Hi @iamprem. You are right, there is no way to retrieve the url from XHR objects. We are revisiting this part, request hooks, for the new version of dash.js that's scheduled for Mid January. Your requirement sounds reasonably so we will take it into account (the possibility of having access to the url when setting headers) for the new release. Thanks!

[iamprem]

Thanks for responding quickly.

Just incase if someone else hit this use-case, I'm currently extending both XHRLoader (so the load method sets 'withCredential' based on the request url) and RequestModifier (for adding query params the url and headers that are not overridden by XHRLoader's 'load' method) to address my problem.

[YannickFuereder]

player.extend("RequestModifier", () => {
return {
modifyRequestHeader: xhr => {
// do xhr.setRequestHeader type stuff here ...
return xhr;
},
modifyRequestURL: url => {
return url + '?range=' + range;
}
};
},
true
);

I want to put the range in my url instead of the header but i have no clue how to achieve this
the request should look like this: (https://mywebsite.com/video.mp4?range=12345-12370)
Any solutions?

[dsilhavy]

@YannickFuereder Would this work for you:

let currentRequest = null;
player.on('fragmentLoadingStarted', function (data) {
    currentRequest = data.request;
})

/* Extend RequestModifier class and implement our own behaviour */
player.extend("RequestModifier", function () {
    return {
        modifyRequestURL: function (url) {
            /* Modify url adding a custom query string parameter */
            if (currentRequest && currentRequest.url === url && currentRequest.range) {
                return url + '?range=' + currentRequest.range;
            }
            return url;
        }
    };
});

[YannickFuereder]

I had to add modifyRequestHeader method else it would work.
But it still sends the pre-flight options request. Is there any way how i could get rid of it?

I tried setting the range header to null but it still sends the request

The first time a file is requested the range in the url isn't present

player.extend("RequestModifier", function () {
    return {
      modifyRequestHeader: xhr => {
        
        return xhr;
    },
        modifyRequestURL: function (url) {
        
            if (currentRequest && currentRequest.url === url && currentRequest.range) {
                return url + '?range=' + currentRequest.range;
            }
            return url;
        }
    };
});

[dsilhavy]

The pre-flight request is triggered by the browser itself. Since you change the query parameters on each request by adding the range, the browser treats each request as a new url. Consequently, you will see a pre-flight request for each of your requests. I don't think you can avoid this expect not sending the range as a query param.

[YannickFuereder]

I fixed it by doing this

  player.extend("RequestModifier", function () {
    return {
      modifyRequestHeader: xhr => {

        if(currentRequest == null) {
          return xhr;
        }

        xhr = new XMLHttpRequest();
        xhr.open('GET', currentRequest.url + '?range=' + currentRequest.range, true);

        return xhr;
    }
    };
});

This works perfect when requesting the video fragments
Thx for the quick response