Setting custom request headers

[thedevelinmycode]

This issue is related to #434, though it has been 5 years, so hopefully something has changed. Note, I am a web dev noob.

I'm working on adding CSRF protection, in part, using a custom header. We use axios for AJAX and I can set axios defaults for the CSRF custom header so that it will be included in all requests, or use interceptors to modify requests before they are sent. I was hoping there was some way to do the same with react-player. I took a peek through your code and most of it is Greek to me, so I don't know where to even really look, though I did grep around.

I tried to overwrite the Fetch API's fetch in hopes that was what <video> would use:

const originalFetch = window.fetch;

window.fetch = (request, options = {}) {
	console.log('fetch is called');
	if(!options.headers) {
		options.headers = new Headers();
	}

	if(options.headers instanceof Headers) {
		options.headers.append('X-HEADER', 'HEADER');
	} else if(options.headers instanceof Array) {
		options.headers.push(['X-HEADER', 'HEADER']);
	} else {
		options.headers['X-HEADER'] = 'HEADER';
	}

	return originalFetch(request, options);
}

However, I don't see the test header, nor any console log statements. So, I'm at a loss for what to do. I really need that custom header in requests.

Based on reading the WHATWG standard, it does mention algorithms for retrieving media data, but doesn't specify an API to use, e.g. WHATWG's own Fetch API, or XHR.

Questions:

1. Is react-player able to expose a way to add custom headers to requests?
2. Is react-player able to expose a way to set the API used to fetch data?
3. Does anyone know what API browsers use to retrieve data from the server, e.g. for <video>s?

If there is no way for react-player to expose those options, I think these are the only ways to get react-player media while having my custom header set:

1. Pull the entire video then hand react-player a blob URL to play from.
2. "Manually" buffer/stream the video and hand react-player a growing array of blob URLs for each chunk of content.
   • Would this actually work in react-player?
3. Set up intercepts for all fetching APIs to modify the request headers before request is sent.

The first could have a pretty negative effect on performance, and the latter sounds challenging or impossible. Any thoughts?

I appreciate your time and assistance. Thank you for working on react-player!

[thedevelinmycode]

Small update. I tried intercepting all XHR calls with xhook, and I tried overwriting window.fetch and neither of those worked, which I suppose confirms that the browser probably isn't using Fetch for pulling videos, or at least not in a way I can "hijack".

[ttiras]

with hls videos you can achieve it with this config:

    <ReactPlayer
      width="100%"
      height="100%"
      url={path}
      config={{
        file: {
          forceHLS: true,
          hlsOptions: {
            xhrSetup: function (xhr: XMLHttpRequest, url: string) {
              xhr.open("GET", url, true);
              xhr.setRequestHeader(
                "Authorization",
                `Bearer ${accessToken}`
              );
            },
          }
        },
      }}
      controls
      onEnded={onEnded}
      onStart={onStart}
    />`

`

[ossonts]

@ttiras did that work for you, I am having issues repeating this....

[ttiras]

version 2.12.0 and yes it works with a graphql endpoint.

[ossonts]

Yes it turns out it was the URL extension, I have an mp4 but it needs an m3u8. -- Not clear how I go from a stream (mp4) to m3u8

[luwes]

@ossonts https://howvideo.works/