Protecting your static website hosted on AWS S3 and served through CloudFront is crucial for maintaining security and controlling access. One efficient method to achieve this is by implementing password protection using Lambda@Edge. This guide will walk you through the process step-by-step.

Step-by-Step Guide to Password Protecting Your Static Site

Prerequisites

Before we begin, ensure you have the following:

  1. An AWS account.
  2. A static site hosted on S3.
  3. A CloudFront distribution set up to serve your static site.

Step 1: Create the Lambda@Edge Function

  1. Navigate to the Lambda Console: Go to the AWS Management Console, and open the AWS Lambda console.
  2. Create a New Lambda Function:
    • Click on “Create function”.
    • Select “Author from scratch”.
    • Give your function a name, such as PasswordProtectFunction.
    • Choose Node.js as the runtime.
    • Under “Permissions”, create a new role with basic Lambda permissions.

Add the Code: Paste the following code into the Lambda function editor:

exports.handler = async (event) => {

    const request = event.Records[0].cf.request;

    const headers = request.headers;

    const authUser = ‘your-username’; // Replace with your desired username

    const authPass = ‘your-password’; // Replace with your desired password

    const authString = ‘Basic ‘ + new Buffer.from(authUser + ‘:’ + authPass).toString(‘base64’);

    if (typeof headers.authorization == ‘undefined’ || headers.authorization[0].value !== authString) {

        return {

            status: ‘401’,

            statusDescription: ‘Unauthorized’,

            headers: {

                ‘www-authenticate’: [{

                    key: ‘WWW-Authenticate’,

                    value: ‘Basic’

                }]

            }

        };

    }

    return request;

};

  1. Replace your-username and your-password with your desired credentials.
  2. Deploy the Function to Lambda@Edge:
    • Click on “Deploy”.
    • After deployment, navigate to the “Actions” dropdown and select “Deploy to Lambda@Edge”.
    • Select the CloudFront distribution you want to associate with this Lambda function and deploy it.

Step 2: Attach the Lambda@Edge Function to Your CloudFront Distribution

  1. Navigate to the CloudFront Console: Go to the AWS Management Console and open the CloudFront console.
  2. Select Your Distribution: Click on the CloudFront distribution serving your static site.
  3. Configure Behaviors:
    • Select the “Behaviors” tab and click on “Edit” for the default behavior.
    • In the “Lambda Function Associations” section, choose “Viewer Request”.
    • Select the Lambda function you just created and deployed, then click on “Save Changes”.

Step 3: Test Your Setup

Navigate to your CloudFront distribution URL in a web browser. You should be prompted to enter a username and password. Enter the credentials you set in the Lambda function to access the site.

Additional Tips

  • Security Best Practices: Ensure that your Lambda function is only accessible to the necessary CloudFront distribution.
  • Monitor Usage: Monitor Lambda@Edge usage to ensure it doesn’t significantly impact your CloudFront performance.
  • Custom Error Pages: Consider adding custom error pages for a better user experience when access is denied.

Conclusion

Password-protecting your static site hosted on AWS using S3, CloudFront, and Lambda@Edge is a robust way to control access and enhance security. Following this guide ensures that your site remains secure and accessible only to authorized users.

For more tutorials on AWS security and web hosting, stay tuned to our blog.