🚀 Fixing CloudFront "Forbidden" Errors with CloudFront Functions: Auto-Redirect Any Folder Path to index.html

📌 Introduction

Have you hosted a static website on AWS CloudFront with an S3 private bucket and faced this issue?

✅ https://yourdomain.com/random-page/index.html → Works
❌ https://yourdomain.com/random-page → Forbidden (403 Error)
❌ https://yourdomain.com/random-page/ → Forbidden (403 Error)

This happens because CloudFront does not automatically append index.html when accessing directories. But don't worry! In this guide, we’ll troubleshoot the issue and fix it using CloudFront Functions—without changing your file names.

---

🛠️ Understanding the Issue

🔍 Why does this happen?

AWS S3 is an object storage service, not a traditional web server. Unlike Apache or Nginx, S3 does not recognize directories—it only sees files.

• When you request https://yourdomain.com/random-page, CloudFront searches for an object named exactly random-page, which does not exist.

• But when you request https://yourdomain.com/random-page/index.html, the file exists in S3, so CloudFront serves it correctly.

• Unlike traditional web servers, CloudFront does not automatically append index.html to folder paths.

🔹 Goal: We need to make https://yourdomain.com/ANYTHING and https://yourdomain.com/ANYTHING/ automatically redirect to index.html.

---

🛠️ Solution: Fix Routing with a CloudFront Function

The best way to fix this issue is by using CloudFront Functions. These are lightweight, JavaScript-based functions that run at CloudFront Edge Locations.

🚀 Why Use CloudFront Functions?

✅ Fast Execution – Runs at CloudFront Edge, reducing latency
✅ Cost-Effective – Cheaper than AWS Lambda@Edge
✅ Scalable – Handles millions of requests per second
✅ No Changes in S3 Required – Fix the issue at CloudFront level

🔹 Use Cases for CloudFront Functions:

• Rewrite URLs dynamically (e.g., auto-append index.html)

• Redirect HTTP to HTTPS

• Add security headers

• Block unwanted traffic

Now, let’s implement the solution! 🚀

---

🔹 Step 1: Create a CloudFront Function

1️⃣ Go to AWS CloudFront Console

• Open the AWS CloudFront Dashboard

• Click on Functions → Create function

• Name it "RewriteToIndexHtml"

• Click "Create function"

2️⃣ Add the following JavaScript code

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // If the URL does not contain a file extension, append "index.html"
    if (!uri.includes('.') && !uri.endsWith('/')) {
        request.uri += '/index.html';
    } 
    else if (uri.endsWith('/')) {
        request.uri += 'index.html';
    }

    return request;
}

🔍 Explanation of CloudFront Function Code

This CloudFront Function modifies incoming requests to ensure folder paths correctly serve index.html.

1️⃣ Checks if the URL (uri) has a file extension (.) or ends with /

• If no file extension and no trailing /, appends "/index.html"

• If trailing / exists, appends "index.html"

2️⃣ Returns the modified request so CloudFront fetches the correct file from S3.

✅ Ensures URLs like yourdomain.com/about correctly load yourdomain.com/about/index.html. 🚀

3️⃣ Save and Publish the Function

• Click Save

• Click Publish

---

🔹 Step 2: Attach the Function to Your CloudFront Distribution

1️⃣ Go to Your CloudFront Distribution

• Click on Distributions → Select your CloudFront distribution

• Go to the Behaviors tab

• Click Edit on the behavior for your S3 origin

2️⃣ Attach the Function

• Scroll down to "Function Associations"

• Under "Viewer Request", select the function you just created (RewriteToIndexHtml)

• Click Save Changes

---

🔹 Step 3: Invalidate CloudFront Cache

Since CloudFront caches content, you need to invalidate the cache to apply the new routing logic.

🔹 Run this command in AWS CLI:

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

Now CloudFront will fetch fresh content and apply the function.

---

🎯 Final Testing: Does It Work?

🚀 Now your website behaves like a normal static site! 🎉

---

📌 Use Case: When Should You Use This?

🔹 Hosting a static website with S3 + CloudFront where you need directory-style URLs (/page instead of /page/index.html).
🔹 Avoiding unnecessary redirects or renaming files in S3.
🔹 Improving SEO and user experience by allowing clean URLs without .html.
🔹 Reducing costs by using CloudFront Functions instead of Lambda@Edge.

---

💡 Key Takeaways

✅ CloudFront does not automatically serve index.html when accessing folder paths.
✅ S3 is object-based storage—it does not recognize directories, only files.
✅ A CloudFront Function can rewrite URLs dynamically to fix this issue.
✅ No need to rename files or change S3 storage structure.
✅ CloudFront Functions are fast, scalable, and cost-effective compared to Lambda@Edge.

---

🚀 Final Thoughts

This simple fix allows CloudFront to behave like a traditional web server, automatically loading index.html for subpages without renaming files in S3!

If you found this helpful, share this blog and let me know your thoughts in the comments! 💬🚀

---

✨ Need More AWS & DevOps Tips?

Follow me for more AWS, DevOps, and Cloud solutions! 🌍🚀