In today’s tutorial, we’ll walk through the process of whitelisting IP addresses for an S3 website hosted via CloudFront using AWS WAF (Web Application Firewall). This step-by-step guide will help you restrict access to your website to specific IP addresses, enhancing its security and control.

Before we begin, make sure you have the following:

• An AWS account
• Basic knowledge of AWS services like S3, CloudFront, and WAF
• A React.js website built and ready for deployment

1. Create S3 Bucket:
   • Log in to your AWS Management Console.
   • Navigate to the S3 service.
   • Click on “Create bucket”.
   • Follow the instructions to configure your bucket. Enable website hosting and note down the bucket name.

 

2. Build and Upload React.js App:
   • In your React.js project directory, run ‘npm run build’ to create a production build.
   • Navigate to the build directory (/build) in your project.
   • Upload all the files and folders within the build directory to your S3 bucket. You can do this through the AWS Management Console or by using AWS CLI.

 

3. Create CloudFront Distribution:
   • Go to the CloudFront service in the AWS Management Console.
   • Click on “Create Distribution”.
   • Follow the steps to create a CloudFront distribution and connect it with your S3 bucket.
     Refer to the official AWS documentation for detailed instructions.

 

4. Configure IP Set in AWS WAF:
   • Navigate to the AWS WAF service in the AWS Management Console.
   • In the left menu, click on “IP sets”.
   • Select the appropriate region (Global) for CloudFront.
   • Click on “Create IP set”.
   • Fill in the required fields: IP set name, Region, and IP addresses. 
   • Enter one IP address per line in CIDR format for all IPs you want to whitelist, such as your local IP followed by /32.

 

5. Create Web ACL:
   • In the AWS WAF console, click on “Web ACLs” in the left menu.
   • Click on “Create web ACL”.
   • Set the Resource type to “Amazon CloudFront distributions”.
   • Name your Web ACL.
   • Leave Associated AWS resources optional for now.
   • Keep Web request body inspection as “default” and click Next.

 

6. Add Rules to Web ACL:
   • Click on “Add Rules” under the Rules section.
   • Select “Add my own rules and rule groups”.
   • Choose “Rule Builder”.
   • Set the Rule Name and select Regular rule as the type.
   • Under “If a request”, select “matches the statement”.
   • Under the statement, select Inspect as “Originates from an IP address in”.
   • Choose the IP Set you created in step 4.
   • Under the Action section, select BLOCK as the action to take when a request matches the statements above.

 

7. Associate Web ACL with CloudFront Distribution:
   • Go back to the CloudFront console.
   • Select the CloudFront distribution you created in step 3.
   • Under the “Security” tab, select “Enable security protections”.
   • Choose “Use existing WAF configuration”.
   • Select the Web ACL that you created in step 5.

 

8. Testing:
   • Try accessing the website from different IPs. You should only be able to access it from the IPs you whitelisted in the IP set.
   • By following these steps, you have successfully restricted IP access to your S3 website hosted via CloudFront using AWS WAF.

 

In conclusion, implementing IP whitelisting for your S3 website hosted via CloudFront using AWS WAF adds an extra layer of security and control. By following this tutorial, you can ensure that only authorised IPs can access your website, protecting it from potential threats and unauthorised access.