In two of my recent articles I have written about how to help improve workflows whilst using Amazon S3 with the command line interface as well as the uploading of objects using Multipart uploading. In this new article, I am continuing my focus on S3 by looking at an essential concept for web developers and AWS enthusiasts. This concept is called Cross-Origin Resource Sharing or CORS for short. I will explain what CORS is and how to use it with two S3 buckets to create a simple static website (something that you have probably already done using just a single bucket). By the end, you will have a clear understanding of CORS and how to implement it effectively.
As already mentioned, CORS stands for Cross-Origin Resource Sharing. It’s a security feature implemented by web browsers to prevent web pages from making requests to a different domain than the one that served the web page. In simpler terms, it ensures that your web assets are only accessible by the websites hosted on the same domain, enhancing security on the web. For example if you have the domain name www.my-blog.com, this is different to the domain name www.my-blog-files.com. If the domain www.my-blog.com has to make a request for data to www.my-blog-files.com then this would be considered as a cross-origin request as the two domain names are different. Due to this, the web browser would block the request unless www.my-blog-files.com had allowed cross origin access. This is where CORS comes in. Once configured, www.my-blog-files.com would be able to send CORS headers indicating that it allows cross-region requests from the www.my-blog.com domain.
Now that we have an high level understanding of CORS, let’s go over an example of how to implement it in AWS using Amazon S3.
We will use two Amazon S3 buckets to store the files for a simple static website.
The first bucket, named my-cors-demo-website, will contain the HTML, CSS and JavaScript files that make up the core frontend of the site. This is where the main webpages will reside.
A second bucket called my-cors-demo-website-assets will hold supplementary assets - specifically, an image file and a JSON data file. The JSON file has some dummy contact data that the JavaScript code will load into the HTML page.
To allow the my-cors-demo-website bucket to securely access the assets in the my-cors-demo-website-assets bucket, we will implement CORS (Cross-Origin Resource Sharing). This will permit cross-domain requests between the two S3 buckets.
The CORS configuration will specify that the my-cors-demo-website bucket can make GET requests for objects in the my-cors-demo-website-assets bucket. This will enable JavaScript to fetch data stored inside a JSON data file.
Let’s go through the steps to set this up. I will be using the AWS CLI to implement the architecture rather than the AWS console so you will need to already have a fundamental knowledge of using the CLI.
my-cors-demo-website and my-cors-demo-website-assets. To create both of these buckets using the CLI, run the following two commands changing the name_of_your_bucket placeholder to the name of your actual buckets:# my-cors-demo-website
aws s3 mb s3://name_of_your_bucket
# my-cors-demo-website-assets
aws s3 mb s3://name_of_your_bucket
# to see the buckets in your AWS account:
aws s3 ls
name_of_your_bucket placeholder to the name of each of your buckets:# my-cors-demo-website
aws s3api delete-public-access-block --bucket name_of_your_bucket
# my-cors-demo-website-assets
aws s3api delete-public-access-block --bucket name_of_your_bucket
