S3 CORS

Overview

CORS stands for Cross-Origin Resource Sharing. It's a web browser-based security mechanism that allows or denies requests to other origins while visiting a main origin. This is something you need to know at the exam — it typically comes up as one question, and understanding the concept deeply makes answering it trivial.

The core idea: when your web browser loads a page from Website A, and that page tries to fetch a resource (image, script, API call) from Website B, the browser blocks the request by default unless Website B explicitly says "I allow requests from Website A." That permission is granted through CORS headers.

What is an Origin?

An origin is defined by three components: the scheme (protocol), the host (domain), and the port.

For example, looking at https://www.example.com:

• Scheme: https
• Host: www.example.com
• Port: 443 (implied for HTTPS, 80 for HTTP)

How CORS Works — The Full Flow

When a web browser loads a page from one origin and that page needs to fetch resources from a different origin, the browser enforces a security check. Here's the complete flow:

Step 1: Browser Loads the Main Page

The browser requests index.html from your origin server (e.g., https://www.example.com). The server returns the HTML, which contains a reference to a resource on a different origin (e.g., an image on https://www.other.com).

Step 2: Browser Sends a Preflight Request

Before making the actual cross-origin request, the browser sends an OPTIONS request (called a preflight request) to the cross-origin server. This preflight says:

"Hey, I'm coming from https://www.example.com. Am I allowed to make requests to you?"

The preflight includes the Origin header with the requesting origin's URL.

Step 3: Cross-Origin Server Responds with CORS Headers

If the cross-origin server is configured to allow requests from that origin, it responds with CORS headers:

• Access-Control-Allow-Origin: https://www.example.com — "Yes, I allow this origin"
• Access-Control-Allow-Methods: GET, PUT, DELETE — "These HTTP methods are allowed"

Step 4: Browser Makes the Actual Request

If the browser is satisfied with the CORS headers (the origin matches, the method is allowed), it proceeds with the actual request and retrieves the resource.

┌──────────────────────────────────────────────────────────────────┐
│                    CORS FLOW — STEP BY STEP                       │
│                                                                   │
│  ┌──────────────┐                    ┌──────────────────────┐    │
│  │              │  1. GET index.html  │  Origin Server       │    │
│  │  Web Browser │ ─────────────────▶  │  www.example.com     │    │
│  │              │ ◀─────────────────  │                      │    │
│  │              │  Returns HTML that  └──────────────────────┘    │
│  │              │  says: "fetch image                             │
│  │              │  from www.other.com"                            │
│  │              │                                                 │
│  │              │  2. Preflight        ┌──────────────────────┐   │
│  │              │     OPTIONS request  │  Cross-Origin Server │   │
│  │              │ ─────────────────▶   │  www.other.com       │   │
│  │              │  Origin:             │                      │   │
│  │              │  www.example.com     │                      │   │
│  │              │                      │                      │   │
│  │              │ ◀─────────────────   │                      │   │
│  │              │  Access-Control-     │                      │   │
│  │              │  Allow-Origin:       │                      │   │
│  │              │  www.example.com     │                      │   │
│  │              │  Allow-Methods:      │                      │   │
│  │              │  GET, PUT, DELETE    │                      │   │
│  │              │                      │                      │   │
│  │              │  3. Actual GET       │                      │   │
│  │              │ ─────────────────▶   │                      │   │
│  │              │ ◀─────────────────   │                      │   │
│  │              │  (resource returned) └──────────────────────┘   │
│  └──────────────┘                                                 │
│                                                                   │
│  ⚠️ If CORS headers are missing or don't match → BLOCKED        │
│  ✅ If CORS headers match the origin → REQUEST ALLOWED           │
└──────────────────────────────────────────────────────────────────┘

CORS with Amazon S3

This is where it gets relevant for the exam. If you host a static website on S3 and that website needs to load assets (images, scripts, HTML pages) from another S3 bucket, you must enable CORS headers on the target bucket.

The Scenario

┌──────────────────────────────────────────────────────────────────┐
│                    S3 CORS SCENARIO                                │
│                                                                   │
│  ┌──────────────┐                    ┌──────────────────────┐    │
│  │              │  1. GET index.html  │  S3 Bucket           │    │
│  │  Web Browser │ ─────────────────▶  │  my-bucket-html      │    │
│  │              │ ◀─────────────────  │  (static website)    │    │
│  │              │  index.html says:   │  Origin: http://     │    │
│  │              │  "load image from   │  my-bucket-html.s3-  │    │
│  │              │   other bucket"     │  website.amazonaws   │    │
│  │              │                     │  .com                │    │
│  │              │                     └──────────────────────┘    │
│  │              │                                                 │
│  │              │  2. GET image       ┌──────────────────────┐   │
│  │              │ ─────────────────▶  │  S3 Bucket           │   │
│  │              │  Origin: bucket-    │  my-bucket-assets    │   │
│  │              │  html URL           │  (static website)    │   │
│  │              │                     │                      │   │
│  │              │  ❌ WITHOUT CORS:   │  ⚠️ Must configure   │   │
│  │              │  "Cross-Origin      │  CORS to allow       │   │
│  │              │   Request Blocked"  │  requests from       │   │
│  │              │                     │  bucket-html origin  │   │
│  │              │  ✅ WITH CORS:      │                      │   │
│  │              │  Image loads!       └──────────────────────┘   │
│  └──────────────┘                                                 │
└──────────────────────────────────────────────────────────────────┘

Configuring CORS on S3

CORS is configured as a JSON document in the bucket's Permissions settings. You can allow a specific origin or use * to allow all origins:

Allow a specific origin (recommended for security):

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": [
      "http://my-bucket-html.s3-website-eu-west-1.amazonaws.com"
    ],
    "ExposeHeaders": []
  }
]

