HOW TO SECURE STATIC WEBSITE HOSTING WITH AWS S3 AND CLOUDFRONT.

PROJECT OVERVIEW

Consider this scenario: an organization needs a new website to exhibit its items to buyers globally. However, the website hosting option is outdated and vulnerable to security attacks, endangering client data and the company’s reputation. Additionally, the website’s performance suffers from slow loading times, leading to poor customer satisfaction.

You have been assigned the task of deploying the secured static website and emphasizes was placed on security and performance excellence of the website.

INTRODUCTION

This guide will walk you through deploying a static website using AWS S3 and AWS CloudFront. Leveraging AWS CloudFront enhances website delivery globally by utilizing edge node caching and ensuring a secure HTTPS connection with users.

PREREQUISITES

• An AWS account.
• Web File (Html)

Before we begin the detailed steps, let’s take a moment to introduce the AWS services in focus.

1. AWS S3: Amazon Simple Storage Service (Amazon S3) provides object storage renowned for its scalability, data availability, security, and performance. Organizations across various sectors and sizes leverage Amazon S3 to securely store and safeguard any volume of data for diverse purposes. These include data lakes, websites, mobile apps, backup and recovery, archiving, enterprise applications, IoT devices, and big data analytics.
2. AWS Cloudfront: AWS CloudFront functions as a content delivery network (CDN) service designed to accelerate the distribution of both static (mainly S3) and dynamic web content (EC2 for static/dynamic) to users. It strategically caches content at edge locations, ensuring swift retrieval whenever users make requests. By directing users to the nearest edge location, CloudFront optimizes performance, delivering web content with minimal latency and high transfer speeds for an enhanced user experience.

AWS Web Application Firewall (WAF) can be integrated with AWS CloudFront, which helps protect the web application from vulnerabilities and common exploits. Also, Origin access control (OAU) can be enabled on AWS CloudFront to quickly secure their origin by permitting only designated CloudFront distributions to access the assigned origin (S3 bucket).

STEP 1 — Create S3 bucket and upload web files: Login into your AWS Management console and navigate to the s3 console. Once in the S3 console, click on “Create bucket”.

a. Bucket name must be unique within the global namespace and follow the bucket naming rules.

b. Block all public Access to your Bucket, as this is crucial for effective and secure connectivity only from AWS CloudFront to your static website. All other settings can be left as default (Can be modified to align with your business requirements).

Once the S3 bucket has been created the next step is to upload the HTML File.

STEP 2— Enabling Static Website Hosting on S3 Bucket: Enable static website hosting on the S3 properties configuration.

Once the static website hosting is enabled, copy the bucket website endpoint on your browser and try to reach the website. You will notice Access Denied because the S3 bucket is not public facing, and all access was blocked.

STEP 3 — Configuring AWS CloudFront: Go to the CloudFront console in AWS management console and click on “Create a CloudFront distribution.”

The first step is to choose the origin domain. The origin domain will be the bucket website endpoint and you ensure you remove the “ http:// ”. Under default cache behavior, change Viewer to “Redirect HTTP to HTTPS”. This is being done to ensure the CloudFront URL can only be accessed using HTTPS, which is secured.

The next step is to enable OAC- origin access control. Once enabled, an access control is needed. Click the Create control setting button, verify the origin name and click create.

“Make sure to fill in this field called “origin path-optional” with your file name (e.g., Index.html). Skipping this step may lead to an “access denied” error when accessing the domain.”

When the CloudFront distribution is created, an S3 bucket policy is created. copy policy.

INSIGHT — See the S3 bucket as a locker, the bucket policy as a lock that prevent unauthorized Access to the locker. The OAC functions as the key. Just like a key is designed to open a particular Lock. The OAC (key) enables access only if the bucket policy permits it (lock).

This process involves CloudFront initializing and disseminating the configurations to its edge locations.

This ensures that the contents become globally available and cached across the network.

STEP 4 — Assigning AWS CloudFront s3 bucket permission.

You need to grant aws cloudfront permission to the s3 bucket.

Go to your S3 bucket and attach the S3 bucket policy to grant AWS CloudFront access to the s3 bucket.

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::s3-staticwebsite-cloudfront/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::$account-id:distribution/$cloudfront-id"
                    }
                }
            }
        ]
      }

Final Check

a. Copy the distribution domain name and paste it into your browser.

b. Once loaded, change the “https” in the address field to “http”. Upon refreshing the page, it should change back to “https”.

That wraps it up. Thank you for reading this far. Feel free to reach out with any questions or suggestions for improvement.