When browsing the web, we often use subdomains to differentiate the content of services, for example:
- music.youtube.com/ → YouTube Music
- youtube.com → https://www.youtube.com/ → YouTube
Clearly, because the domain name is youtube.com, we can quickly determine that both domains are owned by YouTube, so we can trust the content inside and browse safely. But how do we determine if two domains belong to the same owner? Should we check if the URL contains the string youtube.com?
Obviously, this is not an effective method of differentiation. For example:
- youtube.kalan.dev
- youtube.com.kalan.dev
Although both subdomains contain the string youtube, we can quickly determine that they are not domains owned by YouTube.
Therefore, the identification of subdomains should start from right to left, not from left to right. It is easy for software engineers to identify subdomains, but for those who do not understand how domains work, phishing through subdomains can easily lead them into traps.
Now, the second question is, how many parts should we find from right to left? For example, for blog.kalan.dev, the domain name is kalan.dev, and the code can be written like this:
const host = 'blog.kalan.dev'.split('.').reverse().slice(0, 2).reverse().join('.')However, this is not a very accurate way of writing. For example:
- ebay: www.ebay.co.uk
- google: www.google.co.uk
If we use the previous method, then co.uk would be the domain name, and www.ebay and www.google would be the subdomains, so both websites would belong to .co.uk? Obviously, this differentiation is incorrect. ebay is ebay; google is google. The two domains belong to completely different companies. The reason is that country code top-level domains combined with second-level domains can also be used as independent domain names. Therefore, the correct way to resolve this is to consider google.co.uk and ebay.co.uk as two separate hosts with completely different owners.
TLD (Top Level Domain)
Now let's talk about top-level domains. These are suffixes like .io, .dev1, .org, etc., which are managed by ICANN. Anyone can apply for their own domain, like my kalan.dev which is a domain with the suffix .dev.
ccTLD (Country Code top-level Domain)
There are also corresponding top-level domains based on regions, such as .tw or .jp. It is important to note that when some country codes are combined with other second-level domains, they can also form an independent domain, for example:
In these two websites, momoshop.com.tw and books.com.tw are domain names, while www.momoshop.com.tw and www.books.com.tw are their subdomains.
eTLD (effective top-level domains)
From the examples mentioned above, we can see that some top-level domains can be combined with second-level domains to form a domain name (e.g., kalan.dev), while others combine two domain names to form a top-level domain (.com.tw). How do browsers know how to resolve this? The concept behind this is to maintain a large Public Suffix List (PSL) that lists domain names known as effective top-level domains (eTLD). The list can be obtained here.
Another common term is eTLD+1, which represents an effective top-level domain plus a second-level domain that forms a domain. In this example, .com.tw is the effective top-level domain, and momoshop is the second-level domain.
The Significance of SameSite for Front-end Applications
The operation of domains is most significant for front-end developers in terms of determining SameSite2. We want to know if two websites are SameSite because in the case of SameSite, the cookies of the websites are shared (without any special header settings).
Therefore, given two website URLs, kalan.hacker.com and jack.hacker.com, are these two URLs SameSite? At first glance, the two URLs seem to be subdomains of hacker.com, but after reading the examples and explanations above, we should first check if hacker.com is listed in the public suffix list before making a judgment.
If you are interested in the discussion of cookies and SameSite, you can also refer to my previous article Rethinking Cookies and CORS.
Using GitHub as an Example
In GitHub, you can generate a free domain with the format xxx.github.io through repository settings, such as my old blog: kjj6198.github.io/blog. In this case, we do not want every xxx.github.io cookie to be accessible by others. For this type of application, we want each xxx.github.io to be an independent domain rather than a subdomain of .github.io. This problem can be effectively solved through eTLD. Checking the public suffix list, we can indeed find the existence of .github.io.
Who Can Apply for the Public Suffix List?
According to the official documentation of publicsuffix, as long as you follow the official guidelines and submit a pull request, you can apply. However, the entire process seems to take some time, and based on past pull requests, it seems that they are manually reviewed.
Talking about the Browser Address Bar
On Firefox and Edge, my blog.kalan.dev is displayed as shown in the above image. The top image is from Firefox, and the bottom one is from Edge.
Have you noticed the difference? The text "blog" in Edge has the same color as "kalan.dev," but in Firefox, the text "blog" is slightly lighter. Firefox only emphasizes the color of the domain name, while Edge and Chrome emphasize the entire domain (including subdomains). In this example, by using the address bar in Firefox, I can quickly determine that "blog" is a subdomain of kalan.dev.
This difference may be small, but when a domain has an eTLD, Firefox's address bar feature becomes useful. For example, kjj6198.github.io is considered a domain because .github.io is an eTLD.
Next time someone asks you if two domains are SameSite, the best way is to open Firefox and enter the URLs to see if the emphasized parts are the same. If they are the same, we can confidently say that they are SameSite!
