CORS(オリジン間リソース共有)について調べる。

今日はCORS(オリジン間リソース共有)について調べていきたいと思います！
概念をいい感じに理解できたらと思います！！
https://qiita.com/att55/items/2154a8aad8bf1409db2b

オリジンとは？

オリジン(origin)と似た概念にドメイン(domain)がある。
それぞれの具体例は以下のような感じ。

• ドメイン (domain): yahoo.co.jp
• オリジン (origin): https: https://yahoo.co.jp:443

ドメインとの違いは、プロトコルとポート番号を含んでいると言う点。

origin == protocol + domain + port number

ドメインとは？

ドメインとは、簡単に言うと「インターネット上の住所」のようなもの。

https://www.youtube.com/watch?v=3em_QWJO3Wg

ドメインはWebサイトがインターネット上のどこにあるのか判別するのに必要で、IPアドレスに情報が紐づいている。

ドメイン名が住所のようなものであるのに対して、IPアドレスは緯度経度のようなもの。

IPアドレスは以下のように数字の羅列で表示される。
104.26.12.102

でもこれだとそこがどんなサイトなのかがわかりにくいので、webサイトを公開する際はドメイン名でwebサイトの場所が示される。

また、ドメイン名は各サイトごとに異なるためサイトごとに設定が必要。
住所は建物ごとにあるが、それと同じようにインターネット上のドメインも設定されていると理解しておく。

プロトコルとは？

プロトコルとは、コンピュータ同士で通信を行う際の「ルール」のこと。

https://www.youtube.com/watch?v=viRRPRGsIDo

コンピュータ間ではいろいろな通信が行われる。
例えば、ファイルを送受信しメールを送受信したり、webページを公開したり、閲覧したり...

こういった一つ一つのやりとりには、「どういうデータを」「どういう順番で」「どのようにやりとりするのか」といった通信手順がルールとしてしっかり決められている。

このルールのことを「プロトコル」という。

• ファイルを送受信する際のプロトコル: File Transfer Protocol(FTP)

FTPを暗号化通信に対応させたのが、「SFTP」というプロトコル。

• webページを閲覧する際のプロトコル: HyperText Transfer Protocol(HTTP)

HTTPを暗号化通信に対応させたのが、「HTTPS」というプロトコル。

他にも、

• メールを送信する際の「SMTP」
• メールを受信する際の「POP3」や「IMAP」
• あるコンピュータから別のコンピュータを遠隔操作する際の「Telnet」
• 暗号化通信に対応した「SSH」

などのさまざまなプロトコルがある。

web開発でプロトコルを利用する際は以下のようになる。

• FTP / SFTP: HTMLやPHPなどのファイルをサーバーにアップロードする
• HTTP / HTTPS: アップロードしたwebサイトを公開する
• SMTP: バックエンドプログラムからメールを送信する
• SSH: サーバーのセットアップやメンテナンスを行う

ポート番号とは？　　

ポート番号とは、コンピュータ同士が通信する際に使う「通信用のドア」のようなもの。

https://www.youtube.com/watch?v=r6Tud5HzI3g

コンピュータ創始は、メールを送受信したり、webページのデータや、入力フォームの内容を送受信したり、FTPソフトを使ってファイルを送受信したりといったように、ネットワークを介してさまざまなデータの送受信を行なっている。

通信する際、相手のコンピュータの場所は「IPアドレス」という、ネットワーク上の住所によってわかる。

コンピューターの中は、さらに「通信用のドア」がいくつも用意されており、各ドアには番号がついている。

FTPで通信する際はこの部屋に送ってね。メールを送信する場合はこの部屋に送ってね。webページのデータを通信する場合はこの部屋に送ってね。
といった具合に、通信するデータの種類によって担当するドアが決まっている。

このドアのことを「ポート」といい、ドアにつけられた番号のことを「ポート番号」という。
コンピューターをマンションに例えるなら、ポート番号は「部屋番号」のようなイメージ。

