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 Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

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