DEV Community

Alireza Hassankhani
Alireza Hassankhani

Posted on

the Difference Between Site and Origin

#webdev #javascript #programming #beginners

🌐 Understanding the Difference Between Site and Origin

Before diving into topics like CORS, the Access-Control-Allow-Origin header, the credentials option in the Fetch API, or even Cookie behavior, it's important to understand two fundamental concepts:

  • Site
  • Origin

Many of the errors developers encounter when communicating between the Front-end and Back-end are directly related to these two concepts.

Once you understand the difference between them, browser behavior regarding Cross-Origin and Cross-Site requests becomes much easier to understand.

🌍 Let's Start with Domain and Subdomain

Every website is identified by a Domain.

For example:

example.com
Enter fullscreen mode Exit fullscreen mode

This is a Domain.

If you place another label before the Domain, it becomes a Subdomain.

For example:

api.example.com
Enter fullscreen mode Exit fullscreen mode

In this example:

  • example.com → Domain
  • api → Subdomain

Here are a few more examples:

mail.google.com
Enter fullscreen mode Exit fullscreen mode
  • google.com → Domain
  • mail → Subdomain 
blog.example.com
Enter fullscreen mode Exit fullscreen mode
  • example.com → Domain
  • blog → Subdomain 
shop.example.com
Enter fullscreen mode Exit fullscreen mode
  • example.com → Domain
  • shop → Subdomain

Each Subdomain can host an entirely different service, application, or API—even on a different server or port.

📌 What is an Origin?

An Origin consists of three components:

  • Scheme (Protocol)
  • Host
  • Port

For example:

https://api.example.com:443
Enter fullscreen mode Exit fullscreen mode

Here:

  • Scheme → https
  • Host → api.example.com
  • Port → 443

When determining whether two URLs share the same Origin, the browser compares all three components.

If any one of them changes, the Origin changes.

For example:

https://example.com
Enter fullscreen mode Exit fullscreen mode

and

http://example.com
Enter fullscreen mode Exit fullscreen mode

These are different Origins because the Scheme is different.

Another example:

https://example.com
Enter fullscreen mode Exit fullscreen mode

and

https://api.example.com
Enter fullscreen mode Exit fullscreen mode

These are different Origins because the Host is different.

And finally:

https://example.com
Enter fullscreen mode Exit fullscreen mode

and

https://example.com:8080
Enter fullscreen mode Exit fullscreen mode

These are different Origins because the Port is different.

🌐 What is a Site?

Unlike Origin, a Site is less strict.

A Site consists of:

  • Scheme (Protocol)
  • Registrable Domain (eTLD+1)

The Registrable Domain is the main domain that can actually be registered.

For example:

api.example.com
Enter fullscreen mode Exit fullscreen mode

and

blog.example.com
Enter fullscreen mode Exit fullscreen mode

Both belong to the same Registrable Domain:

example.com
Enter fullscreen mode Exit fullscreen mode

Therefore, they are considered Same-Site.

However:

example.com
Enter fullscreen mode Exit fullscreen mode

and

example.org
Enter fullscreen mode Exit fullscreen mode

are Cross-Site because the Registrable Domain is different.

Also remember that the Scheme is part of the Site comparison.

For example:

http://example.com
Enter fullscreen mode Exit fullscreen mode

and

https://example.com
Enter fullscreen mode Exit fullscreen mode

are considered different Sites in modern browsers (Schemeful Same-Site).

⚖️ Site vs Origin

In summary:

Origin compares:

  • Scheme
  • Host
  • Port

Site compares:

  • Scheme
  • Registrable Domain

Because of this, two URLs can be:

  • ✅ Same-Site
  • ❌ Different-Origin

For example:

https://api.example.com
Enter fullscreen mode Exit fullscreen mode

and

https://blog.example.com
Enter fullscreen mode Exit fullscreen mode

Result:

  • ✅ Same-Site
  • ❌ Different-Origin

Another example:

https://example.com
Enter fullscreen mode Exit fullscreen mode

and

https://example.com:8080
Enter fullscreen mode Exit fullscreen mode

Result:

  • ✅ Same-Site
  • ❌ Different-Origin

📌 Why Does This Matter?

Browsers rely on these concepts to enforce several important security mechanisms, including:

  • Same-Origin Policy (SOP)
  • CORS
  • Access-Control-Allow-Origin
  • Fetch API credentials
  • Cookie SameSite

Understanding the difference between Site and Origin makes it much easier to understand why browsers allow or block certain requests.

In the next article, we'll explore Same-Origin Policy (SOP) and CORS, and see exactly how browsers decide whether a cross-origin request should be accessible to JavaScript.

Top comments (0)