どーも。ばぁどです。 5月に備えて徳丸本を復習しています。
久々に同一オリジンポリシーに遭遇したので、個人メモとしてまとめておきます。
同一オリジンポリシー
同一オリジンポリシーとは
同一オリジンポリシーとは、同一のサーバーから取得したリソースのみJavaScript などのクライアント側で動くスクリプトからアクセスすることができるというクライアント側のWebブラウザ上で実行可能という制限です。 なぜ、このような制限があるかというと攻撃者によりhtmlファイルが書き換えられ、攻撃者が用意した悪意のあるJavaScriptをhtmlに読み込ませ攻撃される場合があるためです。
具体的にはJavaScriptから異なるオリジンに存在するリソースのPOSTメソッドを呼ぼうとしたり、異なるオリジンに存在するJavaScriptを取得して実行しようとする場合にエラーとするような挙動をします。 example.jp と example.com は違うドメインなので、example.jp のサーバーから得たJavaScriptなどのリソースが example.com に存在するサーバー対してリクエストを行うと同一オリジンポリシーでアクセスが拒否されます。
同一オリジンポリシーは、外部ファイルを読み込ませて攻撃されないためのWebブラウザ側のデフォルト設定です。
どのように同一オリジンと認識するか
- URLのホスト(FQDN)が一致している
- スキームが一致している
- ポート番号が一致している
上記の三つの要素が同一のものであれば、同一のオリジンとして認識がされます。 オリジンを認識するのは、ブラウザ側の設定です。
参考
GoogleChrome や Firefox などは基本的に上記3つなのですが、IEのみポートを参照しないなど差異があります。 developer.mozilla.org
Cross-Origin Resource Sharing
Cross-Origin Resource Sharing とは
Cross-Origin Resource Sharing(CORS) とは、同一オリジンポリシーでサイト間のデータの扱いに制限がありつつも、そのサイト間データの扱いを許可するための仕組みのことです。
Webページの動的な動きは現在では欠かすことはできません。 動的な動きをWebページに加えることでUIの向上や、機能の拡充を行うことができます。 例えばGoogleMap を代表とするAjax技術です。 グルメサイトにGoogle Map が組み込まれているだけで、容易に現在位置からお店までの距離、道のりを確認しながらお店へとたどり着くことができます。
上記の例のようにJavaScriptで、動的な動きが記述されており、中には同一オリジンポリシーで制約がかけられてしまっているサイト間(サーバー間)のデータのやり取りを行いたいという需要があります。 そこで同一オリジンポリシーがありながらも、サーバー間のデータをやり取りできる仕様としてCross-Origin Resouce Sharing(CORS)が策定されました。
CORSは同一オリジンポリシーを遵守しているアプリケーションと互換を持ちながら、異なるオリジンのデータのやりとりを行うことができるようになります。
Access-Control-Allow-Origin
サーバー側の設定として Access-Controll Allow Origin という項目に許可するドメインを指定します。 HTTPレスポンスヘッダに指定することで XMLHttpRequest などのアクセス許可をすることができます。
まとめ
いったん自分向けのまとめでした。
異なるオリジンに対してのHTTPリクエストによるエラーは、社会人2年目のプログラマ時代にハマった記憶があります。 また、転職した2社目で本内容に関するレポートの作成に携わったこともあります。