はじめに
今回はオリジン弁当に通い詰めはや1年
そんな俺がわかりやすく、WebセキュリティのOriginについてわかりやすく解説してやる！
これを読めば君もOriginをマスターするしオリジン弁当に行きたくなることまちがいなし！
目的（ゴール）
下記の3点の理解を目的に読んでいただければとおもいます！✨
- オリジン（Origin)とは何かを理解する
- オリジンを構成する3つの要素を理解する
- 同一オリジンと別オリジンの違いを理解する
オリジン（Origin）ってそもそも何？
オリジンとは、Webサイトのアクセス元を識別するための情報を言います！
具体的には、URLを構成する以下の3つの組み合わせで決まります！
- スキーム（http / https：要するに通信の仕組み、プロトコル）
- ホスト（example.com）
- ポート番号（443 / 3000など）
この3つがすべて一致していれば「同一オリジン」と判断されます！
なんかね、うん言われればわかるんだよねってやつですよねw
🍱 オリジン弁当で例えてみた！
あなたなら、何の手段でどこの？のオリジン弁当に行きたいですか？w
| Webの用語 | オリジン弁当での例え |
|---|---|
| スキーム（https） | お店への行き方(通信の仕方） |
| ホスト（example.com） | 店舗の住所 |
| ポート番号（443） | お店の入口番号 |
- お店に行くのは方は電車なのかバスなのかそれとも歩きなのか？
- どの店舗行く？（かわいいこいるからあそこいくか！〜）
- 注文する場所とご飯を受け取る場所が別（実際のオリジン弁当は一緒だとおもいますwサンプルです）
※あくまで理解するための例えです！実際のオリジンは3つの技術的な情報で決まります。
同一オリジンとは？
例えば、以下の2つのURLを見てください。
https://bento.example.com:443/guzai/order
https://bento.example.com:443/order
1つ目は具材の注文画面、2つ目は注文画面です。
URLの最後が違いますが、オリジンを構成する3つの要素は同じです。
- スキーム：https
- ホスト：bento.example.com
- ポート番号：443
そのため、この2つは同一オリジンになります！
オリジン弁当で例えると、同じ店舗の「具材売り場」と「注文受付」にいるようなものです。
別オリジンとは？
では、以下の場合はどうでしょうか？
https://bento.example.com:443/menu
https://bento.example.com:8443/menu
一見すると同じお店に見えますよね！
しかし、ポート番号が違います。
- 1つ目：443
- 2つ目：8443
この場合は別オリジンになります。
オリジン弁当で例えると、店舗の住所が同じでも、入口番号が異なるため、Webの世界では別のアクセス先として区別されるイメージです！
ちなみに、スキームやホストが違う場合も別オリジンになります。
まとめ
オリジン（Origin）とは、以下の3つの組み合わせです！
- スキーム
- ホスト
- ポート番号
3つすべて一致すれば同一オリジン、1つでも違えば別オリジン！
これを理解すると、次に学習する「CORS（コルス）」の仕組みも理解しやすくなると思います！
余談：CORSがかっこいいと思ったからブログ書いているとか内緒ね！🤫