🌐 Chapter 67: CORS & Cross-Origin Embedding

The Same-Origin Policy (SOP)

Scheme, host, and port tuple matching, browser security boundaries, DOM/storage isolation, and cross-origin embedding vs reading rules.

LEARNING OBJECTIVES ⌵

Define an origin using the RFC 6454 <scheme, host, port> tuple algorithm.
Differentiate between cross-origin writes, cross-origin embeds, and cross-origin reads.
Understand how the Same-Origin Policy isolates the DOM, localStorage, sessionStorage, IndexedDB, and Cookies.
Identify historical bypass attempts and modern strict boundary enforcement in user agents.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine living in a high-density, multi-tenant apartment building. Each tenant possesses their own private apartment with a unique key.

Your apartment number is Suite 401, Building B, HTTPS Towers (https://bank.example.com:443).
Down the hallway lives another tenant in Suite 401, Building B, HTTP Towers (http://bank.example.com:80).
Across the street lives a third tenant in Suite 401, Building C, HTTPS Towers (https://attacker.example.com:443).

+-----------------------------------------------------------------------------------+
|                            THE BROWSER APARTMENT BUILDING                         |
+-----------------------------------------------------------------------------------+
|  [Apartment A: https://bank.com:443]   |   [Apartment B: https://bank.com:8443]   |
|  - Private DOM (Bank Balance)          |   - Separate Memory Space                |
|  - Auth Cookies & LocalStorage         |   - Isolated IndexedDB                   |
|  -----------------------------------   |   ------------------------------------   |
|  * Tenant A CANNOT unlock Tenant B's door, even though domain name matches!       |
+-----------------------------------------------------------------------------------+
|  [Apartment C: https://attacker.com:443]                                          |
|  - Can deliver mail through the mail slot (Cross-Origin Write: POST /transfer)    |
|  - CANNOT open the door and read financial papers (Cross-Origin Read: Blocked!)   |
+-----------------------------------------------------------------------------------+

The building's strict security guard is the Same-Origin Policy (SOP). The guard enforces one foundational rule: Tenants may never enter another tenant's room, read their confidential documents, or rummage through their closets without explicit cryptographic permission.

Introduced by Netscape Navigator 2.0 in 1995 to protect script access to document properties across frames, the Same-Origin Policy is the cornerstone of web application security. Without SOP, visiting https://evil-site.com in one browser tab would allow an attacker's script to reach across the browser runtime, inspect https://my-bank.com open in another tab, read your private account balances from its DOM, extract your session cookies, and initiate unauthorized wire transfers.

Technical Deep Dive & Specifications

The Origin Definition (RFC 6454)

Under RFC 6454 (The Web Origin Concept), an origin is defined strictly as the tuple of three components:

$$\text{Origin} = \langle \text{Scheme}, \text{Host}, \text{Port} \rangle$$

Two URLs share the same origin if and only if all three components are identical.

URL: https://sub.example.com:443/app/dashboard?user=123#profile
     \___/   \_____________/ \_/ \_________________________/
    Scheme        Host      Port            Path & Query
    |                          |
    +---- THE ORIGIN TUPLE ----+

Origin Comparison Matrix

Let the reference origin be: https://www.example.com:443/dir/page.html (Default HTTPS port 443).

Candidate URL	Same Origin?	Reason for Decision
`https://www.example.com/dir/other.html`	✅ YES	Exact match: same scheme (`https`), host (`www.example.com`), and implicit port (`443`). Path differences are ignored by SOP.
`https://www.example.com/dir/inner/page2.html`	✅ YES	Exact match: same scheme, host, and port.
`http://www.example.com/dir/page.html`	❌ NO	Scheme mismatch: `http` (port 80) vs `https` (port 443).
`https://www.example.com:8080/dir/page.html`	❌ NO	Port mismatch: `8080` vs `443`.
`https://api.example.com/dir/page.html`	❌ NO	Host mismatch: `api.example.com` is a distinct subdomain from `www.example.com`.
`https://example.com/dir/page.html`	❌ NO	Host mismatch: apex domain `example.com` vs subdomain `www.example.com`.
`https://v2.www.example.com/dir/page.html`	❌ NO	Host mismatch: different subdomain hierarchy.

What SOP Restricts vs What It Allows

A common point of confusion is believing that SOP blocks all cross-origin activity. The browser handles cross-origin interactions across three distinct categories:

+-----------------------------------------------------------------------------------+
|                        CROSS-ORIGIN INTERACTION SPECTRUM                          |
+-----------------------------------------------------------------------------------+
|  1. WRITES (Normally Allowed)                                                     |
|     - Hyperlink navigations (<a href="...">)                                      |
|     - Form submissions (<form action="https://other.com" method="POST">)          |
|     - Redirects (301, 302, 307)                                                   |
|                                                                                   |
|  2. EMBEDS (Normally Allowed)                                                     |
|     - Scripts: <script src="https://other.com/lib.js"></script>                  |
|     - Styles:  <link rel="stylesheet" href="https://other.com/style.css">         |
|     - Images:  <img src="https://other.com/photo.jpg" alt="...">                  |
|     - Media:   <video src="https://other.com/clip.mp4"></video>                   |
|     - Frames:  <iframe src="https://other.com/embed.html"></iframe>               |
|                                                                                   |
|  3. READS (Strictly Blocked by Default!)                                         |
|     - XMLHttpRequest / fetch() response text & headers                            |
|     - Inspecting iframe.contentDocument / DOM nodes                               |
|     - Canvas 2D pixel extraction (getImageData, toDataURL)                        |
|     - Web Storage: localStorage, sessionStorage, IndexedDB                        |
|     - Reading document.cookie of another origin                                   |
+-----------------------------------------------------------------------------------+

Storage and DOM Isolation Boundaries

DOM Tree Access: If origin A embeds origin B via <iframe id="myFrame" src="https://b.com">, A's scripts can execute myFrame.contentWindow, but accessing myFrame.contentDocument or myFrame.contentWindow.document immediately throws a DOMException: Blocked a frame with origin "https://a.com" from accessing a cross-origin frame.
Client Storage:
- window.localStorage and window.sessionStorage are sandboxed strictly per <scheme, host, port>.
- IndexedDB databases are isolated per origin.
- CacheStorage (Service Worker cache) is partitioned per origin.
Cookie Partitioning: Cookies historically adhered to a looser domain/path scoping rather than a strict origin tuple. For instance, example.com could set a cookie readable by sub.example.com. Modern browsers enforce SameSite attributes and CHIPS (Cookies Having Independent Partitioned State) to align cookies closer to origin boundaries.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Lines 31–32: Evaluates window.location.origin, displaying the exact <scheme, host, port> of the running client page.
Line 35: References an <iframe> loading https://example.com. Even though the iframe successfully renders pixels on the screen (cross-origin embedding is permitted), its internal memory structure is sandboxed.
Line 41: Attempts to dereference iframe.contentDocument. When the origin of the outer frame does not match https://example.com, the browser's security boundary intercepts the call and raises a SecurityError / DOMException.
Line 53: Dispatches a standard fetch('https://example.com/'). Because example.com does not provide CORS headers permitting reading from our origin, the promise rejects with a TypeError: Failed to fetch.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SOP Boundary Inspector</title>
  <style>
    body { font-family: system-ui, -apple-system, sans-serif; margin: 2rem; background: #0f172a; color: #f8fafc; }
    .card { background: #1e293b; border-radius: 8px; padding: 1.5rem; border: 1px solid #334155; max-width: 720px; }
    .status { padding: 0.5rem 1rem; border-radius: 4px; font-weight: bold; margin-top: 1rem; }
    .allowed { background: #065f46; color: #34d399; }
    .blocked { background: #881337; color: #fb7185; }
    button { background: #3b82f6; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-weight: 600; }
    button:hover { background: #2563eb; }
    code { font-family: monospace; background: #090d16; padding: 0.2rem 0.4rem; border-radius: 4px; }
    iframe { width: 100%; height: 120px; border: 1px solid #475569; border-radius: 4px; margin-top: 1rem; background: #fff; }
  </style>
</head>
<body>
  <div class="card">
    <h2>🔒 Same-Origin Policy (SOP) Live Inspector</h2>
    <p>Current Execution Origin: <code id="current-origin">...</code></p>
    
    <iframe id="test-frame" src="https://example.com"></iframe>

<div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
      <button id="btn-probe-dom">Inspect iFrame DOM</button>
      <button id="btn-probe-fetch">Fetch Cross-Origin Data</button>
    </div>

const output = document.getElementById('output');
    const iframe = document.getElementById('test-frame');

// 1. Probing Cross-Origin Frame DOM
    document.getElementById('btn-probe-dom').addEventListener('click', () => {
      output.style.display = 'block';
      try {
        // Attempting to read cross-origin DOM
        const frameDoc = iframe.contentDocument || iframe.contentWindow.document;
        const frameTitle = frameDoc.title;
        output.className = 'status allowed';
        output.innerHTML = `✅ <strong>DOM Read Succeeded:</strong> Title = "${frameTitle}"`;
      } catch (err) {
        output.className = 'status blocked';
        output.innerHTML = `🛑 <strong>SOP Blocked DOM Access:</strong><br><code>${err.name}: ${err.message}</code>`;
      }
    });

// 2. Probing Cross-Origin Fetch
    document.getElementById('btn-probe-fetch').addEventListener('click', async () => {
      output.style.display = 'block';
      try {
        const response = await fetch('https://example.com/');
        const text = await response.text();
        output.className = 'status allowed';
        output.innerHTML = `✅ <strong>Fetch Read Succeeded:</strong> Received ${text.length} bytes.`;
      } catch (err) {
        output.className = 'status blocked';
        output.innerHTML = `🛑 <strong>SOP Blocked Fetch Read:</strong><br><code>${err.name}: ${err.message}</code>`;
      }
    });
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🔒 Same-Origin Policy (SOP) Live Inspector
Current Execution Origin: https://my-dev-host.local:3000

+-------------------------------------------------------------+
| [Embedded Frame: Example Domain (example.com) rendered here] |
+-------------------------------------------------------------+

[ Inspect iFrame DOM ]   [ Fetch Cross-Origin Data ]

[ Output Box - Red Background ]:
🛑 SOP Blocked DOM Access:
DOMException: Failed to read a named property 'document' from 'Window': Blocked a frame with origin "https://my-dev-host.local:3000" from accessing a cross-origin frame.

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Origin Equivalence & Policy Rule Engine

Instructions:

Implement a JavaScript function isSameOrigin(urlA, urlB) that parses two URL strings and returns true if and only if their <scheme, host, port> tuples match identically according to RFC 6454.
Handle implicit default ports (http = 80, https = 443).
Implement evaluateAction(sourceUrl, targetUrl, actionType) where actionType is 'DOM_READ', 'FORM_POST', or 'SCRIPT_EMBED'. The function must return whether SOP permits the action by default without CORS.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Origin Tuple Matcher</title>
</head>
<body>
  <h2>Origin Rule Engine</h2>
  <div id="results"></div>

function isSameOrigin(urlA, urlB) {
      // TODO: Compare tuples
      return false;
    }

function evaluateAction(sourceUrl, targetUrl, actionType) {
      // TODO: Return { allowed: boolean, reason: string }
      return { allowed: false, reason: "Not implemented" };
    }

// Test cases to verify
    console.log("Test 1:", isSameOrigin("https://example.com/a", "https://example.com/b")); // Expected: true
    console.log("Test 2:", isSameOrigin("http://example.com", "https://example.com")); // Expected: false
    console.log("Test 3:", isSameOrigin("https://example.com:443", "https://example.com")); // Expected: true
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Origin Tuple Matcher - Verified Solution</title>
  <style>
    body { font-family: monospace; padding: 20px; background: #111827; color: #e5e7eb; }
    .pass { color: #10b981; }
    .fail { color: #ef4444; }
  </style>
</head>
<body>
  <h2>RFC 6454 Origin Tuple & SOP Rule Engine</h2>
  <div id="results"></div>

  <script>
    function parseOriginTuple(urlString) {
      const parsed = new URL(urlString);
      const scheme = parsed.protocol.replace(':', '').toLowerCase();
      const host = parsed.hostname.toLowerCase();
      let port = parsed.port;

      if (!port) {
        if (scheme === 'http') port = '80';
        else if (scheme === 'https') port = '443';
        else if (scheme === 'ftp') port = '21';
        else port = '';
      }

      return { scheme, host, port };
    }

    function isSameOrigin(urlA, urlB) {
      try {
        const originA = parseOriginTuple(urlA);
        const originB = parseOriginTuple(urlB);

        return (
          originA.scheme === originB.scheme &&
          originA.host === originB.host &&
          originA.port === originB.port
        );
      } catch (e) {
        return false;
      }
    }

    function evaluateAction(sourceUrl, targetUrl, actionType) {
      const sameOrigin = isSameOrigin(sourceUrl, targetUrl);

      switch (actionType) {
        case 'DOM_READ':
        case 'STORAGE_READ':
        case 'FETCH_READ':
          return {
            allowed: sameOrigin,
            reason: sameOrigin 
              ? "Origins match identically; read permitted." 
              : "SOP blocks cross-origin reading of DOM, storage, and network response bodies."
          };
        case 'FORM_POST':
          return {
            allowed: true,
            reason: "Cross-origin writes (form submissions) are permitted by default by SOP."
          };
        case 'SCRIPT_EMBED':
        case 'IMAGE_EMBED':
          return {
            allowed: true,
            reason: "Cross-origin embeds (script tags, image tags) are permitted by default."
          };
        default:
          throw new Error(`Unknown action type: ${actionType}`);
      }
    }

    // Verification Test Matrix
    const testCases = [
      { a: "https://example.com/app", b: "https://example.com/api", expected: true },
      { a: "http://example.com", b: "https://example.com", expected: false },
      { a: "https://example.com:443", b: "https://example.com", expected: true },
      { a: "https://sub.example.com", b: "https://example.com", expected: false },
      { a: "https://example.com:8080", b: "https://example.com:443", expected: false }
    ];

    const resultsDiv = document.getElementById('results');
    testCases.forEach((tc, idx) => {
      const result = isSameOrigin(tc.a, tc.b);
      const isPass = result === tc.expected;
      const p = document.createElement('p');
      p.className = isPass ? 'pass' : 'fail';
      p.textContent = `Test ${idx + 1}: isSameOrigin("${tc.a}", "${tc.b}") => ${result} [${isPass ? 'PASS' : 'FAIL'}]`;
      resultsDiv.appendChild(p);
    });

    console.log("DOM_READ evaluation (cross-origin):", evaluateAction("https://a.com", "https://b.com", "DOM_READ"));
    console.log("FORM_POST evaluation (cross-origin):", evaluateAction("https://a.com", "https://b.com", "FORM_POST"));
  </script>
</body>
</html>

Why this works:

Standardizing default port resolution (http: 80, https: 443) guarantees that explicit ports (https://example.com:443) and implicit ports (https://example.com) produce identical tuples.
The evaluation engine accurately reflects the core asymmetrical design of the browser security model: cross-origin writes and embeds are permissible legacy primitives, while cross-origin reads are strictly guarded.

⚠️ Common Pitfalls

Assuming Subdomains Share an Origin: app.example.com and api.example.com are completely different origins. Scripts running on app.example.com cannot directly read objects on api.example.com via DOM access or standard fetch without CORS.
Assuming SOP Prevents Form Submissions (CSRF): SOP does not stop a malicious page from submitting a hidden <form action="https://bank.com/transfer" method="POST"> containing ambient credentials (cookies). SOP only prevents the attacker from reading the server's response. CSRF tokens or SameSite cookies are required to prevent unauthorized writes.
Relying on Legacy document.domain Relaxation: Setting document.domain = "example.com" to allow communication between sub1.example.com and sub2.example.com has been deprecated by web standards and disabled by default in modern browsers (Chrome 115+) due to fundamental security weaknesses. Use window.postMessage() instead.

💡 Pro Tips

Leverage window.postMessage() for Cross-Origin Communication: When multiple origins need to exchange data between frames or tabs, use structured messaging with strict target origin validation:

// Sender:
targetWindow.postMessage({ type: 'AUTH_SUCCESS', token }, 'https://trusted-receiver.com');

// Receiver:
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted-sender.com') return; // Strict boundary check
  handleAuth(event.data);
});

Treat Port Numbers as Hard Security Boundaries: In local development environments, http://localhost:3000 (React) and http://localhost:8080 (API server) are distinct origins. Configure reverse proxies or CORS policies during development rather than disabling browser security flags.

📌 Key Takeaways

An origin is strictly defined by the RFC 6454 tuple: <Scheme, Host, Port>. If any component differs, the origin is distinct.
The Same-Origin Policy (SOP) is the foundational security boundary implemented by all compliant web browsers.
SOP blocks cross-origin reading (network responses, DOM trees, client storage like localStorage/IndexedDB).
SOP historically allows cross-origin writes (links, redirects, form POSTs) and cross-origin embeds (<script>, <img>, <iframe>).
Safe cross-origin communication between frames must be achieved via window.postMessage() with rigorous event.origin verification.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Given the source page `https://checkout.store.com:443/cart`, which of the following target URLs belongs to the EXACT SAME origin?

Topic: HTML Fundamentals

? Question 2 / 3

What does the Same-Origin Policy block when Page A (`https://attacker.com`) embeds Page B (`https://bank.com`) in an `<iframe>`?

Topic: HTML Fundamentals

? Question 3 / 3

Why does standard SOP NOT protect a web application from Cross-Site Request Forgery (CSRF) attacks?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

The Origin Definition (RFC 6454)

Origin Comparison Matrix

What SOP Restricts vs What It Allows

Storage and DOM Isolation Boundaries

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build an Origin Equivalence & Policy Rule Engine

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Given the source page https://checkout.store.com:443/cart, which of the following target URLs belongs to the EXACT SAME origin?

What does the Same-Origin Policy block when Page A (https://attacker.com) embeds Page B (https://bank.com) in an <iframe>?

Why does standard SOP NOT protect a web application from Cross-Site Request Forgery (CSRF) attacks?

Given the source page `https://checkout.store.com:443/cart`, which of the following target URLs belongs to the EXACT SAME origin?

What does the Same-Origin Policy block when Page A (`https://attacker.com`) embeds Page B (`https://bank.com`) in an `<iframe>`?