CORS (Cross-Origin Resource Sharing)

wiki, tech, tech
Page content

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

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

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

参考ページ: MDN の説明

  • 同一オリジンポリシーとは

    あるオリジンから読み込まれた文書やスクリプトについて、そのリソースから他のオリジンのリソースにアクセスできないように制限するものです。同一オリジンポリシーはウェブのセキュリティにおける重要な仕組みであり、悪意ある行動を起こしかねないリソースの分離を目的としています。

  • 「同一オリジン」の定義

    • FQDN (ホスト) が同じこと
    • プロトコル (http or https) が揃うこと
    • ポート番号が揃うこと
    • パスは異なっても良い

CORS とは

いよいよ本番。

参考ページ: MDNの非常にわかりやすい記事

  • デバッグはブラウザのコンソールからしかできない

    CORS は様々なエラーで失敗することがありますが、セキュリティ上の理由から、エラーについて JavaScript から知ることができないよう定められています。コードからはエラーが発生したということしか分かりません。何が悪かったのかを具体的に知ることができる唯一の方法は、ブラウザーのコンソールで詳細を見ることです。

  • もうちょっとしておきたいこと

    • シーケンス図をそらでかけるよう理解
      • 概要も
      • pre-flight とそうでないケース
    • で、それらに対して http req/res header をまとめる。
    • プリフライト (pre-flight): GET 以外のリクエストを投げるときは OPTIONS メソッドリクエストを用いて予め使えるメソッドを確認する・認可を受ける

その他

関係するあれこれ

CORS を開発環境限定で突破する

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 にした上でプロセスを落とすと堅実。

CSRF との関係性

Cross-Site Request Forgery のはなし。