Understanding "same-site" and "same-origin"
"same-site" and "same-origin" are frequently cited but often misunderstood terms. For example, they are mentioned in the context of page transitions, fetch() requests, cookies, opening popups, embedded resources, and iframes.
Origin #
"Origin" is a combination of a scheme (also known as the protocol, for example HTTP or HTTPS), hostname, and port (if specified). For example, given a URL of https://www.example.com:443/foo , the "origin" is https://www.example.com:443.
"same-origin" and "cross-origin" #
Websites that have the combination of the same scheme, hostname, and port are considered "same-origin". Everything else is considered "cross-origin".
| Origin A | Origin B | Explanation of whether Origin A and B are "same-origin" or "cross-origin" |
|---|---|---|
| https://www.example.com:443 | https://www.evil.com:443 | cross-origin: different domains |
| https://example.com:443 | cross-origin: different subdomains | |
| https://login.example.com:443 | cross-origin: different subdomains | |
| http://www.example.com:443 | cross-origin: different schemes | |
| https://www.example.com:80 | cross-origin: different ports | |
| https://www.example.com:443 | same-origin: exact match | |
| https://www.example.com | same-origin: implicit port number (443) matches |
Site #
Top-level domains (TLDs) such as .com and .org are listed in the Root Zone Database. In the example above, "site" is the combination of the scheme, the TLD and the part of the domain just before it (We call it TLD+1). For example, given a URL of https://www.example.com:443/foo , the "site" is https://example.com.
Public Suffix List and eTLD #
For domains that include things such as .co.jp or .github.io, just using .jp or .io is not granular enough to identify the "site". There is no way to algorithmically determine the level of registrable domains for a particular TLD. That's why a list of public suffixes defined in the Public Suffix List was created. These public suffixes are also called effective TLDs (eTLDs). The list of eTLDs is maintained at publicsuffix.org/list.
To identify the "site" part of a domain that includes an eTLD, apply the same practice as the example with .com. Taking https://www.project.github.io:443/foo as an example, the scheme is https, the eTLD is .github.io and the eTLD+1 is project.github.io, so https://project.github.io is considered the "site" for this URL.
"same-site" and "cross-site" #
Websites that have the same scheme and the same eTLD+1 are considered "same-site". Websites that have a different scheme or a different eTLD+1 are "cross-site".
| Origin A | Origin B | Explanation of whether Origin A and B are "same-site" or "cross-site" |
|---|---|---|
| https://www.example.com:443 | https://www.evil.com:443 | cross-site: different domains |
| https://login.example.com:443 | same-site: different subdomains don't matter | |
| http://www.example.com:443 | cross-site: different schemes | |
| https://www.example.com:80 | same-site: different ports don't matter | |
| https://www.example.com:443 | same-site: exact match | |
| https://www.example.com | same-site: ports don't matter |
"schemeless same-site" #
The definition of "same-site" evolved to consider the URL scheme as part of the site in order to prevent HTTP being used as a weak channel. The older concept of "same-site" without scheme comparison is now called "schemeless same-site". For example, http://www.example.com and https://www.example.com are considered schemeless same-site but not same-site, because only the eTLD+1 part matters and the scheme is not taken into account.
| Origin A | Origin B | Explanation of whether Origin A and B are "schemeless same-site" |
|---|---|---|
| https://www.example.com:443 | https://www.evil.com:443 | cross-site: different domains |
| https://login.example.com:443 | schemeless same-site: different subdomains don't matter | |
| http://www.example.com:443 | schemeless same-site: different schemes don't matter | |
| https://www.example.com:80 | schemeless same-site: different ports don't matter | |
| https://www.example.com:443 | schemeless same-site: exact match | |
| https://www.example.com | schemeless same-site: ports don't matter |
How to check if a request is "same-site", "same-origin", or "cross-site" #
All modern browsers (Safari support landing soon) send requests along with a Sec-Fetch-Site HTTP header. The header has one of the following values:
cross-sitesame-sitesame-originnone
By examining the value of Sec-Fetch-Site, you can determine if the request is "same-site", "same-origin", or "cross-site".