JavaScriptによる外部データの取得方法について

Webブラウザは常にセキュリティ、ユーザへの安全なインターネット提供を前提に作られています。そのため外部リソースを組み合わせて使うAPIとは相性が悪いことがあります。iOSやAndroidといったスマートフォンアプリやサーバサイドのプログラミング言語では当たり前のようにできることがWebブラウザではできないのです。

今回はAPI利用時に注意したいJavaScriptによる外部リソース取得方法について紹介します。

JSONP

HTML4の時代において、JavaScriptから外部リソースを取得する方法は限られていました。そこで考えられたのがJSONPと呼ばれる方法です。動的にJavaScriptタグを生成し、その中でリクエスト時に指定した関数名で処理を呼び出してもらいます。そしてその関数の引数としてAPIで渡したいデータをJSON形式で指定します。

JSONPは大いに利用されてきましたが、問題点はスクリプトタグを出力するという関係上、GET処理しかできませんでした。そのためデータを作成、更新、削除するような使い方に対して提供すると悪意のあるデータ操作を可能にしてしまう危険性があります。

プロキシ

内部で立てたサーバに対してアクセスを代行してもらうプロキシ方式もよく使われました。この方法の場合、同一ドメインであればJavaScript側からもPOST/PUT/DELETEアクセスができます。そしてその内容をサーバ側がAPIにそのままリクエストしてレスポンスを返すのです。

問題点としてはサーバを用意したり、プロキシアクセスするコードを書かなければならない点と、プロキシアクセスの場合、認証情報が渡しづらいということが挙げられます。多くの場合、匿名アクセスできるサービスであったり、特定のアクセスキーを使うようなサービスで使われています。

CORS

HTML5の時代になって使われるようになったのがCORSです。クライアントからOPTIONSヘッダーでリクエストし、それに対してサーバがアクセスを許可するかどうかを返します。その結果によってWebブラウザ側がデータ取得を許可します。

この方法は現在広く使われており、APIアクセスの他、Canvasに描画する画像リソースのアクセス権限についてもCORSで制御できます。

CORSはアクセス元のドメインで単位で、どのメソッドを許可するかを指定できます。ただし、ここで制御したとしてもスマートフォンアプリやサーバサイドのスクリプトからのアクセスは制御できませんのでご注意ください。

iframe

iframeを動的に生成し、親フレームと子フレームでpostMessageを使ってデータの送受信を行う方法があります。子フレーム側のコンテンツでもpostMessageを使う必要があるので、JSONを単純に取ってくると言うほど簡単ではありません。

例えばFacebookのFBアプリはコンテンツの高さを動的に変更できます。これは子フレーム側に組み込まれたFacebook SDKがコンテンツの高さを親フレームにpostMessageで投げ、親フレーム側でiframeのサイズを変更しています。若干APIに比べるとトリッキーな実装になるでしょう。

HTML5でXMLHttpRequest2になり、CORSが使えるようになりました。が、HTML5に対応していないブラウザでは使えない技術なので、レガシーなブラウザをサポートする場合は別な技術と組み合わせる必要がありそうです。

クロスドメインによるアクセスはJavaScriptで常に問題になりますので、APIを利用する際はもちろん、提供する際にも注意してください。不用意にすべてを開放するのではなく、設定で利用できるドメインを制限すると言った仕組みを提供するのも良いかと思います。