一旦整理

「プロトコル」「ドメイン」「ポート番号」を合わせたものが「オリジン」。
通信の約束事、サイトのインターネット上の住所、通信を行う際に使用するポートなどといった情報が含まれている。

CORSとは

CORS(Cross-Origin Resource Sharing)は、日本語訳すると「オリジン間リソース共有」となる。

CORSとは、あるオリジンで動いているwebアプリケーションに対して、別のオリジンへのサーバーへのアクセスをオリジン間HTTPリクエストによって許可できる仕組みのこと。

webアプリケーションAからwebアプリケーションBのサーバーにアクセスできるように、webアプリケーションAとwebアプリケーションB間のHTTPリクエストによってそれを許可するみたいなことか。

CORSの必要性

Same-Origin Policy

Webセキュリティの重要なポリシーの一つにSame-Origin Policy(同一オリジンポリシー)がある。
これはオリジン間のリソース共有に制限をかけるもので、次のような脆弱性を防ぐことを目的としたもの。

• XSS(Cross Site Scripting)

ユーザーがwebサイトにアクセスすることで、不正なスクリプトがClient(Webブラウザ)で実行されてしまう脆弱性。
被害例は、Cookie内のセッション情報を抜き取られて不正ログインを行われる、など。

• CSRF(Cross-Site Request Forgeries)

webアプリケーションのユーザーが、意図しない処理をwebアプリケーション(Web Server)上で実行される脆弱性。通称「しーさーふ」。
被害例は、本来はログインしたユーザーしか事項できない記事の投稿処理を勝手にされる、など。

JavaScriptの組み込みAPIで、Ajax通信を実現するXMLHttpRequest(XHR) や、 Fetch API などは、これらの脆弱性を回避するため、Same-Origin Policyに従う。

現在のブラウザでは、同一オリジンポリシーが導入されているため、デフォルトでは違うオリジンからのアクセスは遮断されてしまう。
異なるオリジン間の通信を行うためにCORSの設定を行いそれを許可する必要がある。

Cookieとは？

Cookieとは、ブラウザにテキスト情報を保存する仕組み

https://www.youtube.com/watch?v=t8Xxp_dk214

HTTPS通信は状態を持たない。しかしWebサービスではログイン状態というものを実現する必要がある。
そのログインを実現するための手法の一つが、「Cookieを使ったセッション管理」。　

セッションとは、一連の処理の始まりから終わりまでを表す概念。

例えば、youtubeにログインして、youtubeの動画を見て回って、最後にログアウトするみたいなこの一連の流れのことを「セッション」という。

上記の例の場合、
まずはクライアントサイドから「ログインしたいよ〜」とyoutubeのサーバーにリクエストを送る。
するとyoutubeのサーバーが識別番号を送ってくる。「識別番号は"test123"だよ！覚えといてね〜」みたいな感じ。
そして、その識別番号をCookieに保存する。

Cookieで識別版後を保存するとどのようになるかというと、youtubeのサーバーにアクセスするときに毎回、自動的にCookieに入っている情報もYoutubeのサーバーに送られることになる。

つまり、Cookieを使ってセッション管理をすることで、ログイン状態を維持することができる。

HTTP通信というのは状態を維持できない。でもそこでCookieというものを使うことで、「ログイン状態」という状態を維持できるようになった。

まとめ

現在のブラウザには同一オリジンポリシーが導入されているから違うオリジンからのアクセスは遮断されてしまう。
なので異なるオリジン間の通信を行いたいときはCORSの設定を行なってそれを許可する必要がある。

いい感じにCORSの概念がわかりました！
具体的な実装方法はCORSを実装するべき時が来たら調べます！笑

ドメインとか、プロトコルとか、ポート番号とか、Cookieについても勉強できたのでよかったです！
最後までごらんいただきありがとうございました！