How Same-Origin Policy Isolates Storage and DOM

The Same-Origin Policy (SOP) is a critical browser security mechanism that restricts scripts running on one web origin from accessing sensitive resources belonging to another origin. By enforcing strict boundaries based on protocol, hostname, and port, SOP prevents malicious websites from reading unauthorized Document Object Model (DOM) data, hijacking user sessions, or accessing isolated client-side storage mechanisms like LocalStorage and IndexedDB.

Defining an Origin

A web origin is defined by the combination of three components: 1. Protocol (Scheme): e.g., https:// 2. Host (Domain): e.g., example.com 3. Port: e.g., 443 (implicit for HTTPS) or 8080

Two URLs share the same origin only if all three components match exactly. For example, https://example.com/app and https://example.com/login share an origin, whereas http://example.com (different protocol), https://sub.example.com (different host), and https://example.com:8080 (different port) are treated as distinct origins.

DOM Isolation Across Domains

When a webpage embeds another page using an <iframe> or opens a new window via window.open(), the browser maintains strict DOM segregation:

• Restricted Tree Traversal: A script from origin A cannot inspect, modify, or traverse the DOM tree of origin B. Accessing properties like iframe.contentDocument or window.opener.document across origins triggers a DOMException (SecurityError).
• Attribute and Function Protection: Cross-origin window references expose only a minimal subset of properties (such as window.location.replace and window.close) and completely block access to internal variables, functions, and elements.
• Safe Communication via postMessage: To exchange data securely across origins, developers must use the window.postMessage() API, which requires the receiving window to explicitly verify the message sender’s origin before processing the payload.

Client-Side Storage Isolation

The browser creates isolated sandbox environments for client-side storage, ensuring that data stored by one origin is inaccessible to scripts executing in another:

• LocalStorage and SessionStorage: The Web Storage API keys and values are strictly partitioned by origin. A script executing on https://example.com cannot view, edit, or delete items stored in the localStorage or sessionStorage of https://api.example.com or https://other.com.
• IndexedDB: Databases created using IndexedDB are namespaced by origin. Database connections, object stores, and records cannot be queried or mutated outside the creating origin.
• Cache API: The Cache Storage API partitions network response caches per origin, preventing cross-origin inspection of cached assets and API responses.
• Cookies: While cookies use domain and path attributes for scope, JavaScript access via document.cookie remains restricted. A script on attacker.com cannot read cookies belonging to example.com. Furthermore, cookies marked with the HttpOnly flag are completely hidden from client-side JavaScript, mitigating risks associated with Cross-Site Scripting (XSS).

Through these combined constraints, the Same-Origin Policy ensures that interactions between disparate web domains remain isolated, preventing unauthorized state extraction and cross-site data tampering.