【備忘録】「CORSってなに？」をできるだけ分かりやすくまとめてみた。

プログラミング学習中にCORSに触れることがあり、全く無知の状態から１から調べ上げました。
自分と同じように「CORSとは何なのか」がまず分からない方々のために、その内容について難しい言葉を使わずまとめてみたので、宜しければ参考にしてください。

<br>

**【注意】**
**全く無知の状態から、全てネットから調べて自分なりにまとめた情報になります。**
**誤っている箇所がございましたら、是非ご指摘のほど宜しくお願い致します。**

<br>
<br>

# まず初めに

**CORS** というのは、**<font color="red">システムの仕組み</font>** の1つです。

CORSで検索すると、「脆弱性」や「危険」といったイメージの悪い言葉が一緒についてくるので、CORS自体が何か凄い悪さをするものなのかと感じてしまうかもしれませんが、CORSが悪い意味ではありません。

※自分は無知だったので、「CORS = 悪いもの」という認識から始まりました。

<br>
<br>

## CORSとは何か

**■CORS**
= **Cross-Origin Resource Sharing** の省略。

意味は、

>オリジン間リソース共有 (CORS)
オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

一言で説明すると、**<font color="red">異なるオリジン間を通信する仕組み</font>** です。
この一言だとあまりイメージがつきにくいかと思いますので、すごく簡単に言うと、

**<font color="red">「便利なものをみんなで簡単に共有できるようにしよう！！」</font>**

という仕組みです。

<br>
<br>

# 詳しい説明

ここから先ほどの説明で出てきた、

**<font color="red">「 異なるオリジン間を通信する仕組み 」</font>**

についてを解説していきます。ここが分かると
**<font color="red">「便利なものをみんなで簡単に共有できるようにしよう！！」</font>**
の意味もわかってくるかと思います。

<br>
<br>

## オリジンとは
オリジンとは、
>ウェブコンテンツのオリジン (Origin) は、ウェブコンテンツにアクセスするために使われる URL のスキーム (プロトコル)、 ホスト (ドメイン)、 ポート によって定義されます。スキーム、ホスト、ポートがすべて一致した場合のみ、二つのオブジェクトは同じオリジンであると言えます。

https://developer.mozilla.org/ja/docs/Glossary/Origin

とあります。
URLでよく見る「○○○○.com」や「○○○○.jp」のやつです。

<br>
<br>

ここでドメインじゃないのかとも思うかもしれませんが、ドメインとオリジンの違いは、

| ドメイン | オリジン |
|:-:|:-:|
| sample.com  |  http(s)://sample.com:8080 |

<br>

という違いがあります。
ここでオリジンを先ほどの説明に沿って分割すると、

<br>

| スキーム（プロコトル） | ホスト（ドメイン） | ポート |
|:-:|:-:|:-:|
| http(s)://  | sample.com  |  :8080 |

<br>

と言うことになります。

**「　オリジン = ドメイン + スキーム + ポート　」**

と言うことにみたいです。

<br>
<br>

## 同一生成元ポリシーとは

ここまでの説明で、オリジンについては理解できたかと思います。では
**<font color="red">「 異なるオリジン間を通信する仕組み 」</font>**
ということはどういうことなのか。

<br>
<br>

ここは普段何気なくWebを利用している上では全く分からないところになるのですが、このオリジンには**ある決まり**があります。それが、

**<font color="red">同一生成元ポリシー</font>**

と言うものになります。同一生成元ポリシーとは

>クロスサイトリクエストフォージェリ(CSRF)などのセキュリティ攻撃を防止するために、ブラウザは「同一生成元ポリシー(Same-Origin Policy)」という仕組みを実装しています。異なるオリジンのリソースへのアクセスに制約をかけるものです。

https://www.tohoho-web.com/ex/same-origin-policy.html

と言うものです。
簡単に言うと、
**あるオリジン（例：https://sample.com ）にあるリソース（画像、ファイル、もしくはシステムといったweb上のあらゆる資源のこと）にアクセスできるのは<font color="red">同一のオリジン</font>だけである。**

と言うシステムの基本概念です。
この仕組みはwebのデフォルト設定となっています。

<br>
<br>

## 同一オリジンと異なるオリジン
同一生成元ポリシーの説明で、

**「<font color="red">同一のオリジン</font>だけである。」**

と説明をいたしましたが、
オリジンにおける **「同一」** と **「異なる」** について説明します。
<br>
例）http://example.com　 にアクセスすると考えた時

| 同一オリジンの例 | 異なるオリジンの例 |
|:-:|:-:|
|http://example.com/app1/index.html|https://example.com/app2|
|http://example.com/app2/index.html|http://www.example.com|
|http://example.com|http://example.com:8080|
|http://example.com:80|http://myapp.example.com|

<br>

これらは全て同一のオリジン。
**<font color="red">スキーム・ホスト・ポートが全て同じものを「同一オリジン」といいます。</font>**

逆に、スキーム・ホスト・ポートのうちどれかが異なっていたらそれは、「異なるオリジン」ということです。

https://developer.mozilla.org/ja/docs/Glossary/Origin

<br>
<br>


つまり**CORS**というのは、

**<font color="red">この「同一生成元ポリシー」という縛りを解放し、異なるオリジンでもリソースにアクセスできるようにする仕組み</font>**

ということです。

## 要約
少し長くなってしまいましたので要約しますと、

**①webのデフォルト設定には「同一生成元ポリシー」という決まりがある。**

**②あるオリジンにあるリソースには、同じオリジンからしかアクセスができない。**

**③この同一生成元オリジンという縛りを解放し、異なるオリジン間でもアクセスできるようにするのがCORS。**

ということです。

<br>
<br>

# 具体例

https://coliss.com/articles/build-websites/operation/work/cs-visualized-cors.html

https://note.com/kamimi01/n/n23e3eb22e2ab

自分が探した中では上記2つのサイトがとても分かりやすい実例で解説しておりましたので、参考にしてみてください。

ここで自分でも簡単な具体例を挙げてみようと思います。
<br>
ショップ店員のAさんはあるシステムを作りました。
アクセスすると今月の売り上げが一発で分かるシステムです。
"https://uriageA.com:3000/api" にアクセスすると実行されます。
![スクリーンショット 2022-12-11 22.23.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/ddebfca7-db4d-ae9b-2252-94c60fbd2e8b.png)

ここで同じショップ店員のBさんが、このシステムを使いたいと言いました。
Bさんは別のオリジンで既に違うシステムを作っていましたが、そのオリジンにAさんのシステムを利用できるようにしたいみたいです。

Bさんとは仲が良かったので、Bさんのオリジンでもこのシステムが使えるようにしました。（**CORS**）

![スクリーンショット 2022-12-11 22.38.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/0252d1ef-5644-65d7-873e-f98c6bb73bda.png)


## 【補足】 CORSの危険性

ここでAさんは自分のシステムを社内の人たちに使ってもらおうと思い、CORSの設定を*（ワイルドカード）で設定しました。
※ワイルドカードは、簡単にいうと全て適応範囲にするということです。

その結果、システムを第三者に利用され、店の売り上げが**情報漏洩**するという問題が発生しました。
![スクリーンショット 2022-12-11 23.25.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/06a32f85-7ce1-15c4-85d9-66d8a55dfd2b.png)

リソースのアクセス権限を増やすということは、便利な反面リスクもあるということのようです。


# その他参考文献

https://numb86-tech.hatenablog.com/entry/2019/02/13/221458

https://qiita.com/att55/items/2154a8aad8bf1409db2b