How to Build a Secure Website with CloudFront Password Protect

Amazon Web Service (AWS) is still the most popular cloud computing service, allowing companies and private individuals to host their applications and websites cost-effectively on Amazon’s servers.

One of the most important components of AWS is Amazon CloudFront. This is a content delivery network (CDN) designed to maximize the loading speed of every visitor to your website hosted on AWS.

But did you know that you can use CloudFront to lock your website behind a password prompt? In this guide, you’ll learn how to secure your website with AWS CloudFront’s password protection feature.

What is CloudFront Password Protect?

Amazon CloudFront makes user access to your application and website faster by delivering content across multiple data centers worldwide. When a user accesses your website, the content is delivered from the data center closest to their geographic location, which improves the loading speed of your website.

If you use Amazon CloudFront for content distribution, you can use the system’s password protection feature. The system also works if your website is hosted in an S3 bucket or an EC2 instance.

Here, you can see the schematic of a standard CloudFront system. It describes how a request from web visitors (right) flows through CloudFront and other subsystems to get to the origin (where the content is stored). At the origin, the data is retrieved and flows back to the visitors.

It may look confusing, especially if you’re new to CloudFront. But understanding this diagram and its components is crucial to understanding how it really works.

How to secure a CloudFront website with a password

You can use different methods to set up a password prompt on your CloudFront-provided website. We will show you 2 ways in this guide.

Using Lambda@Edge

Lambda@Edge is a feature of CloudFront that allows you to run custom codes closer to the customer. This way, loading performance is improved. If you choose to deploy Lambda@Edge, a visitor who wants to retrieve content from your website must first go through this feature.

If you modify Lambda@Edge so that it only works when the user provides a correct password, you more or less have a password protection layer for your website.

That’s the basic idea behind this CloudFront security method.

Step 1: Deploying the Lambda@Edge feature

Lambda@Edge is a Lambda feature that is only deployed in the us-east-1 (North Virginia) region. To deploy it, you must log in to the correct region:

Sign in to your AWS account and then click Create feature.
You will be prompted to enter a name for the feature. Choose something simple like BasicAuth. Select Node.js 22.x as the runtime.
Complete the creation by clicking on the Create function button.
In the function code window, you will now see a file called index.js. Click on it and you will see a default lambda code. Replace it with this custom code:

'use strict';
exports.handler = (event, context, callback) => {
    // Authentication credentials 
    var i = 0, 
        authStrings = [], 
        authCredentials = [ 
            'user1:userpassword', 
        ];

    // Construct basic auth strings 
    authCredentials.forEach(element => { 
        authStrings[i] = "Basic " + new Buffer(element).toString('base64'); 
        i++; 
    });

    // Retrieve request and request headers 
    const request = event.Records[0].cf.request; 
    const headers = request.headers;

    // Basic authentication required 
    if (typeof headers.authorization == 'undefined' || !authStrings.includes(headers.authorization[0].value)) {
        const response = { 
            status: '401', 
            statusDescription: 'Not authorized', 
            body: 'Not authorized', 
            headers: { 
                'www-authenticate': [
                    {key: 'WWW-Authenticate', value: 'Basic realm="Authentication"'}
                ] 
            }, 
        };
        callback(null, response); 
    }

    // Continue processing the request if authentication passed 
    callback(null, request); 
};

The default credentials are stored in the line in this function:

'user1:userpassword',

The format is “account”. You can change it as you wish. You can also add more credentials by duplicating this line.

Once the custom code has been replaced, click Deploy to publish the code.
Navigate to the Actions menu at the top, click Publish New Version and then select Publish. Do not change any settings there.
Find the ARN string at the top right of the screen and copy it. This step is very important. The ARN string looks like this:

arn:aws:lambda:us-east-1:XXXXXXXXXXXX:function:basicAuth:1

Step 2: Setting up the trust relationship

Go to the IAM console and log in.
Enter the name of your Lambda@Edge function (BasicAuth in the previous step).
Locate the Trust Relationships tab and click Edit. Replace the code in it with the following:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": [
                    "lambda.amazonaws.com",
                    "edgelambda.amazonaws.com"
                ]
            },
            "Action": "sts:AssumeRole"
        }
    ]
}

