Same-Origin Policy — The Browser Security Foundation Behind CORS

In this tutorial, you will learn about Same. We cover key concepts, practical examples, and best practices to help you master this topic.

The same-origin policy is a critical browser security mechanism that prevents a web page from accessing resources, data, or scripts from a different origin, defined by protocol, host, and port combination.

What You'll Learn

• How the same-origin policy protects users from data theft
• What constitutes an "origin" in web security terms
• How CORS selectively relaxes this policy

Why It Matters

Without the same-origin policy, any malicious website could read your email, bank statements, or private messages by making requests to those services in the background.

flowchart LR
    A["Origin: https://example.com:443"] --> B{"Compare"}
    C["https://example.com:443"] -->|"Same Origin"| D["Allowed"]
    E["http://example.com:443"] -->|"Different Protocol"| F["Blocked"]
    G["https://api.example.com:443"] -->|"Different Host"| H["Blocked"]
    I["https://example.com:8080"] -->|"Different Port"| J["Blocked"]
    style B fill:#dbeafe,stroke:#2563eb

Code Examples

// Checking origin in the browser
console.log(window.location.origin);
// Output: "https://myapp.com"

// Cross-origin request (blocked by SOP)
fetch('https://api.other-site.com/data')
  .catch(err => console.log('SOP blocked this request'));

# Check origins with curl
curl -I -H "Origin: https://attacker.com" \
  https://bank.example.com/api/accounts

# Look for Access-Control-Allow-Origin header
# If missing, browser would block the response

Common Mistakes

1. Thinking the Same-Origin Policy Only Blocks APIs

It also blocks access to iframes, cookies, localStorage, and DOM from different origins.

2. Confusing Origin with Host

http://example.com and https://example.com are different origins.

3. Assuming Localhost is a Single Origin

Different ports on localhost are different origins.

4. Believing the Same-Origin Policy Applies to Servers

SOP is browser-enforced. Server-to-server requests are unrestricted.

5. Ignoring Origin When Setting Cookies

Cookies set from one origin may not be sent to another, causing session issues.

Practice Questions

1. What three components define an origin?
2. Why is the same-origin policy necessary?
3. How does CORS override the same-origin policy?
4. Are http://example.com and https://example.com the same origin?
5. Does the same-origin policy apply to server-side code?

Answers:

1. Protocol, host, and port.
2. To prevent malicious websites from accessing sensitive data from other sites.
3. By allowing servers to specify which origins are permitted via HTTP headers.
4. No. The protocols differ (HTTP vs HTTPS).
5. No. It is enforced by browsers only.

Challenge: List all the cross-origin requests a page at https://shop.example.com:3000 would make if it loaded images from https://images.cdn.com, fonts from https://fonts.google.com, and API data from https://api.shop.example.com.

FAQ

What's Next

Learn how Simple Requests interact with CORS, then explore Preflight Requests for complex operations.