Demo: CORS between Two S3 Buckets (iframe method)

🔑 Overview

This demo shows how to host a static website in one S3 bucket (Bucket A) and embed a custom error page from another S3 bucket (Bucket B) using an iframe and CORS.

---

⚙️ Setup Steps

1. Create Buckets

• Bucket A → index.html

• Bucket B → error.html

Enable Static Website Hosting for both.

---

2. Configure CORS on Bucket B

In Bucket B → Permissions → CORS configuration, add:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["http://<bucket-a-name>.s3-website.<region>.amazonaws.com"],
    "ExposeHeaders": []
  }
]

---

3. Update index.html in Bucket A

Embed Bucket B’s error page using an iframe:

<div class="iframe-container">
  <iframe src="http://<bucket-b-name>.s3-website.<region>.amazonaws.com/error.html"
          width="500" height="300"
          style="border:1px solid #ccc;">
  </iframe>
</div>

---

4. Test the Demo

1. Open Bucket A’s website endpoint in the browser.

2. Click the button (if toggled with JS) or view directly.

3. The error.html page from Bucket B renders inside the iframe.

4. Inspect Network tab → confirm Access-Control-Allow-Origin header is present.

---

📊 Key Learnings

• iframe is the simplest way to embed cross-origin HTML.

• Requires CORS config on the source bucket (Bucket B).

• Works only on S3 static website endpoints, not the S3 REST API URLs.

---

🚀 Next Steps

• Enhance with CloudFront to unify buckets under one domain.

• Use custom error routing rules for production workloads.

📌 Outcome: Successfully rendered a file from another bucket using CORS + iframe.