CloudFront, a Front to S3

Jun 28, 2022
3 min read

CloudFront is a global CDN (Content Delivery Network) that helps the delivery of static and dynamic web contents such as .html, .css, and image files. CloudFront makes these deliveries possible by a worldwide network of data centers known as edge locations. The main advantage of using CloudFront as a CDN is that it provides low latency (request-response time) and allows users to access content with better performance. It also provides better reliability and availability since it caches our objects across multiple edge locations.

How can we secure our objects

When we share our data(objects) over the internet, It must be accessible for those who have the right credentials. We can enable additional security features such as geo-restrictions, signed URLs and OAI(Origin Access Identity)’s. OAI is implemented for S3 Buckets to limit its contents only to CloudFront.

CloudFront can also implement several safeguards such as AWS WAF (Web Application Firewall) and AWS shield (a managed DDoS protection service). Customers can also choose Advanced AWS Shield for deeper insights and cost protection for preventing DDoS attacks.

CloudFront and S3

If we have static content for our site which is ready to be deployed. The first step is to store that content in a secure and reliable location. Obviously, Amazon S3 will be our choice. An S3 bucket is designed in such a way that it can store and retrieve any number of data from anywhere over the internet.

Since CloudFront caches our objects in edge locations, it reduces the request-response time on S3 and helps the users to have a faster response. For dynamic content which doesn't require caching, CloudFront has its edge locations to establish and maintain connections closer to the user's request.

CloudFront Functions

By using CloudFront functions we can write simple JavaScript functions for our CDN deliveries. We can manipulate the flow of requests and responses in CloudFront. These functions can handle millions of requests per second which is an added advantage. The CloudFront functions are native to its parent, which means we can run, test and deploy these functions entirely on CloudFront. We can invoke a CloudFront function when a request or response (events) occurs.

A sample CloudFront function

I have a private S3 bucket(my_pics) contains 3 files.

My_pic01.jpg, My_pic02.jpg and an error.html file

I need to give access to these objects to my friends. Since it is a private bucket no one other than me can view or access the contents.

What can I do?

I decided to use CloudFront. I've created a CloudFront distribution.

I gave the Origin domain as my S3 bucket.

I have to access my S3 I also created a new OAI (s3) for my bucket.

Now my CloudFront distribution can access the S3 bucket using this identity.

Now the content of my s3 bucket is available globally through CloudFront.

https://d375jo7oc62z89Gb4.cloudfront.net/My_pic01.jpg

*Please don't try the link. It won’t work.

When we click the link for the first time, the CloudFront caches the content. From the next click onwards we may feel that the object is actually returned from the S3 bucket but actually, it's not. In this way, CloudFront reduces latency. Pretty cool right!!

Now I'm intentionally going to make things a little more complicated and interesting. I created a simple CloudFront function that checks the query string of the CloudFront URL. If it matches certain criteria then only the S3 object will be returned. If you enter the wrong URL it will throw an error.

function handler(event) {
    var request = event.request;
    var querystring= request.querystring;
    var status="false";
    var key="KeyId";
    var password="mypic1A";
    
   for(var i in querystring)
   {
        //console.log(i); //  key
       // console.log(querystring[i].value);// key's value
        
    if (i==key&&querystring[i].value==password)
        {
          status="ok";
          i="";
        }
   }
        if(status=="ok"){
            console.log("passed");
            return request;
        }
            else
            {    
                 throw new Error("Error");
            }
}

Once the function is deployed in CloudFront, to get those objects you should rewrite the URL as