PR

JSONPとFREDDY

2008年8月11日(月)
横山 昌平

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でも使われているので、ここでは省略する。

静岡大学
静岡大学情報学部助教。2006年東京都立大学大学院修了、博士(工学)。1996年から2008年まで東京ディズニーランド内ワールドバザール・コンフェクショナリー勤務、菓子類の販売に従事。産業技術総合研究所(前述と兼業)を経て2008年より現職。データベースとWebを基礎とした、データ通信手法や地理情報システム基盤の構築に興味を持つ。http://shohei.yokoyama.ac/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています