Logo

dev-resources.site

for different kinds of informations.

Configuring AWS WAF, CloudFront, and S3 Bucket for Secure Access

Published at
1/3/2025
Categories
aws
waf
cloudfront
s3
Author
randiakm
Main Article
https://dev.to/randiakm/configuring-aws-waf-cloudfront-and-s3-bucket-for-secure-access-24a3
Categories
4 categories in total
aws
open
waf
open
cloudfront
open
s3
open
Author
8 person written this
randiakm
open
Configuring AWS WAF, CloudFront, and S3 Bucket for Secure Access

How to Set Up AWS WAF, CloudFront and an S3 Bucket to serve content securely and Restrict content Access to certain originating sources only. This guide looks at some issues, for instance, 403 Forbidden, in order to troubleshoot the problem.

1. Objective

The purpose of this assignment is to deploy AWS WAF, CloudFront and S3 bucket:

  • Restrict Access to certain origins, for example, https://dev.test.com and https://int.test.com.
  • When the CloudFront distribution is accessed, the index.html page should be served by default.
  • To prevent unauthorized access and to correct common errors.

2. You will require.

And AWS S3 bucket called, sample-bucket, where the files for the static website are stored.

An AWS CloudFront distribution created with OAC linked to the S3 bucket.

3. Configuration Steps

Step 1: Make Sure S3 Bucket Policy has below

  1. Open the S3 Console.
  2. Select your bucket (e.g., sample-bucket).
  3. Check the following bucket policy to allow access from CloudFront: 
{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::sample-bucket/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::AWS_ACC_ID:distribution/CLOUDFRONT_ID"
                }
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure CORS for the S3 Bucket

  1. In the S3 Console, go to the Permissions tab.
  2. Edit the CORS configuration and set the following: 
[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "HEAD", "PUT", "POST", "DELETE"],
        "AllowedOrigins": [
            "https://dev.test.com",
            "https://int.test.com"
        ]
    }
]
Enter fullscreen mode Exit fullscreen mode
  • Replace AllowedOrigins with your allowed domains.
  • Restrict AllowedHeaders to necessary headers for production.

Step 3: Configure AWS WAF

Create WAF Rules:

  1. Open the AWS WAF Console and select your Web ACL.
  2. Add the following rules:

Rule 1: Allow-Traffic

  • Description: Allows requests from specific origins.
  • Rule Definition: 
{
    "Name": "Allow-Traffic",
    "Priority": 1,
    "Statement": {
        "OrStatement": {
            "Statements": [
                {
                    "ByteMatchStatement": {
                        "SearchString": "https://dev.test.com",
                        "FieldToMatch": {
                            "SingleHeader": {
                                "Name": "origin"
                            }
                        },
                        "TextTransformations": [
                            {
                                "Priority": 0,
                                "Type": "NONE"
                            }
                        ],
                        "PositionalConstraint": "EXACTLY"
                    }
                },
                {
                    "ByteMatchStatement": {
                        "SearchString": "https://int.test.com",
                        "FieldToMatch": {
                            "SingleHeader": {
                                "Name": "origin"
                            }
                        },
                        "TextTransformations": [
                            {
                                "Priority": 0,
                                "Type": "NONE"
                            }
                        ],
                        "PositionalConstraint": "EXACTLY"
                    }
                }
            ]
        }
    },
    "Action": {
        "Allow": {}
    },
    "VisibilityConfig": {
        "SampledRequestsEnabled": true,
        "CloudWatchMetricsEnabled": true,
        "MetricName": "Allow-Traffic"
    }
}
Enter fullscreen mode Exit fullscreen mode

Rule 2: Block-All-Other-Traffic

  • Description: Blocks all requests that don’t match the allowed origins.
  • Rule Definition: 
{
    "Name": "Block-All-Other-Traffic",
    "Priority": 2,
    "Statement": {
        "NotStatement": {
            "Statement": {
                "OrStatement": {
                    "Statements": [
                        {
                            "ByteMatchStatement": {
                                "SearchString": "https://dev.test.com",
                                "FieldToMatch": {
                                    "SingleHeader": {
                                        "Name": "origin"
                                    }
                                },
                                "TextTransformations": [
                                    {
                                        "Priority": 0,
                                        "Type": "NONE"
                                    }
                                ],
                                "PositionalConstraint": "EXACTLY"
                            }
                        },
                        {
                            "ByteMatchStatement": {
                                "SearchString": "https://int.test.com",
                                "FieldToMatch": {
                                    "SingleHeader": {
                                        "Name": "origin"
                                    }
                                },
                                "TextTransformations": [
                                    {
                                        "Priority": 0,
                                        "Type": "NONE"
                                    }
                                ],
                                "PositionalConstraint": "EXACTLY"
                            }
                        }
                    ]
                }
            }
        }
    },
    "Action": {
        "Block": {}
    },
    "VisibilityConfig": {
        "SampledRequestsEnabled": true,
        "CloudWatchMetricsEnabled": true,
        "MetricName": "Block-All-Other-Traffic"
    }
}
Enter fullscreen mode Exit fullscreen mode

4. Testing and Verification

Test Allowed Origins

Run the following command:

curl -X GET https://cloudfront_domain_name \
     -H "Origin: https://dev.test.com" \
     -v
Enter fullscreen mode Exit fullscreen mode

Expected Result: HTTP 200 OK.

Test Disallowed Origins

Run the following command:

curl -X GET https://cloudfront_domain_name \
     -H "Origin: https://unauthorized.com" \
     -v
Enter fullscreen mode Exit fullscreen mode

Expected Result: HTTP 403 Forbidden.

Check WAF Logs

  1. Enable logging for the Web ACL in the AWS WAF Console.
  2. Monitor logs in CloudWatch to verify rule matches.
cloudfront Article's
30 articles in total
Favicon
Lee esto antes de implementar S3 y CloudFront usando Terraform.
Favicon
Lee esto antes de implementar S3 y CloudFront usando Terraform.
Favicon
Building an S3 Static Website with CloudFront Using Terraform
Favicon
AWS CloudFront: A Comprehensive Guide
Favicon
Configuring AWS WAF, CloudFront, and S3 Bucket for Secure Access
Favicon
Setting Up Custom Domain for API Gateway & CloudFront
Favicon
Apply SSL Certificate on AWS ACM (also Cloudflare)
Favicon
How to Fix Next.js CloudFront Permission Denied: Complete Guide to Static Export URL Issues
Favicon
Building Testable CloudFront Functions with TypeScript
Favicon
CloudFront and S3: SignatureDoesNotMatch , the request signature we calculated does not match the signature you provided
Favicon
Mastering Custom Responses in Amazon CloudFront to Block Behavior — Default(*)
Favicon
Unlock CloudFront's New Logging Potential with Athena Partition Projection
Favicon
Discovering the Latest Features of AWS CloudFront: Enhancing Performance and Security
Favicon
Create an Asset Store with a Custom Domain using AWS CDK, Route53, S3 and CloudFront
Favicon
New Feature: Amazon CloudFront no longer charges (No Billing) for requests blocked by AWS WAF
Favicon
Reduce the amount of code in AWS CDK: Apply OAC in Amazon CloudFront L2 constructs
Favicon
Amazon Web Services (AWS) has announced today a new edge location in #Qatar
Favicon
Hosting a Static Website On S3 bucket With CloudFront.
Favicon
Setting up AWS S3 and CloudFront with Signed URLs using CDK
Favicon
Leveraging Lambda@Edge to seamlessly manage frontend maintenance window like a pro
Favicon
How to Resolve 403 Access Issues When Deploying a SPA on AWS with S3 and CloudFront
Favicon
Cloud Resume Challenge: Hosting a React CV using S3, CloudFront, Route 53, Lambda, DynamoDB and GitHub actions for CI/CD
Favicon
Deploying Static Website to AWS: A Step-by-Step Guide with S3, Route 53, and CloudFront
Favicon
Resolve Lambda URL Error - signature not match when using POST/PUT
Favicon
Setting Up and Securing CloudFront for S3 Static Sites with Custom Subdomains Using AWS Cloud Development Kit(CDK)
Favicon
How to Host a Static Website on AWS Using S3, Route 53, CloudFront, and Certificate Manager
Favicon
RTT Reduction Strategies for Enhanced Network Performance
Favicon
Dynamically Choosing Origin Based on Host Header and Path with AWS CloudFront and Lambda@Edge
Favicon
Understanding Speed: A Beginner's Guide to AWS CloudFront
Favicon
Deploy a Static React Site Using AWS S3 and CloudFront

Featured ones:

Favicon
Open
abubakersiddique761
Favicon
Open
0x3d_site
Favicon
Open
0x2e_tech
Favicon
Open
0x4c-quest
Favicon
Open
gittech