Allow all origins (less secure, but quick):

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": []
  }
]

[{ "AllowedHeaders": ["Authorization"], "AllowedMethods": ["GET"],
   "AllowedOrigins": ["http://my-bucket-html.s3-website-eu-west-1.amazonaws.com"],
   "ExposeHeaders": [], "MaxAgeSeconds": 3000 }]

[{ "AllowedHeaders": ["*"], "AllowedMethods": ["GET"],
   "AllowedOrigins": ["*"], "ExposeHeaders": [] }]

CORS Configuration Fields

Hands-On Walkthrough

Setup: Two S3 Buckets as Static Websites

Bucket 1 — Origin bucket (my-bucket-html):

1. Create bucket, unblock all public access
2. Enable Static Website Hosting (Properties → Static Website Hosting → Enable)
3. Set index.html as the index document
4. Add a bucket policy to make it public:

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Effect": "Allow",
       "Principal": "*",
       "Action": "s3:GetObject",
       "Resource": "arn:aws:s3:::my-bucket-html/*"
     }]
   }
   

5. Upload index.html that references a page on the second bucket

Bucket 2 — Cross-origin bucket (my-bucket-assets):

1. Create bucket in a different region (to clearly show they're different servers)
2. Unblock all public access, enable Static Website Hosting
3. Add the same public bucket policy (with the correct bucket ARN)
4. Upload extra-page.html

Testing Without CORS

1. Open the first bucket's static website URL in a browser
2. The index.html loads, but the content from the second bucket fails to load
3. Open Chrome DevTools (F12 or right-click → Inspect → Console tab)
4. You'll see a red error: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource. (Reason: CORS header 'Access-Control-Allow-Origin' missing)

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at http://my-bucket-assets...
(Reason: CORS header 'Access-Control-Allow-Origin' missing)

Fixing It: Adding CORS Configuration

1. Go to Bucket 2 (the cross-origin bucket) → Permissions → scroll to CORS
2. Click Edit and paste the CORS JSON:

   [
     {
       "AllowedHeaders": ["Authorization"],
       "AllowedMethods": ["GET"],
       "AllowedOrigins": [
         "http://my-bucket-html.s3-website-eu-west-1.amazonaws.com"
       ],
       "ExposeHeaders": [],
       "MaxAgeSeconds": 3000
     }
   ]
   

3. Save changes

Verifying It Works

1. Refresh the first bucket's website in the browser
2. The cross-origin content now loads successfully
3. In Chrome DevTools → Network tab → click on the cross-origin request → Response Headers:
   • Access-Control-Allow-Methods: GET
   • Access-Control-Allow-Origin: http://my-bucket-html.s3-website-eu-west-1.amazonaws.com

These headers confirm that CORS is working — the cross-origin server is telling the browser "yes, I allow requests from this origin."

Questions & Answers