DEV Community 👩‍💻👨‍💻

Restric Access to Cloudfront Distribution using Lambda@Edge

Hi folks!
Recently I came across a usecase where I had to restrict access to a website in the UAT environment, so that the iterations and changes to the UAT env are not available for public view. The website was served with the CloudFront CDN, so one of the ways we could restrict access was enforcing authentication on the Cloudfront Distribution using Lambda@Edge.

How did I achive this?

Create a Lambda Function

  • Go to us-east-1 region as that is the only region we can deploy Lambda@Edge functions.
  • Go to the AWS Console and choose Lambda from services.
  • Create function and author from scratch.
  • Provide function name, and select Node JS 14.x as runtime.
  • In Change Default Execution Role, create a new role with basic Lambda permissions. Image description

Boom! Your function is created.

  • Use the below code and replace the user and password with your required username and password. code

Source: https://gist.github.com/njofce/3382b0fe51c59ae9038046cd5087e42a

  • Deploy the code.
  • Go to general configuration in Configuration and change the function timeout to 5sec, that's the max allowed timeout for CDN triggered Lambda Function. Image description
  • Go to Permissions, and open the IAM role, and update the Trust Relationships with the below json snippet, which allows lambda and lambda@edge to assume the role.

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

Image description

Image description

  • Go to Actions, and under capabilities, select Deploy to Lambda@Edge.
  • Configure a new Cloudfront Trigger, select your distribution under Cloudfront event and select a Viewer request, then check include body, and confirm deploy to Lambda@Edge. Image description Image description

It shall take few minutes to enforce the authentication, once done we can see a sign in option as we try to access our UAT env website, provide the username and password you used in the code and access your website. (to not disclose our client, I have used a dummy CloudFront URL with my content)
Image description
Image description

If you face any challenges please connect and discuss with me on Linkedin

Also I'm currently part of the Save Soil Movement initiated by the Isha Foundation, I know you are aware of the conditions of the soil and as a generation we have to turn this around, Become an Earth Buddy
Stay Joyful! :)

Oldest comments (3)

Collapse
 
mmuller88 profile image
Martin Muller

Cool articel. check this out :) martinmueller.dev/cdk-private-asse...

Collapse
 
rajitpaul_savesoil profile image
Rajit Paul_#SaveSoil Author

Thanks for sharing, Martin. Will check it out! :)

Collapse
 
khbhh profile image
Karni Bedirian • Edited on

Really helpful tutorial, thank you, and I get it working! Just a question/advice. When I have one tab open of my app running through CloudFront, it asks for username and password, following this tutorial. But when I open a second tab and run the app, it does not ask for username password. My point is that the username and password is being cached somehow. Is there a way for this not to happen? So that everytime I open my app, asks me for username and password?

Is there a way to erase caching history for that?

I appreciate your guidance, thank you again!

Join the One Year Club

You can earn this badge by being a registered member of the DEV Community for at least one year. Create an account and get started today.