Enabling cross-domain access in CloudFront

Enabling cross-domain access in CloudFront

I recently had to allow cross-domain access in Amazon’s CloudFront service for some XML and closed caption files. This is a fairly normal occurrence, especially with a CDN like CloudFront, so you’d think it’d be well documented, right? No? Well it will be after this.

This is a really basic how-to for enabling cross-domain access. It assumes that you have an S3 bucket set up and associated with a CloudFront distribution. You’ll also need admin-level access.

Talk to one of our digital experts

Tom Houdmont

Head of Business Solutions

Do you have an idea or a project you need support with?

Tom leads Box UK’s Business Solutions team and has over 15 years experience in the web industry.  Tom is passionate about creating impactful solutions that solve real problems and deliver the outcomes our clients need.

Book a meeting with Tom

Or call us on 020 8098 2093

Step 1: enable CORS on your S3 bucket

Go to your S3 bucket in the AWS (Amazon Web Services) console and select it. Click the Properties tab then open the Permissions area. You should see a button labelled ‘Edit CORS Configuration’ or something similar. Click it. You’ve now got a popup called ‘CORS Configuration Editor’ with a big text box in it. Paste your CORS config in there and press save.

Example CORS configuration

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>YOUR DOMAIN HERE</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

This is a very basic CORS configuration for one domain. Replace ‘YOUR DOMAIN HERE’ with your domain (wildcards are allowed). Add an allowed method tag for each HTTP method you want to use (GET, POST, PUT, DELETE). There are more options available as listed at Amazon’s How do I enable Cors resource.

Step 2: enable Header Forwarding in CloudFront

Select the CloudFront distribution that’s associated with the S3 bucket you changed above in the AWS console. Click Distribution Settings. Go to the Behaviours tab, click the behaviour (if you have more than one, you’ll need to do the following for all of them) and click Edit. Change the Forward Headers dropdown to Whitelist. Select ‘Origin’ in the left-hand list and click Add to move it to the right-hand list. Click Yes, Edit to save and then wait for CloudFront to propagate the change; about 20 mins to half an hour.

If everything has worked as it should, you should now be able to access your files cross-domain from CloudFront. Congratulations!

References

http://stackoverflow.com/a/24459590 – accessed on 9/9/14

Amazon’s How do I enable Cors.

Nick Rowland

Head of System Engineering and QA

With 25 years of web development experience, Nick has worked with clients from startups to global financial firms. His expertise in application development, server infrastructure, and automation ensures he delivers optimal solutions tailored to client needs.