CORS (Cross-Origin Resource Sharing)

April 04, 2019 (Last Modified: September 19, 2020)

Page content

「CORS? アクセスしに行っているウェブサイトと異なるドメインのリソースを Ajax で引っ張ってくるようなときのことだよなぁ〜」くらいの理解でしたが、自分で外部リソース側を作ることになった時にハマったので勉強がてらまとめ。

Same Origin Policy (同一オリジンポリシー)

まずコレを理解しておかないとだめですね。

参考ページ: MDN の説明

同一オリジンポリシーとは
あるオリジンから読み込まれた文書やスクリプトについて、そのリソースから他のオリジンのリソースにアクセスできないように制限するものです。同一オリジンポリシーはウェブのセキュリティにおける重要な仕組みであり、悪意ある行動を起こしかねないリソースの分離を目的としています。
「同一オリジン」の定義
- FQDN (ホスト) が同じこと
- プロトコル (http or https) が揃うこと
- ポート番号が揃うこと
- パスは異なっても良い

いよいよ本番。

デバッグはブラウザのコンソールからしかできない
CORS は様々なエラーで失敗することがありますが、セキュリティ上の理由から、エラーについて JavaScript から知ることができないよう定められています。コードからはエラーが発生したということしか分かりません。何が悪かったのかを具体的に知ることができる唯一の方法は、ブラウザーのコンソールで詳細を見ることです。
もうちょっとしておきたいこと
- シーケンス図をそらでかけるよう理解
  - 概要も
  - pre-flight とそうでないケース
- で、それらに対して http req/res header をまとめる。
- プリフライト (pre-flight): GET 以外のリクエストを投げるときは OPTIONS メソッドリクエストを用いて予め使えるメソッドを確認する・認可を受ける

関係するあれこれ

Mac OSX, Google Chrome の場合は open コマンドで以下のようなオプションを駆使すると動く。

コマンド

$ open -a "/Applications/Google Chrome.app" --args --ignore-certificate-errors --disable-web-security --user-data-dir http://localhost:8080

やっていること
- --disable-web-security : CORS のチェックを行わない. --user-data-dir オプションと一緒に指定する必要がある. Stability and security will suffer. と警告が出るとおり、限定的なケースでのみのご使用としましょう。
- --ignore-certificate-errors : CORS と直接関係ないが、オレオレ証明書の検証を無視する。 web page の場合は warning を突破すればよいだけだが、 xhr でのアクセス先が検証できない証明書である場合に有効。もちろん自己責任で。
- その他の便利な引数 (chrome 実行オプションの世界だが) : --incognito がプライベートブラウジングモードにする。
実行時の注意
- 1 個でも開いているタブがあってはいけない。
- chrome プロセス自体落とす必要がある。
- 故に、 chrome プロセス自身を起こすときに「前回開いていたタブを開く」動作が発生するとうまく行かない。対象ページを単独で開くために、開いているタブを 0 にした上でプロセスを落とすと堅実。

Cross-Site Request Forgery のはなし。