If you have any questions or feedback, pleasefill out this form
This post is translated by ChatGPT and originally written in Mandarin, so there may be some inaccuracies or mistakes.
When browsing the web, we often differentiate service content through subdomains, such as:
- music.youtube.com/ → goes to YouTube Music
- youtube.com → https://www.youtube.com/ → goes to YouTube
Clearly, since the domain name is youtube.com, we can quickly ascertain that both domains are owned by YouTube, allowing us to trust the content and browse with peace of mind. So how should we determine whether two domains belong to the same owner? Should we check if the URL contains the string youtube.com?
Evidently, this is not an effective method of differentiation. For example:
- youtube.kalan.dev
- youtube.com.kalan.dev
Although these two subdomains both contain the string "youtube," we can quickly recognize that they are not owned by YouTube.
Therefore, the method for determining a subdomain should start from the right and move to the left, rather than the other way around. For software engineers, distinguishing subdomains is a straightforward task, but for those unfamiliar with how domains work, phishing through subdomains can easily lead to traps.
Now, the second question arises: how many parts should we look for from right to left? Taking blog.kalan.dev
as an example, the domain name is kalan.dev
, and the code can be written as follows:
const host = 'blog.kalan.dev'.split('.').reverse().slice(0, 2).reverse().join('.')
However, this is not a very accurate approach. For instance:
- ebay:www.ebay.co.uk
- google:www.google.co.uk
If we apply the previous method, then co.uk would be considered the domain name, with www.ebay and www.google as subdomains, suggesting that both websites belong to .co.uk? Clearly, this differentiation is incorrect; ebay is ebay, and google is google, with both domains owned by entirely different companies. The reason lies in the fact that a country code top-level domain combined with a second-level domain can also be treated as an independent domain name. Thus, the correct parsing method here is to regard google.co.uk
and ebay.co.uk
as two distinct hosts, owned by completely different entities.
TLD (Top Level Domain)
It's time to talk about top-level domains. Suffixes like .io
, .dev
1, and .org
are managed by ICANN. Anyone can apply for their own domain, such as my kalan.dev
, which is composed of the .dev
suffix.
ccTLD (Country Code Top-Level Domain)
There are also corresponding top-level domains based on regions, such as .tw
or .jp
. It's important to note that some country codes, when paired with other second-level domains, can also independently form a domain, such as:
In these two websites, momoshop.com.tw and books.com.tw are the domain names, while www.momoshop.com.tw and www.books.com.tw are their subdomains.
eTLD (Effective Top-Level Domains)
From the examples above, we can see that some top-level domains can combine with second-level domains to form a domain name (e.g., kalan.dev
), while others may combine two domain names to become a top-level domain (e.g., .com.tw
). How does the browser know how to parse this? The underlying concept involves maintaining a massive Public Suffix List (PSL), with domain names listed therein referred to as effective top-level domains (eTLD). The list can be found here.
Another common term is eTLD+1, which refers to an effective top-level domain plus one second-level domain forming a single domain. In this example, .com.tw
is the effective top-level domain, and momoshop is the second-level domain.
The Significance of SameSite for Frontend Applications
The operational mechanism of domains holds significant importance for the frontend, particularly regarding the determination of SameSite2. We want to know whether two websites are SameSite because, in a SameSite scenario, the cookies of the websites are shared (unless special headers are set).
Given two website URLs, kalan.hacker.com
and jack.hacker.com
, are these two URLs SameSite? At first glance, both URLs appear to be subdomains of hacker.com
, but after reviewing the previous examples and explanations, we should first check if hacker.com
is listed in the public suffix list before making a judgment.
If you're interested in discussions about cookies and SameSite, you might also want to check out my previous article Rethinking Cookies and CORS.
Using GitHub as an Example
On GitHub, you can generate the domain xxx.github.io
for free through Repository settings, such as my old blog: kjj6198.github.io/blog
. In this case, we wouldn't want every xxx.github.io
cookie to be accessible to one another. For this type of application, we prefer each xxx.github.io
to be treated as an independent domain rather than a subdomain of .github.io
. Using eTLD effectively resolves this issue, and checking the public suffix list indeed confirms the existence of .github.io
.
Who Can Apply for the Public Suffix List?
According to the official documentation from publicsuffix, anyone can submit a PR as long as they follow the official guidelines. However, the entire process seems to take some time, and from previous PRs, it appears that they undergo manual review.
Let's Talk About the Browser Address Bar
My blog.kalan.dev
displays as shown in the address bars of Firefox and Edge. The top image is from Firefox, while the bottom is from Edge.
Did you notice the difference? The text "blog" in Edge appears in the same color as kalan.dev
, while in Firefox, the text "blog" is somewhat lighter. Firefox emphasizes the color of the domain name in the address bar, whereas Edge and Chrome highlight the domain portion (including subdomains) together. In this instance, through Firefox's address bar, I can quickly determine that "blog" is a subdomain of kalan.dev.
This difference, although subtle, becomes quite useful when the domain contains an eTLD, such as kjj6198.github.io
. Since .github.io
is an eTLD, the entire kjj6198.github.io
is treated as a single domain.
Next time someone asks whether two domains are SameSite, the best method is to open Firefox, enter the URLs, and see if the highlighted parts are the same. If they are, we can confidently say they are SameSite!
Footnotes
If you found this article helpful, please consider buying me a coffee ☕ It'll make my ordinary day shine ✨
☕Buy me a coffee