2つのドメインの所有者が同じかどうかをどのように判断するか?
ウェブページを閲覧する際、僕たちはよくサブドメインを通じてサービスの内容を区別する。例えば:
- music.youtube.com/ → YouTube Music へ
- youtube.com → https://www.youtube.com/ → YouTube へ
ドメイン名が youtube.com であるため、これら2つのドメインはいずれも YouTube が所有していることがすぐに分かり、そのコンテンツを信頼して安心して閲覧できることは明らかだ。では、2つのドメインが同一の所有者に属しているかどうかは、どのように判断すべきだろうか?URLに youtube.com という文字列が含まれているかどうかで判断するのだろうか?
明らかに、これは有効な区別方法ではない。例えば以下のようなケースだ:
- youtube.kalan.dev
- youtube.com.kalan.dev
これら2つのサブドメインはどちらも youtube という文字列を含んでいるが、YouTube が所有するドメインではないことはすぐに分かる。
したがって、サブドメインの判別は左から右へ探すのではなく、右から左へと探すべきだ。サブドメインの判別はソフトウェアエンジニアにとっては容易だが、ドメインの仕組みを理解していない人にとっては、サブドメインを悪用したフィッシング詐欺の罠に陥りやすい。
そこで2つ目の問題が生じる。右から左へ何つのパートを探せばよいのだろうか?blog.kalan.dev の場合、ドメイン名は kalan.dev であり、コードは以下のように書ける:
const host = 'blog.kalan.dev'.split('.').reverse().slice(0, 2).reverse().join('.')
しかし、これは決して正確な書き方ではない。例えば:
- ebay:www.ebay.co.uk
- google:www.google.co.uk
先ほどの書き方に従うと、co.uk がドメイン名になり、www.ebay と www.google がサブドメインとなって、両方のサイトが .co.uk に属していることになってしまうのだろうか?明らかにこのような区別は間違っている。ebay は ebay であり、google は google であって、2つのドメインはまったく異なる企業に所有されている。原因は、国別コードのトップレベルドメインとセカンドレベルドメインの組み合わせも、独立したドメイン名として使用される点にある。したがって、ここでの正しい解析方法は、google.co.uk と ebay.co.uk を2つの独立したホストとみなし、所有者も完全に異なると判断することだ。
TLD(Top Level Domain)
ここでトップレベルドメインについて話そう。.io、.dev1、.org などの末尾のドメインはすべて ICANN によって管理されており、誰でも自分のドメインを申請できる。僕の kalan.dev も .dev を末尾として組み合わせたドメインだ。

ccTLD(Country Code top-level Domain)
地域に応じて利用できる対応するトップレベルドメインもあり、例えば .tw や .jp などがある。注意すべきなのは、一部の国別コード(country code)は他のセカンドレベルドメインと組み合わさることで、単独で1つのドメインを形成することもある点だ。例えば:
これら2つのサイトにおいて、momoshop.com.tw と books.com.tw がドメイン名であり、www.momoshop.com.tw と www.books.com.tw はそのサブドメインにあたる。

eTLD(effective top-level domains)
以上のいくつかの例から分かるように、一部のトップレベルドメインはセカンドレベルドメインと組み合わさって1つのドメイン名になり(例えば kalan.dev)、また一部は2つのドメインが集まって1つのトップレベルドメイン(.com.tw)になる。ブラウザはこれをどのように解析すればよいと知るのだろうか?この背後にある仕組みは、巨大な Public Suffix List(PSL)というリストを維持管理することだ。そこにリストアップされているドメイン名は effective top-level domains(eTLD)と呼ばれ、リストはここで入手できる。
もう1つのよくある用語は eTLD+1 で、これは有効トップレベルドメイン+1つのセカンドレベルドメインで1つのドメインを形成することを表す。この例では .com.tw が有効トップレベルドメインで、momoshop がセカンドレベルドメインにあたる。

