gihyoサイトの「ここが危ない！Web2.0のセキュリティ」連載の第4回：「Flash，JSONでのクロスドメインアクセス」の勉強メモです。
データ提供側で認証のファイルを設置するだけです。
ファイル名は「crossdomain.xml」で、これが例なのかこう書かなければならないのかは明確に書いてません。
eval()関数でデータを評価するだけで使用可能になる
var obj = eval("("+req.responseText+")");
setterメソッドをサポートしているブラウザ（FirefoxやSafari 3等）では，setterメソッドを再定義することによって，JSONもSCRIPTタグで呼び出して使うことが可能になる。
gihyoサイトの「ここが危ない！Web2.0のセキュリティ」連載の第2回：「Same-Originポリシーと迂回技術」の勉強メモです。
他のドメインのサイトへはリクエストを送信できない制限のことをSame-Originポリシーと呼びます。同じドメインであってもポート番号やプロトコル（HTTPとHTTPSなど）が異なれば，異なるサイト（クロスドメイン）とみなされアクセスできません。クロスドメインアクセスは機能として実装されていないのではなく，セキュリティ上の理由から禁止されているそうです。
俺があの黒の攻撃者とし、攻撃目標がユーザのメールアカウント情報だとします。もしクロスドメインにアクセスする制限がなければ、事前に用意したスクリプトで(urlをメールサーバに設定)メールアカウントの情報が取得できるようになってしまいます。(この辺りはCookieの話が出てきます)
Ajaxだけではなく、フレームやサブウインドウの情報にアクセスする場合などにも存在する
* リバースPorxy
* SCRIPTタグ（JSONP）
* Flash
* 画像
* スタイルシート
データ提供サーバにとってユーザの身元は隠れているため、攻撃者に利用しやすい
ユーザの身元を確認しようとすると、ユーザ情報を扱わなければならない
ユーザ情報–>サーバ–>データ提供サーバ
前回の記事の続きとしてJSONPを勉強しました。
XMLHttpRequestはセキュリティ上の制限により、
クロスドメインの通信ができないです。
でもウェブサービスのようなどうしてもクロスドメインで通信したい場合があります。
その時の手段してあげられるのがこのScriptタグです。
(他の手段としてiframeやflashとリバースプロキシがあるそうです)
これを一番分かりやすく説明してくれたのははてなキーワードだと思います。
JSON with paddingの略
Javascriptの非同期通信でよく使われるXMLHttpRequestオブジェクトにはSame-Originポリシーが存在し、クロスドメインアクセスができない。
一方，scriptタグを用いると，ドメインの異なるサーバに置いているスクリプトファイルを読み込むことができる。この仕組みを利用し、scriptタグのsrcに、データを取得できるAPIのURLを指定し，ドメインの異なるサーバからデータを取得する仕組みの総称として、JSOPという言葉が使われる。JSONP用のAPIでは、関数名＋取得データをjson形式で表記して引数とした形式(例.callbackFunc({id:1000,name:aaa}))のレスポンスが一般的で、APIから返されるコールバック関数と同じ名前の関数(callbackFunc(jsonData))をクライアント側で定義しておけば、データを読み込んだ際にそのコールバック関数が実行される。動的にscriptのDOMを生成することで、非同期でデータが取得できるようになる。
ただし、Same-Originポリシーが存在しないため、機密情報をAPIに含める際には十分な注意が必要である。
やはりソースコードで読むほうが早いだと思います。
以下gihyo.netからのサンプルコードです。
<html> <body> <script> function callback(x){ // コールバック関数を定義 alert(x["name"]); } </script> <script src="http://mail.example.com/json.dat"></script> </body> </html>
json.datの中身
callback( { "name" : "Fukumori" } );
要はクライアント側で先にデータを扱うコールバック関数を定義
その名はデータの提供側とのコールバック関数名と一致する必要がある
scriptタグでデータ提供サーバのデータをインポート
すると先に用意したコールバック関数が走ってデータを処理する
もっと詳しい動作原理とセキュリティはgihyoの特集を参照してください。
とても分かりやすいです。おすすめ！
ここが危ない！Web2.0のセキュリティ：第3回 JSONPでのクロスドメインアクセス｜gihyo.jp … 技術評論社
jQueryのAjaxメソッドには$.getJSONがあります。
このメソッドはjQuery1.2からJSONPも対応したようです。
As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSONP callback.
利用方法はurlの最後に”?”付きのコールバックパラメータを追加することです。
例えば”example.com?callback=?”こんな感じです。
callbackの値は指定しなくてもよいみたい、
jQueryが自動で変換してくれます。
ただしコールバックのパラメータ名はデータ提供側によって異なるかもしれません。
例えばヤフーPipesは”_callback=?”を要求してるそうです。
恥ずかしいことに今仕事でjQueryでばりばりAjaxを使ってますが、
実際はただjQueryの便利なAPIを使っただけで
Ajaxそのものの仕組みも分かっていません。
今更ですが、その辺の基礎知識を勉強しできるだけ誰にも分かるように
自分が理解したことをメモとして残したいです。
JavaScriptなどのウェブブラウザ搭載のスクリプト言語で、サーバとのHTTP通信を行うための組み込みオブジェクト（API）である。
すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できるAjaxの基幹技術である。
なるほど、これがAjaxを支える基幹ですね。
JavaScriptのオブジェクトです。
名前にXMLがついていますが、XML以外のデータも扱うことができます。
XMLHttpRequestは、マイクロソフトがOutlook Web Access 2000のダイナミックHTMLによるウェブインターフェースに活用するため、1999年公開のInternet Explorer 5においてActiveXオブジェクトとして実装したのが始まりである[1]。その後、2001年にMozillaプロジェクトがこれと互換性のある組み込みオブジェクトをMozilla 0.9.7およびNetscape 7で実装し、アップルも2004年にSafari 1.2でMozillaと同様の組み込みオブジェクトを実装し始めた[2]。
このように徐々にInternet Explorer以外のブラウザにも実装されていったXMLHttpRequestは、2005年にAjaxによって一躍有名になった。
ようは各ブラウザが先にXMLHttpRequestオブジェクトを実装した、
そして偉い人がAjaxを提唱してから一気に有名になった訳ですよね。
AllAboutの記事に載ってた仕組みを自分で書きました。
XMLHttpRequestのメソッドやプロパティは多分これからも使うことはありませんが、
一応図で見て大体把握しておきましょう。
openメソッドはイニシャライズみたいな感じで、GETかPOSTか、URLなどのパラメータを受け取ります。
そしてsendメソッドによるサーバに送信する前に、onreadystatechangeイベントのコールバックでステータスを判断しresponseTextやresponseXML プロパティのデータを返す流れですね。
拡張機能から XMLHttpRequest を使いたい場合は、非同期でロードするようにすべきです。
非同期の使用法では、データを受け取ったときにコールバックを受け取ります。
そのため、リクエストが発生している間はブラウザは通常どおりに動き続けます。
ブラウザにより異なる。
IE では、ActiveXObject(“Microsoft.XMLHTTP”) を使用。
IE のバージョンによっては、ActiveXObject(“Msxml2.XMLHTTP.5.0″) , ActiveXObject(“Msxml2.XMLHTTP.4.0″) ,
ActiveXObject(“Msxml2.XMLHTTP.3.0″) , ActiveXObject(“Msxml2.XMLHTTP”) なども使用出来る。
Mozilla 系ブラウザでは、XMLHttpRequest() を使用。
var req;
if( window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
try {
req = new ActiveXObject("MSXML2.XMLHTTP");
} catch (e) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (req) {
req.open('GET', 'http://www.example.com/contents.txt');
req.onreadystatechange = function() {
if (req.readyState == 4) {
document.write(req.responseText);
}
}
req.send(null);
}
req.statusはHTTPレスポンスコードで200はOK、404はよく見るNot Foundです。
とりあえず自分が気になった点を書きました。
肝心なところはonreadystatechangeでのコールバックだと思います。
XMLHttpRequestは同一ドメイン内に制限されていますね。
別のドメインとのやり取りはどう行うのかを次のテーマにします。
なんかJSONPとかクロスドメインなどのキーワードがよく見えますが、
その辺をはっきりしようと思います。