Andi Ashari

Tech Voyager & Digital Visionary

Securing Your CloudFront Distribution with Basic Authentication

Securing Your CloudFront Distribution with Basic Authentication

When deploying static websites on AWS CloudFront, a common requirement is to restrict access using simple authentication mechanisms. Basic Authentication offers a straightforward approach to protect your content by requiring users to provide a username and password before they can access your website. This article explains how to implement Basic Authentication on CloudFront using a serverless function.

Understanding Basic Authentication

Basic Authentication is a simple authentication scheme built into the HTTP protocol. It sends a user name and password required for accessing a resource over HTTP headers, encoded with Base64. Although not the most secure method for user authentication (as credentials are sent in plain text, albeit Base64 encoded), it is sufficiently secure for scenarios where simplicity and ease of implementation are paramount.

Implementing Basic Authentication in CloudFront

AWS CloudFront doesn’t natively support Basic Authentication. However, you can achieve this functionality using AWS Lambda@Edge or CloudFront Functions, which allows you to run custom logic across different phases of the request-response cycle in CloudFront.

Choosing the Right Phase for Authentication

You can insert custom logic at various points in the request-response cycle on CloudFront, including:

  • Viewer Request: When CloudFront receives a request from a client.
  • Origin Request: Before CloudFront forwards the request to the origin.
  • Origin Response: When CloudFront receives the response from the origin.
  • Viewer Response: Before CloudFront sends the response back to the client.

For Basic Authentication, the ideal phase is the Viewer Request. This phase allows you to intercept the request early and authenticate the user before any further processing occurs.

Implementing the Function

To implement Basic Authentication, create a function (Lambda@Edge or CloudFront Function) that checks the Authorization header in the incoming request. The function should compare the encoded credentials from the request with the encoded credentials you’ve set as valid. Here’s a simplified version of such a function:

function handler(event) {
    // Extract the authorization header from the incoming request
    const { authorization } = event.request.headers;

    // Your preferred encoded credentials (username:password in Base64)
    const validCredentials = "Basic YWRtaW46bXkhMjM0UGFzc3dvcmRA";

    // Check if the provided credentials match the valid credentials
    if (authorization && authorization.value === validCredentials) {
        // If credentials match, proceed with the request
        return event.request;
    } else {
        // If not, return a 401 Unauthorized response
        return {
            statusCode: 401,
            statusDescription: "Unauthorized",
            headers: { "www-authenticate": { value: 'Basic realm="Restricted Area"' } },

This function compares the Authorization header from the incoming request with the validCredentials. If they match, the request proceeds to the origin. If they don’t, it returns a 401 Unauthorized status, prompting the user to enter their credentials.

Deploying Your Function

After testing your function, deploy it to the Viewer Request phase of your CloudFront distribution. This setup ensures that every incoming request is authenticated before being processed.

Using AWS Lambda@Edge or CloudFront Functions for Basic Authentication allows you to secure your static content on CloudFront with minimal effort. While this method provides a basic level of security, consider using more secure authentication methods for sensitive or high-security content.

For those interested in automating the deployment of such configurations, check out my Terraform module for AWS static websites. It simplifies setting up your static site on AWS, including integrating Basic Authentication with CloudFront.

Securing your website need not be complex, and with AWS CloudFront and serverless functions, you have a powerful yet simple toolset at your disposal.

Happy securing, Andi Ashari