CORSとは何か

きっかけ

  • frontend ⇒ javascript, backend ⇒ pythonで個人的にWebアプリを作成してて、frontendからbackendにpostリクエストした時に CORSエラー が発生
  • 名前は聞いたことあるが、結局どういう時に発生するのかわからなかったので、ちゃんと調べてみた

(まず)読み方

  • 一般的には”シーオーアールエス”もしくは”コルス”と読みます。 とのこと

https://tech.jstream.jp/blog/cdn/cors_cdn/

CORSとは何か?

  • 同一生成元ポリシー というポリシーで設けられた制限を緩めるためのもの

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

  • クロスサイトリクエストフォージェリ(CSRF) などといったセキュリティ攻撃を防止するためのポリシー
  • 同じオリジン間でないとアクセスできない という制約

・・・・・またいろいろ新しい単語が出てきたので、それぞれ軽く説明をかく

クロスサイトリクエストフォージェリ(CSRF)とは?

  • Webアプリケーションに対する攻撃方法の一種
  • 攻撃手順は以下
  • 攻撃対象者をあらかじめ用意しておいた攻撃用Webページに誘導する(アクセスさせる)
  • 攻撃対象者が↑のWebページにアクセスしたときに、不正なリクエストが実行される
  • 攻撃用Webページで不正なリクエストが処理され、攻撃対象者が意図していない処理が行われる

以下のページがわかりやすかったです

クロスサイトリクエストフォージェリ(CSRF) | トレンドマイクロ

オリジンとは?

f:id:YukiMatsu88:20210618193455p:plain

スキーマ、ホスト名、ポートをまとめて、オリジン と呼ぶ

オリジンが同じ場合

http://www.test.com/
http://www.test.com:80/
http://www.test.com/test.html

オリジンが違う場合

https://www.test.com => スキーマが違うので、http://www.test.com/ へはアクセスできない

http://www.example.com => ホスト名が違うので、http://www.test.com/ へはアクセスできない

http://www.test.com:8080 => ポート番号が違うので、http://www.test.com:8000 へはアクセスできない

(参考)

同一生成元ポリシー(Same-Origin Policy) - とほほのWWW入門

CORS & Same Origin Policy 入門 | yamory Blog

改めて同一生成元ポリシーとは?

  • 外のサイトは危ないので、自分が今いる領域から外に出ることはできないようにする

みたいな(あくまで)イメージですね。

改めてCORSとは?

  • 外のサイトは危険だけど、それでもアクセスしたい場合がある
  • そういう時は、意図的に、制限をゆるくして、外のサイトであってもアクセスできるようにする

というイメージですね。

まとめ

つまり、Webクライアントとサーバーを分けて実装している場合は、異なるオリジン間で通信を行うことになる(今回、自作しているアプリは、まさにこの事例)

ので、 CORS 設定が必須となる


概要がわかったが、具体的にどうすればいいのかって話とかは別の記事で書こうと思います😶