Send cookies with hls

[thm-design]

Does react-player currently support sending cookies (cloudfront) with HLS files in any way?

[cookpete]

As of 1.1.2 you can do:

<ReactPlayer
  url={url}
  config={{
    file: {
      hlsOptions: { 
        xhrSetup: function(xhr, url) {
          xhr.withCredentials = true // send cookies
        }
      }
    }
  }}
/>

Based on the API doc here: https://github.com/video-dev/hls.js/blob/master/doc/API.md#xhrsetup

Make sure that the server you are serving from is set up correctly to avoid CORS errors, eg:

Failed to load https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

[thm-design]

Thanks!

[dudeful]

I'm facing this issue right now and I'm running out of hope. Can someone who was able to fix this issue give me some light?

I'm using Amazon CloudFront to deliver my HLS VOD streaming for which the origin is an S3 bucket. Everything works beautifully while the CloudFront distribution is not protected, but I'm not being able to play the videos when I try to use Signed Cookies. Both my front-end and my back-end are running locally in a dev environment (windows + chrome). The 3 required cookies are being set on the browser the way they should, but they are never being sent in the request header to CloudFront.

I already tried this:

<ReactPlayer
  url={url}
  config={{
    file: {
      hlsOptions: { 
        xhrSetup: function(xhr, url) {
          xhr.withCredentials = true // send cookies
        }
      }
    }
  }}
/>

but had no luck with it.

I have spent a few hours by now trying to make this work and still, the problem remains: the cookies are not being sent. Feeling extraordinarily dumb as I'm "sure" is trivial stuff.

I don't think it would be useful to post my code here since I'm 99% sure my only problem is that I'm not succeeding in setting the cookies in the CloudFront request headers.

[arpwal]

@dudeful did you find a solution? I'm trying to setup hls vod protected streams with GCP and am facing similar issues.

[dudeful]

@arpwal I found out that it is actually a restriction regarding the origin, in my case different cloudfront distributions.

If I understood it right, in order to send the signed cookies along with the cloudfront request for the files, you need your frontend on the same domain that the cloudfront distribution that's serving the files is. This can be achieved by setting a custom domain on your distribution setup. After that the cookies should be sent along with the request as usual.

There's a few tutorials explaining the whole process with successful results, but in general all of them pointed to the same direction as I poorly explained above.

I didn't implemented it yet, still recovering from the last trial and its endless frustrations to be honest so I'm delaying for a little while, but as soon as I do fix it I will send the results here and probably open an answered question on stackoverflow for people facing the same issue.

Also, this issue seems to not be correlated to react-player, at least not in my case, but since probably a lot of people are going to face this issue and come here looking for a solution, maybe it should remain open for now I guess.

[vinodhoney]

@dudeful / @arpwal ..Please share the complete code to pass the all 3 cookies (CloudFront-Key-Pair-Id,CloudFront-Signature,CloudFront-Policy) in HLS player.

Thanks in advance!