JSONPとFREDDY
JSONPによるクロスドメイン通信
今回から、静岡大学情報学部で筆者らの研究室が取り組んでいる「FREDDY」という手法の説明に入る。その前に、まずは「第1回:JSONとFREDDY、変貌するWeb技術(http://www.thinkit.co.jp/article/116/1/)」で触れることのできなかったJSONPについて、少し説明しておこうと思う。
「第1回:JSONとFREDDY、変貌するWeb技術(http://www.thinkit.co.jp/article/116/1/)」の最後でJSONデータをAjaxにより読み込む手法を説明した。しかしながらAjaxにはクロスドメイン制約があり、HTMLファイルを取得したサーバーとしか通信することができない。
これは「不便」ではあるが「セキュリティー」上の理由で、Webブラウザはそういう実装になっている。ところがDynamic Script Tagを利用したJSONPはこのAjaxの制約を回避することができ、データ通信を考える場合、とても「便利」である。
しかし裏返すと、「便利」になったということは「セキュリティーホール」になりうるということである。JSONPやFREDDYで重要な情報を扱う場合、Cross Site Request Forgeriesと呼ばれる、第三者への情報漏えいの脆弱(ぜいじゃく)性に注意しなければならない。ただし、この脆弱(ぜいじゃく)性の問題については本特集ではこれ以上の説明は行わないので、興味のある方は各自調べていただきたい。
「そもそも論」で恐縮だが、インターネットは他人のコンピュータから情報を取ってくる目的で作られたネットワークであり、隠す目的で作られたものではない。あくまで本特集では、WebサーバーからWebブラウザへデータを送信する手法にのみ注目したい。
JSONPでデータを取得する
さて、JSONPの使い方を実際のWebサービスを使って説明したい。ここでは緯度経度から最寄り駅を算出するWebサービス(HeartRails Express(http://express.heartrails.com/))を利用する。JSONPのフォーマットはJavaScriptの関数コールであり、引数としてJSONデータを格納している。つまり、その関数をWebブラウザ上で用意しておけば、JSONPを読み込んだ時に勝手に関数が呼ばれ、その関数にデータが渡るという仕組みである。
例えば以下のような関数を定義する。
function hello (world){ /* データ処理ルーティン */ }
Webサービスの出力データはworldへ格納される。仕組みとしてはworldに格納されるデータの形式は何でも構わないが、基本的にはJSON形式のオブジェクトが利用される。
上述の最寄り駅検索Webサービスのクエリ・ストリングはサービスの指定(method = getStation)、緯度(y)、経度(x)、コールバック関数名(json)をとる。筆者の大学の所在地は北緯34.724991度、東経137.717595度なので、大学の最寄り駅を求めるWebサービスのURLは以下のようになる。
http://express.heartrails.com/api/json?method=getStations&y=34.724991&x=137.717595&jsonp=hello
このURLにアクセスすると、与えられた座標に基づき、最寄り駅が得られる。私はバイク通勤のため知らなかったが、遠州鉄道の八幡駅が最寄りらしい(浜松駅からバスの方が便利だが)。ジオコーディング(http://www.geocoding.jp/)を利用すると、住所から緯度経度を算出できるので、皆さんも試してみたらいかがだろうか。
さて、JSONPのデータをWebブラウザへ読み込み、コールバック関数に通知する手法にはDynamic Script Tagを利用する。この手法は、これから説明するFREDDYでも使われているので、ここでは省略する。