What is the same-origin policy?

The same-origin policy is the browser rule that stops a document or script from one origin reading data from another. Without it, any page you visited could read your email, because your browser would happily attach your cookies to a request it made to your mail provider.

An origin is the triple scheme + host + port. All three must match:

https://example.com/a      and  https://example.com/b      same origin
https://example.com        and  http://example.com         different (scheme)
https://example.com        and  https://api.example.com    different (host)
https://example.com        and  https://example.com:8080   different (port)

Note a subdomain is a different origin, which surprises people regularly.

What it blocks — and what it does not

The policy governs reading, not sending. A cross-origin fetch is still sent and still processed by the server; the browser just refuses to let your JavaScript see the response unless the server opts in with CORS headers. This distinction is exactly why CSRF exists: the request goes through, so the damage is done even though the attacker never reads the reply.

Embedding is also allowed. You can load an image, a stylesheet, a font, or a <script> from anywhere — you just cannot inspect the contents. <canvas> becomes "tainted" by a cross-origin image and getImageData() then throws.

Relaxing it deliberately

• CORS — the server sends Access-Control-Allow-Origin to permit specific origins. This is the normal mechanism.
• crossorigin attribute on <script>/<img> so you can read error details or canvas pixels.
• postMessage for controlled communication between windows or iframes. Always check event.origin on receipt — skipping that check turns the mechanism into a hole.

The policy is a default of "deny", and everything above is an explicit, server-controlled exception to it.