プログラミング学習中にCORSに触れることがあり、全く無知の状態から１から調べ上げました。
自分と同じように「CORSとは何なのか」がまず分からない方々のために、その内容について難しい言葉を使わずまとめてみたので、宜しければ参考にしてください。
【注意】
全く無知の状態から、全てネットから調べて自分なりにまとめた情報になります。
誤っている箇所がございましたら、是非ご指摘のほど宜しくお願い致します。
まず初めに
CORS というのは、システムの仕組み の1つです。
CORSで検索すると、「脆弱性」や「危険」といったイメージの悪い言葉が一緒についてくるので、CORS自体が何か凄い悪さをするものなのかと感じてしまうかもしれませんが、CORSが悪い意味ではありません。
※自分は無知だったので、「CORS = 悪いもの」という認識から始まりました。
CORSとは何か
■CORS
= Cross-Origin Resource Sharing の省略。
意味は、
オリジン間リソース共有 (CORS)
オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。
一言で説明すると、異なるオリジン間を通信する仕組み です。
この一言だとあまりイメージがつきにくいかと思いますので、すごく簡単に言うと、
「便利なものをみんなで簡単に共有できるようにしよう！！」
という仕組みです。
詳しい説明
ここから先ほどの説明で出てきた、
「 異なるオリジン間を通信する仕組み 」
についてを解説していきます。ここが分かると
「便利なものをみんなで簡単に共有できるようにしよう！！」
の意味もわかってくるかと思います。
オリジンとは
オリジンとは、
ウェブコンテンツのオリジン (Origin) は、ウェブコンテンツにアクセスするために使われる URL のスキーム (プロトコル)、 ホスト (ドメイン)、 ポート によって定義されます。スキーム、ホスト、ポートがすべて一致した場合のみ、二つのオブジェクトは同じオリジンであると言えます。
とあります。
URLでよく見る「○○○○.com」や「○○○○.jp」のやつです。
ここでドメインじゃないのかとも思うかもしれませんが、ドメインとオリジンの違いは、
| ドメイン | オリジン |
|---|---|
| sample.com | http(s)://sample.com:8080 |
という違いがあります。
ここでオリジンを先ほどの説明に沿って分割すると、
| スキーム（プロコトル） | ホスト（ドメイン） | ポート |
|---|---|---|
| http(s):// | sample.com | :8080 |
と言うことになります。
「 オリジン = ドメイン + スキーム + ポート 」
と言うことにみたいです。
同一生成元ポリシーとは
ここまでの説明で、オリジンについては理解できたかと思います。では
「 異なるオリジン間を通信する仕組み 」
ということはどういうことなのか。
ここは普段何気なくWebを利用している上では全く分からないところになるのですが、このオリジンにはある決まりがあります。それが、
同一生成元ポリシー
と言うものになります。同一生成元ポリシーとは
クロスサイトリクエストフォージェリ(CSRF)などのセキュリティ攻撃を防止するために、ブラウザは「同一生成元ポリシー(Same-Origin Policy)」という仕組みを実装しています。異なるオリジンのリソースへのアクセスに制約をかけるものです。
と言うものです。
簡単に言うと、
あるオリジン（例：https://sample.com ）にあるリソース（画像、ファイル、もしくはシステムといったweb上のあらゆる資源のこと）にアクセスできるのは同一のオリジンだけである。
と言うシステムの基本概念です。
この仕組みはwebのデフォルト設定となっています。
同一オリジンと異なるオリジン
同一生成元ポリシーの説明で、
「同一のオリジンだけである。」
と説明をいたしましたが、
オリジンにおける 「同一」 と 「異なる」 について説明します。
例）http://example.com にアクセスすると考えた時
これらは全て同一のオリジン。
スキーム・ホスト・ポートが全て同じものを「同一オリジン」といいます。
逆に、スキーム・ホスト・ポートのうちどれかが異なっていたらそれは、「異なるオリジン」ということです。
つまりCORSというのは、
この「同一生成元ポリシー」という縛りを解放し、異なるオリジンでもリソースにアクセスできるようにする仕組み
ということです。
要約
少し長くなってしまいましたので要約しますと、
①webのデフォルト設定には「同一生成元ポリシー」という決まりがある。
②あるオリジンにあるリソースには、同じオリジンからしかアクセスができない。
③この同一生成元オリジンという縛りを解放し、異なるオリジン間でもアクセスできるようにするのがCORS。
ということです。
具体例
自分が探した中では上記2つのサイトがとても分かりやすい実例で解説しておりましたので、参考にしてみてください。
ここで自分でも簡単な具体例を挙げてみようと思います。
ショップ店員のAさんはあるシステムを作りました。
アクセスすると今月の売り上げが一発で分かるシステムです。
"https://uriageA.com:3000/api" にアクセスすると実行されます。
ここで同じショップ店員のBさんが、このシステムを使いたいと言いました。
Bさんは別のオリジンで既に違うシステムを作っていましたが、そのオリジンにAさんのシステムを利用できるようにしたいみたいです。
Bさんとは仲が良かったので、Bさんのオリジンでもこのシステムが使えるようにしました。（CORS）
【補足】 CORSの危険性
ここでAさんは自分のシステムを社内の人たちに使ってもらおうと思い、CORSの設定を*（ワイルドカード）で設定しました。
※ワイルドカードは、簡単にいうと全て適応範囲にするということです。
その結果、システムを第三者に利用され、店の売り上げが情報漏洩するという問題が発生しました。
リソースのアクセス権限を増やすということは、便利な反面リスクもあるということのようです。
その他参考文献