目次
- corsとは
- Originとは
- 同一Originとは
- 同一Origiの重要性
- corsがないとどうなるか
corsとは
cors = Cross-Origin Resource Sharinの略です。
オリジン間のリソース共有を意味します。
自身のオリジンから見て、別のオリジン（Cross-Origin）からのリクエストを共有するかどうかの仕組みのことです。
Originとは
Originは以下で構成されています。
- スキーム
プロトコルと書かれていたりするが厳密には違う。
しかし、Web開発においては基本httpかhttpsを使うのでプロトコルでも問題ない - FQDN
Fully Qualified Domain Nameの略です。
サイトによってはホストやドメインと書かれていたりします。
厳密にはFQDNつまり完全修飾ドメイン名のことを指します。 - ポート
同一Originとは
あるオリジンで読み込まれたリソース（HTML, スクリプト, Cookie など）が
異なるオリジン（クロスオリジンとも呼ばれる）のリソースとの通信・アクセスを制限する
Web ブラウザが持つセキュリティ機能です。
異なるオリジンからロードされたリソースへのアクセスをブロックすることにより
元オリジンで読み込まれたリソースに対して
悪い影響を及ぼさないようにすることを目的としています。
2つのオリジン(Origin)の
- スキーム(プロトコル)
- FQDN(ホスト、ドメイン)
- ポート
がすべて一致した場合のみ同一オリジンだと言えます。
# 同一Origin
http://example.com/8000/api/user/1
http://example.com/8000/api/user/2
# 同一Originではない
http://example.com/8000/api/user/1
http://trap-example.com/8000/api/user/1
同一Originの重要性
ユーザがWebサイトにログインした状態で別の悪意のあるサイト(別オリジン)から
本人が意図しない情報やリクエストを勝手に送信されてしまったりCSRF(Cross-Site Request Forgeries)、外部の不正なスクリプトを実行させるXSS(Cross Site Scripting)を受けてしまいます。セキュリティ上良くないですよね。
corsがないとどうなるか
とはいえcorsがないと、フロントエンドとバックエンドでわけて開発するときに困りますよね。
それぞれポート8000や3000と別々に配置することが多いと思いますので。
そこでCORSの設定をすることで同一オリジンポリシーを守りつつ別のオリジン(Cross-Origin)からのリクエストを共有できます。
ありがとうございました。