Complete the process by clicking on Update trust policy.

Step 3: Configure the cache behavior

Go to CloudFront and log in. Click on the website managed by CloudFront that you want to lock with a password.
Select Behaviors, find the URL Path Pattern checkbox and select it. Continue by clicking Edit.
Find the Lambda Function Associations section. In a scroll-down menu, search for Select Event Type and then Viewer Request. Paste the ARN string that you copied in step 1.
Click Yes, Edit. CloudFront will then take about 5 minutes to restart and load the new settings.

Step 4: Check the website again

Visit your website after CloudFront has restarted. If you are greeted with a login prompt, you’ve made it.

It should look something like this:

Using AWS S3 and Lambda to add basic Authentication

In this method, we use a combined approach of AWS S3 and Lambda to accomplish the same thing as above: create a basic authentication form for the website.

Step 1: Create an S3 bucket

AWS S3 (Simple Storage Service) is the cloud storage solution from AWS. It allows you to store any type of data on Amazon’s servers. In S3, a “bucket” contains objects (the data of your content) and controls access to them.

You can create a bucket via the AWS Management Console. Click on the S3 tab and then on Create Bucket.

Enter the name and hosting region (choose the region closest to you for easier testing). Click Create and that’s it!

Step 2: Create a test file

Create a test file, e.g. a simple index.html file with the start code in it.

Hello world

You can upload this file to the newly created bucket via the “Objects” menu.

Step 3: Creating a CloudFront distro

Navigate to the CloudFront dashboard and click on Create distribution.

Select the Origin domain as the S3 bucket you just created. Update the bucket’s policy and Origin Access Identity (OAI) setting to your preference.

Enter the name of the file you wish to protect (index.html) in the optional Default Root Object field.

Create the CloudFront distribution and voilà! You now have a CloudFront endpoint.

Step 4: Create a custom lambda function

Now navigate to the Lambda tab in your AWS Management Console and click Create function.

Select the Use a blueprint option and search for CloudFront, then select the CloudFront-response-generation template. Click Configure once you have selected it.

On the next screen, enter the name of the function (AuthenticationTest) and the role name (S3-Auth). Select Execution Role as Create the new role from AWS Policy templates.

Then add the details of the CloudFront endpoint you have just created to the Distribution field. Leave the value * under Cache behavior. And finally, select Viewer request under CloudFront event.

Click Deploy to create the new function.

Step 5: Change the Lambda function

Replace the default lambda code with this custom code.

'use strict'; 
exports.handler = (event, context, callback) => {
    // retrieve request and request header 
    const request = event.Records[0].cf.request; 
    const headers = request.headers;
    
    // Configure authentication 
    const authUser = 'Username'; 
    const authPass = 'password';
    
    // Construct the basic auth string 
    const authString = 'Basic ' + new Buffer(authUser + ':' + authPass).toString('base64');
    
    // Requires Basic authentication 
    if (typeof headers.authorization == 'undefined' || headers.authorization[0].value != authString) { 
        const body = 'Not authorized'; 
        const response = { 
            status: '401', 
            statusDescription: 'Not authorized', 
            body: body, 
            headers: { 
                'www-authenticate': [{key: 'WWW-Authenticate', value:'Basic'}] 
            }, 
        }; 
        callback(null, response); 
    }
    
    // Continue processing the request if authentication passed 
    callback(null, request); 
};

You can change the user name and password as you wish. To do this:

Click Deploy at the top to save the code. Then go to Actions and Deploy to Lambda@Edge to push the code.
Paste the CloudFront endpoint address into the Distribution field, leave the cache behavior set to * and select the CloudFront event as the viewer request. A new CloudFront trigger is then created.
Then deploy it and wait for 5 minutes.
Visit your website again. You should now receive a login prompt that comes from the CloudFront authentication system.

Conclusion

There are a variety of reasons why a web administrator may want to lock down their website, like when the website needs maintenance, needs to increase security, or to protect it from unauthorized access.

With these AWS CloudFront password protection methods, you can easily secure your website content from unauthorized access while maintaining performance, providing you with both peace of mind and a professional user experience for your authorized visitors.