Same-Origin Policy

The Same-Origin Policy (SOP) is a critical security mechanism built into modern web browsers.

It restricts how a document or script loaded by one origin can interact with a resource from another origin. Two URLs have the same origin if and only if they share the exact same **Protocol** (e.g., http vs https), **Port** (e.g., 80 vs 443), and **Host** (e.g., www.example.com vs api.example.com).

SOP matters because it provides the baseline security that protects the user's data.

If you are logged into your bank account in one tab, and you visit an evil hacker's website in another tab, SOP prevents the hacker's scripts from reading your bank account data or making authenticated reads on your behalf. Without SOP, any website could read your personal data from any other website you are logged into.

SOP doesn't block everything; it categorizes interactions:

**Cross-origin reads are blocked**: You cannot read data from another origin (e.g., reading the DOM of an iframe from another site, or reading the JSON response of a fetch() request).

**Cross-origin writes are allowed**: You can send data to another origin (e.g., submitting an HTML <form>, clicking a link, or redirecting).

**Cross-origin embeds are allowed**: You can display resources from another origin (e.g., <script src="...">, <img>, <video>, <iframe>), but you cannot inspect their contents via JavaScript.