Setting CORS headers for HLS,MPEG-DASH

You need to set CORS headers on the bucket and the web distribution in AWS if you want to work with HLS adaptive streaming or MPEG-DASH. Here we explain how to do this.

  1. Cors Headers on the bucket
  2. Cors headers on the web distribution

CORS Headers on the bucket

Go the the AWS console and select the S3 service. You get a list of bucket(s) you created. Select the bucket you are using. This opens the overview of the bucket with various options:

cors header

Click Permissions. then in the next screen, select CORS configuration:

cors header2

In the next screen, you get to see an example script:

cors header3

 

We need to adapt this a little. The AllowedOrigin and AllowedHeader needs to be changed. AllowedOrigin could be left as a wildcard, like *, but it is best to restrict it to your domain(s). Adapt is like this:

<CORSConfiguration>
 <CORSRule>
 <AllowedOrigin>https://yourdomain.com</AllowedOrigin>
 <AllowedMethod>GET</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>Authorization</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

Wildcard characters are possible to include subdomains but the protocol (http or https) must be included:

<AllowedOrigin>http://*.yourdomain.com</AllowedOrigin>

Then we have to change the AllowedHeader to:

<AllowedHeader>*</AllowedHeader>

Now we have something like this:

<CORSConfiguration>
 <CORSRule>
 <AllowedOrigin>https://*.yourdomain.com</AllowedOrigin>
 <AllowedMethod>GET</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

Save the configuration.

What if I have more domains?

In this case, go again to Buckets > Properties > Permissions and click again on CORS Header Configuration. Copy the existing part in red part you see below:

<CORSConfiguration>
 <CORSRule>
 <AllowedOrigin>https://*.yourdomain.com</AllowedOrigin>
 <AllowedMethod>GET</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

and paste it just under the closing </CORSRule> tag, like this:

<CORSConfiguration>
<CORSRule>
 <AllowedOrigin>https://*.yourdomain.com</AllowedOrigin>
 <AllowedMethod>GET</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
 <AllowedOrigin>https://*.yourdomain.com</AllowedOrigin>
 <AllowedMethod>GET</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Now adapt the AllowedOrigin: of the second CORSRule:

<CORSConfiguration>
<CORSRule>
 <AllowedOrigin>https://*.yourdomain.com</AllowedOrigin>
 <AllowedMethod>GET</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
 <AllowedOrigin>https://*.anotherdomain.com</AllowedOrigin>
 <AllowedMethod>GET</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

You can add up to 32 domains in total. Don't forget to save the configuration when you are done.

Setting CORS Headers on a web distribution

Now go to the CloudFront service and select the web distribution for this bucket, then click Distribution Settings at the top:

cors-headers-distribution-edit

Then select the Behaviors tab:

cors-headers-distribution-behaviors

In there, you will find a default behavior. We are going to adapt that one. Select the behavior (1):

cors-headers-distribution-behaviors2

And click the Edit button (2). Here we have to set 2 things, Allowed HTTP Methods and Forward Headers:

web distribution allowed HTTP methods

If you followed the Preparations uprfront for SFootprint Player 1.x tutorial, the Allowed HTTP Methods is already set to GET, HEAD. However, for MPEG-DASH you need to set this to GET, HEAD, OPTIONS. The other options PUT, POST etc. are not needed and may create a security risk. Change if needed.
Then set Forward Headers to Whitelist:

web distribution cors2

This triggers a new box just underneath it. Here we select all options (1) in the left hand pane and add (2) them to the right hand pane:

cors-headers-distribution-whitelist

It should look like this:

cors-headers-distribution-whitelist

Now, scroll all the way down and click the blue Yes, edit button. This will take minimum 20 minutes to be implemented. You can check whether the web distribution is deployed or in progress in the CloudFront service:

cors-headers-distribution-progress

As soon as you see Deployed, the web distribution is ready and you are good to go to either set up a HLS adaptive streaming video or a MPEG-DASH  video.