Same-site・Cross-site・Same-origin・Cross-originの違いについて！

この記事では『Same-site・Cross-site・Same-origin・Cross-originの違い』について、

などを図を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

TLDとeTLDとは

Same-site(同一サイト)とCross-site(異なるサイト)、Same-origin(同一オリジン)とCross-origin(異なるオリジン)を理解するためには、TLD(トップレベルドメイン)とeTLD(エフェクティブトップレベルドメイン)を知っておく必要があるので説明します。

TLD(トップレベルドメイン)
- ドメイン名の最後の部分です。例えば、.com、.org、.netなどがあります。
- TLDはRoot Zone Databaseにリスト化されています。
eTLD(エフェクティブトップレベルドメイン)
- Public Suffix Listにリスト化されたドメインです。
- 単一のTLD(例：.com)だけでなく、複合ドメイン(例：.co.jpや.github.io)も含まれます。
- comはTLD(トップレベルドメイン)ですが、同時にeTLD(エフェクティブトップレベルドメイン)としても扱われます。

Same-site(同一サイト)になる条件を以下に示します。以下の条件が満たされない場合、Cross-site(異なるサイト)になります。

Same-siteの条件

eTLD+1が一致すること
- eTLD+1は、eTLDに1つのラベルを加えたものです。
  - https://www.example.comの場合、example.comがeTLD+1に相当します。
  - https://www.example.co.jpの場合、example.co.jpがeTLD+1に相当します。
スキーム(https, http)が一致すること

サブドメイン・ポート番号が異なっていても、eTLD+1が一致すれば、Same-siteになります。

最新の仕様では、Same-siteの条件にスキームが含まれるようになりました。

以下にSame-siteとCross-siteの具体例を説明します。

https://example.comとhttps://example.com/about
- eTLD+1(example.com)が一致しているため、Same-siteとみなされます。
https://blog.example.co.jpとhttps://shop.example.co.jp
- サブドメインが異なります(blogとshop)が、eTLD+1(example.co.jp)が一致しているため、Same-siteとみなされます。
https://example.com:80とhttps://example.com:443
- ポート番号が異なります(80と443)が、eTLD+1(example.com)が一致しているため、Same-siteとみなされます。
https://example.comとhttps://anotherexample.com
- eTLD+1が異なる(example.comとanotherexample.com)ので、Cross-siteとみなされます。
https://example.comとhttps://example.co.jp
- eTLD+1が異なる(example.comとexample.co.jp)ので、Cross-siteとみなされます。
https://example.comとhttp://example.com
- スキームが異なる(https, http)ので、Cross-siteとみなされます。

Same-origin(同一オリジン)となる条件を以下に示します。以下の条件が満たされない場合、Cross-origin(異なるオリジン)になります。

Same-originの条件

以下にSame-originとCross-originの具体例を説明します。

https://example.comとhttps://example.com/about
- スキーム(https)、ホスト(example.com)、ポート番号(デフォルトだと443です)がすべて一致しているため、Same-originとみなされます。
https://example.comとhttp://example.com
- スキームが異なる(httpsとhttp)ので、Cross-originとみなされます。
https://example.comとhttps://anotherexample.com
- ホストが異なる(example.comとanotherexample.com)ので、Cross-originとみなされます。
https://blog.example.co.jpとhttps://shop.example.co.jp
- ホストが異なる(blog.example.co.jpとshop.example.co.jp)ので、Cross-originとみなされます。
https://example.comとhttps://example.co.jp
- ホストが異なる(example.comとexample.co.jp)ので、Cross-originとみなされます。
https://example.com:80とhttps://example.com:443
- ポート番号が異なる(80と443)ので、Cross-originとみなされます。

さまざまなURLを例にとり、Same-site・Cross-site・Same-origin・Cross-originの違いを表形式でまとめました。

URL1	URL2	判定
`https://example.com`	`https://example.com/about`	Same-SIte →eTLD+1が一致しているため Same-origin →スキーム、ホスト、ポート番号が一致しているため
`https://blog.example.co.jp`	`https://shop.example.co.jp`	Same-SIte →eTLD+1が一致しているため Cross-origin →ホストが異なるため
`https://example.com:80`	`https://example.com:443`	Same-SIte →eTLD+1が一致しているため Cross-origin →ポート番号が異なるため
`https://example.com`	`https://anotherexample.com`	Cross-site →eTLD+1が異なるため Cross-origin →ホストが異なるため
`https://example.com`	`https://example.co.jp`	Cross-site →eTLD+1が異なるため Cross-origin →ホストが異なるため
`https://example.com`	`http://example.com`	Cross-site →スキームが異なるため Cross-origin →スキームが異なるため

Same-originはSame-siteよりも厳しい制約なので、Same-originならばSame-siteになります。Same-siteならば、Same-originになるとは限りません。

本記事のまとめ

この記事では『Same-site・Cross-site・Same-origin・Cross-originの違い』について、以下の内容を説明しました。

お読み頂きありがとうございました。