6月
27
2012

Ajaxのクロスドメイン問題について

Ajaxのクロスドメイン制約とは?

Ajaxでは、セキュリティ上、Ajaxを使用するHTMLファイルが置かれているドメインのサーバとしか通信できない制約があります。

この制約をクロスドメイン制約と呼びます。

例えば、以下の場合では利用できます。

ドメインAにおかれたHTMLファイルから、ドメインAのWebAPIをAjaxで利用する。→OK

しかし、以下の場合は利用することができません。

ドメインAにおかれたHTMLファイルから、ドメインBのWebAPIをAjaxで利用する。→NG

また、以下のように、サーバ側スクリプトで別ドメインのWebAPIを利用することは可能です。

ドメインAにおかれたHTMLファイルから、ドメインAのWebAPIをAjaxで利用する。
ドメインAのWebAPIは、ドメインBのWebAPIをサーバ側のスクリプトで利用している。
つまり、間接的にドメインAにおかれたHTMLファイルから、
サーバ側のスクリプトを利用して、ドメインBのWebAPIを利用している→OK

つまり、このクロスドメイン制約は、ブラウザで実装されている機能であるため、サーバ側での動作には影響しません。

読み込まれたHTMLと同じドメインへの通信のみ許可されるという制約です。

JSONPについて

サーバ側のスクリプトを利用して、別ドメインのWebAPIを使えることわかりましたが、
実はもっと簡単に、ブラウザから直接、他ドメインへ通信する方法があります。

それが、JSONPです。

以下、JSONPでクロスドメイン制約を回避する原理についての説明です。

JSONPとは上記のAjaxによるクロスドメイン制約を回避するために考案された手法で、script要素のsrc属性でJSONデータを引数に取る関数を呼び出す外部JavaScriptをインポートするというものです。これはscript要素で外部JavaScriptファイルをインポートする場合に、別ドメインのファイルでも参照可能という仕様を利用しています。

JSONPの書き方や実装方法については、以下のサイトが詳しいですので割愛します。
http://thinkit.co.jp/article/70/3?page=0,1

また、JSONPでクロスドメインアクセスをする場合、セキュリティにも配慮した上で実装する必要があります。
詳しくは、以下のサイトにわかりやすくまとめてあるため、そちらを参照してください。
http://gihyo.jp/dev/serial/01/web20sec/0003?page=2

参考

http://thinkit.co.jp/article/70/3?page=0,0
http://d.hatena.ne.jp/okahiro_p/20120326/1332753822
http://d.hatena.ne.jp/tkng/20100918/1284792040

コメントする

メールアドレスは公開されません。

このエントリーをはてなブックマークに追加