How to Create Static Website on S3, Using Lambda & Cloudfront?

Some websites require basic standard authentication to protect private data. If the website runs on the server, adding authentication is not much challenging. But when it comes to serverless like S3, creating an authentication layer is a bit complicated.

This blog will show how to protect a static website on s3 using Lambda and Cloudfront.

Create a static file site on S3

1. Create a sample HTML file named index.html
2. Create an S3 bucket with a unique name.

3. After giving the bucket name, click on next, till you reach Set permissions
4. On Set, the Permissions tab unchecks Block all public access.
5. Click on Next and then click on Create a Bucket.

Enabling S3 for a website.

1. Click on the bucket you have just created.
2. Upload the index.html page and make it public.
3. Go to the properties tab and click on Static Website Hosting.
4. Click on Use this bucket to host a website and in the index document field, enter HTML

5. Save it and copy the Website endpoint.
6. Now you can copy and paste the endpoint in a browser and see the website page.

Configuring Cloudfront for S3 website

1. Go to Cloudfront and Click on Create Distribution.
2. Under the Web Section, click on Get Started.
3. On Create Distribution windows, in Origin Domain name, search for your bucket and select.
4. Select “Yes” for Restrict Bucket Access, and under Origin Access Identity, click on Create new Identity.
5. For Grant Read Permissions on Bucket, click Yes, Update Bucket Policy.
6. Scroll down to Default Root Object and type HTML.

7. Click on Create a Distribution, and it will take around 15 min to get deployed.

Creating a Lambda function for Authentication.

Now we have to configure the actual logic that will handle the Authentication.

1. Go to Lambda and Create a function.

2. Scroll down to function code, paste the following code into the window, and click save.

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

// Get the request and its headers

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

const headers = request.headers;

 

// Specify the username and password to be used

const user = \'user\';

const pw = \'password\';

 

// Build a Basic Authentication string

const authString = \'Basic \' + new Buffer(user + \':\' + pw).toString(\'base64\');

 

// Challenge for auth if auth credentials are absent or incorrect

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

const response = {

status: \'401\',

statusDescription: \'Unauthorized\',

body: \'Unauthorized\',

headers: {

\'www-authenticate\': [{key: \'WWW-Authenticate\', value:\'Basic\'}]

},

};

callback(null, response);

}

 

// User has authenticated

callback(null, request);

};

3. Scroll up to the top and click on Add triggers. Select Cloudfront from the drop-down list and click on Deploy to Lambda@Edge

4. Select your Cloudfront distribution ID, and under Cloudfront event, select Viewer request.

5. Confirm deployment to Lambda@Edge by checking the box and clicking deploy.

Now we are all ready to test the S3 website authentication.

Copy the domain of the Cloudfront and paste it into the browser. It will ask you for authentication. Based on the above code, the credentials are “user” and “password.”

Using the above solution, you can leverage lambda to authenticate the static website hosted on S3. It could be beneficial if you want to restrict website accessibility.