I have a s3 bucket where I store hls files,
and I need to be able to stream those files in a player,
if a use the default s3 url, It works, but It is not safe.
I read and I found that you can use CloudFront and create a signed url or a cookie. Then I created a new Distribution with the following options
Origin Domain Name: Name of my s3 bucket
Restrict Bucket Access: yes
Create a New Identity
Yes, Update Bucket Policy
Allowed HTTP Methods: GET, HEAD, OPTIONS
Cached HTTP Methods: select checkbox OPTIONS
Use legacy cache settings
And then I selected whitelist and choose
Access-Control-Request-Headers
Access-Control-Request-Method
Origin
And finally I selected the
Restrict Viewer Access (Use Signed URLs or Signed Cookies): yes
After creating the distribution I tried to access to a file through zxxxx.cloudfront.net/ls/600/10/playlist.m3u8
And I got Missing Key-Pair-Id query parameter or cookie value
Until this point I think everything is working fine.
I created a ruby script to get those credetials the
CloudFront-Policy
CloudFront-Signature
CloudFront-Key-Pair-Id
If then I try to access to a file using a cookie or an url
zxxxx.cloudfront.net/ls/600/10/playlist.m3u8?Policy=&Signature=&Key-Pair-Id
I am able to download the file, it means everything is working fine again.
The problem is when I try to access the file through my rails app, I get the message: has been blocked by CORS policy
I read and I found that the request should be from the same Domain to be able to send the cookie
I then added a CNAME to my cloudfront distribution called cloud.example.com
And locally I created a record in the host file called dev.example.com, port 80
Again tried to play the file and I'm still getting the same error:
'http://cloud.example/hls/600/10/playlist.m3u8' from origin 'http://dev.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The cors in the bucket is
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
<AllowedHeader>Range</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Can anyone help me?