SameSite がフロントエンドアプリケーションに持つ意味
ドメインの仕組みがフロントエンドにとってもっとも重要な意味を持つのは、SameSite2 の判断においてだ。僕たちは2つのサイトが SameSite であるかどうかを知りたい。なぜなら、SameSite の状況下ではサイトの Cookie が共有されるからだ(特別なヘッダー設定がない場合)。
したがって、2つのウェブサイトの URL として kalan.hacker.com と jack.hacker.com が与えられたとき、この2つの URL は SameSite だろうか?一見すると、どちらの URL も hacker.com のサブドメインのように見える。しかし先ほどの例と説明を踏まえれば、まずは hacker.com が Public Suffix List に含まれているかどうかを確認してから判断すべきだ。
もし Cookie と SameSite の議論に興味があれば、以前僕が書いた記事「CookieとCORSについての再考察」も参考にしてほしい。
GitHub を例に挙げる
GitHub では、リポジトリの設定を通じて無料で xxx.github.io のドメインを生成できる。例えば僕の古いブログである kjj6198.github.io/blog のように。このようなケースでは、各 xxx.github.io の Cookie が相互にアクセスできてしまう事態は絶対に避けたい。この種のアプリケーションにおいては、それぞれの xxx.github.io が独立したドメインであり、.github.io のサブドメインではない状態が望ましい。eTLD を使えばこの問題を効果的に解決でき、Public Suffix List を確認すると確かに .github.io の存在を確認できる。

誰が Public Suffix List に申請できるのか?
publicsuffix の公式ドキュメントを見る限り、公式の規定に従って PR を送るだけでよいようだ。ただしプロセス全体にはそれなりの時間がかかるようで、過去の PR を見ても人手による審査が行われている。
ブラウザのアドレスバーについて

僕の blog.kalan.dev が Firefox と Edge のアドレスバーでどのように表示されるかは上の画像の通りだ。上が Firefox の表示で、下が Edge の表示だ。
違いに気づいただろうか?Edge では blog の文字の色が kalan.dev と同じだが、Firefox では blog の文字が少し薄くなっている。Firefox のアドレスバーはドメイン名の色だけを強調表示するが、Edge や Chrome はドメイン部分(サブドメインを含む)も一緒に強調表示する。この例では、Firefox のアドレスバーを見ることで、blog が kalan.dev のサブドメインであることがすぐに分かる。
この違いはごくわずかだが、ドメインに eTLD が含まれる場合、Firefox のアドレスバー機能は非常に役に立つ。例えば kjj6198.github.io の場合、.github.io が eTLD であるため、kjj6198.github.io 全体で1つのドメインとなる。

今度もし誰かに「この2つのドメインは SameSite か?」と聞かれたら、一番良い方法は Firefox を開いて URL を入力し、2つの URL で強調されている部分が同じかどうかを確認することだ。同じであれば、それらは SameSite であると自信を持って言える!
Footnotes
関連記事
- Three.js で僕の部屋を表現する 僕が React Three Fiber を使って実際の自分の部屋をブラウザ上に再現し、実世界のオブジェクトを目録に見立て、空間の記憶を通してここ数年の生活と仕事について語った話。
- フロントエンドで画像を扱う際に注意すべきこと Jake Archibaldの記事を起点に、現代のレスポンシブ画像の書き方を整理する。なぜwidth/heightを付ける必要があるのか、CSSのaspect-ratioはいつ使うべきか、AVIFとWebPの選び方、そしてpicture/source/srcsetを使ったモバイル向け画像の切り替えについて。
- CSS field-sizing — たった1行のCSSでフォーム要素を自動リサイズする かつてtextareaの自動高さ調整は、JavaScriptでscrollHeightを監視するしかなかった。しかしCSSのfield-sizing: contentなら、わずか1行で代替でき、textarea、input、selectに対応している。本記事では従来のやり方のペインポイントと、field-sizingの使い方をまとめる。
- リンクの下線をもっと見栄え良くする:text-underline-offset デフォルトでは下線と文字が近すぎて、このスタイルを好まないデザイナーもいるし、僕自身もあまり綺麗ではないと感じていた。