Web Analytics Made
Easy - StatCounter

Menu

About us Contact us

Configure Basic Authentication for CloudFront Using Lambda@Edge

Tech 2019 / 09 / 05

Configure Basic Authentication for CloudFront Using Lambda@Edge



For web servers, you must know the basic authentication settings for LAMP configuration. What if you are using AWS Cloudfront for hosting your frontend part? How will you add basic authentication for CloudFront? The answer is AWS Lambda function.

This article will lead you to step by step procedures for configuring basic authentication with Lambda@Edge. S3 bucket representing contents through CloudFront may be blocked due to basic authentication requirement. Sometimes, browsers (chrome, safari) may not load png or jpg files. In this article, certain issues are kept under consideration and tried to provide a solution for that.

 

Step 1: Select AWS Region

At first, you need to select the AWS Region. My suggestion is to use region N.Virginia. Why? Even if you can’t configure it yourself, you can get help from the Lambda blueprint. Blueprint has a template to create basic authentication using a Lambda function. You can type the CloudFront and the list narrowed down like below picture. Then you can use CloudFront response generation. We shall discuss this in another article.

Create-lambda-function
lambda function with Cloudfront keyword

 

Step 2: Create Function on Lamda

Open AWS Lambda service in N. Virginia Region and click on Create Function. Then you need to Select Author from scratch. Provide your Desired Function Name and keep runtime as Node.js 10.x. Lastly type Create.

create-lambda-function-from-scratch
Create a Lambda Function from Scratch

 

Step 3: Code in index.js

Once you are done creating the Lambda function you will get a window like this one:

Lambda Function Window

Lambda Function Window

 

In the index.js file remove the existing code and type the following as below:

'use strict';

exports.handler = (event, context, callback) => {

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

  // Configure authentication- You can use it for your developers
  const authUser = 'Your_userName_1';
  const authPass = 'Your_password_1';

  // Construct the Basic Auth string
  const authString = 'Basic ' + new Buffer(authUser + ':' + authPass).toString('base64');

  // Configure authentication for the client
  const authUserForClient = 'Your_userName_2';
  const authPassForClient = 'Your_password_2';
  const authStringForClient = 'Basic ' + new Buffer(authUserForClient + ':' + authPassForClient).toString('base64');

  // Check wheter the requested resource is allowed or not
  let isAllowedResource = false;
  //Following part will unblock the .png,.svg and .jpg extensions on your cloudfront contained by S3 bucket
  if (request.uri === '/manifest.json') {
    isAllowedResource = true;
  } else if (/^\/.+(\.png|\.svg|\.jpg)$/.test(request.uri)) {
    isAllowedResource = true;
  }

  // Require Basic authentication
  if (!isAllowedResource && (typeof headers.authorization == 'undefined' || (headers.authorization[0].value != authString && headers.authorization[0].value != authStringForClient))) {
    const body = 'Unauthorized';
    const response = {
      status: '401',
      statusDescription: 'Unauthorized',
      body: body,
      headers: {
        'www-authenticate': [{
          key: 'WWW-Authenticate',
          value: 'Basic'
        }]
      },
    };
    callback(null, response);
  }

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

Then click on ‘Save’ on the top right corner. Click on ‘Actions’. And from the drop-down list select “Publish New Version” and provide a name for the version.

 

Step 4: Configure Trigger Option

Select “Add trigger”.

CloudFront Trigger
Window Details of Trigger

 

Do the following in the trigger configuration.

  1. Cloudfront from the drop-down list.
  2. From Distribution Dropdown list Select the CloudFront you wish to use for basic authentication.
  3. Keep Cache Behavior with ‘*’.
  4. Select ‘Viewer Request’ From ‘CloudFront event’.
  5. Tick the Acknowledgement Windows.

 

Step 5: Configure ‘Trust Relation’ in IAM Role

Then open another Tab of AWS and Open IAM. Click on Roles and select the role you have created. Then click on the ‘Trust Relation’ Tab and edit with the following:

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

After this, click on update trust policy.

Final Step: Activate AWS Lamda@Edge for Basic Authentication

For the last step, go back to Lambda Page and create ‘Add’. You are done and good to go.

Browse your URL of CloudFront or the domain associated with it. You will find it with basic authentication available. You need to test with all our browsers.

If you have anything more to discuss, feel free to ping me at istiaque.islam@monstar-lab.com.bd.

You have ideas, We have solutions.

CONTACT US!