🌐

same-site/cross-site, same-origin/cross-originをちゃんと理解する

3 min read

same-site/cross-site, same-origin/cross-origin の違いを曖昧なままにしておくと、分からないことや誤解がモリモリ増えていきますので、早いうちに定義を覚えちゃいましょう。

元記事はこちら:

https://web.dev/same-site-same-origin/

Origin とは

Origin は scheme (http とか https とか)、hostnameport の組み合わせを指す。same-origin と言った場合、これらすべてが一致するものを示している。一部でも異なるものはすべて cross-origin。

Origin A Origin B 解説
https://www.example.com:443 https://www.evil.com:443 cross-origin: hostname が異なる
https://www.example.com:443 https://example.com:443 cross-origin: hostname が異なる
https://www.example.com:443 https://login.example.com:443 cross-origin: hostname が異なる
https://www.example.com:443 http://www.example.com:443 cross-origin: scheme が異なる
https://www.example.com:443 https://www.example.com:80 cross-origin: port が異なる
https://www.example.com:443 https://www.example.com:443 same-origin: 完全一致
https://www.example.com:443 https://www.example.com same-origin: 明示されていないが HTTPS の port は 443 なので完全一致

Site とは

.com.org は Top-level domain (TLD) と呼ばれ、Root Zone Database に掲載されている。基本的に Site とは、TLD とそのすぐ左側にある部分を合わせたもの (例: example.com) であり、サブドメインやscheme、port は含まれない。

ただし、厳密な TLD 以外にも .co.jp.github.io など、実質的に TLD として扱われているものがあり、これらはアルゴリズムで導き出すことができないため、Public Suffix List という形でまとめられている。これらは effective TLD (eTLD) と呼ばれる。

それを踏まえると、Site とは eTLD とそのすぐ左側にある部分を合わせたもの (eTLD+1) であるとまとめることができる (例: my-project.github.io)。逆に言えば、same-site とは same-origin と比較して、異なるサブドメイン、異なる scheme、異なる port が許容されるものである。

Origin A Origin B 解説
https://www.example.com:443 https://www.evil.com:443 cross-site: eTLD+1 が異なる
https://www.example.com:443 https://login.example.com:443 same-site: サブドメインが異なっても eTLD+1 が一致していれば同じサイトとして扱う
https://www.example.com:443 http://www.example.com:443 same-site: scheme の違いは無視
https://www.example.com:443 https://www.example.com:80 same-site: port の違いは無視
https://www.example.com:443 https://www.example.com:443 same-site: 完全一致
https://www.example.com:443 https://www.example.com same-site: 明示されていないが HTTPS の port は 443 なので完全一致

Schemeful same-site とは

上記 same-site の定義に加えて scheme も考慮に入れたものを schemeful same-site と呼ぶ。

Origin A Origin B 解説
https://www.example.com:443 https://www.evil.com:443 cross-site: eTLD+1 が異なる
https://www.example.com:443 https://login.example.com:443 schemeful same-site: サブドメインが異なっても scheme と eTLD+1 が一致していれば同じサイトとして扱う
https://www.example.com:443 http://www.example.com:443 same-site: scheme が異なる
https://www.example.com:443 https://www.example.com:80 schemeful same-site: port の違いは無視
https://www.example.com:443 https://www.example.com:443 schemeful same-site: 完全一致
https://www.example.com:443 https://www.example.com schemeful same-site: 明示されていないが HTTPS の port は 443 なので完全一致

Chrome がサーバーに送るリクエストに付く Sec-Fetch-Site を見れば、cross-site, same-site, same-origin が区別されていることが分かる。

この記事に贈られたバッジ