JSONとJSONPのクロスドメイン利用・・・セキュリティにはご注意を

眠気マックスなヘッポコです！

今週はしんどかった。。。仕事の帰りは遅いし、帰ってからもやる事はあるし。
なので更新が少し滞ってましたね。

やらなきゃいけない事に押しつぶされそうでしたが、少しでもやりたい事と絡む機会があったので、今回はそんな内容です。

 
JSON（JavaScript Object Notation）やJSONP（JSON with padding）を利用する事は多いでしょうか？
Ajaxと絡めてWEBページで非同期な通信を実現させたい場合などによく使われると思います。

簡単に説明します。
JSON　は{"プロパティ名":"値"}
JSONPはcallback({"プロパティ名":"値"})と書きます。callback()と書いたのは関数名で、コールバック関数と言われます。別にcallbackという名前じゃなくても、こういう書き方をするものをそう呼びます。

 JSONはAjax、つまりXMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）を利用した時の返却結果によくつかわれます。

ただし、 Ajax（XMLHttpRequest）自身がクロスドメインでは利用できないため、外部サーバとのデータのやり取りがJavaScriptだけでは実現できない・・・という所で、JSONPが登場しました。

通信先サーバ（JSONPデータ提供側） を管理しているならば、ヘッダーやコールバック関数の定義をサーバ側で適切に行います。AjaxでJSONPを利用する場合はクライアント側のJavaScriptに
dataType : 'jsonp',
jsonpCallback: 'callback',
など、正しくセットしてください。（jQueryのAjaxの例）

さて、Ajaxとかわからない。非同期の必要なし。・・・なんて場合にクロスドメインでブラウザ側とサーバでデータのやり取りできないか？というのが今回のお話。

うちの会社にも結構いますけど、JavaScript苦手、jQueryとか良く分かんない、Ajax？非同期のやつでしょ？・・・みたいに思っている人。まぁ自分も少し前まで同じような感じなのであまり言えませんが、入口こそ少し苦手意識を持ってしまうものの、分かってしまうとその柔軟さに夢膨らむのではないかと思います。jQuery覚えて、Ajax覚えたら何を作ってやろう！とワクワクする気持ちがあります。

 で、Ajaxを使わずに、JSON、JSONPをクロスドメインで利用する方法ですが、至って簡単です。

（お、ソースコード貼るの上手くいったかな？）
JSONPを利用する場合はコールバック関数(callback)を記述します。
ちなみに、JSONを利用する場合は

var jsonData = {JSONデータ}

JSONPを利用する場合は

callback({JSONデータ})

こんな感じになります。

つまり、JSONの場合はもうJavaScriptのコードとしてデータを変数にセットする宣言を返却するという事になります。

これでクロスドメインでもJSON使えるという事。

ただし注意！
JSONであろうと、JSONPであろうと機密情報や個人情報をブラウザ-サーバ間でやりとりするのはセキュリティ的にNGですので。以前、Gmailでは連絡者リストが流出したとかいう話を聞いたことあります。
しっかりサーバ間でやりとりするか、非同期で行う場合はAjaxで自サーバにアクセスし、サーバサイドのCGIを使って十分なセキュリティ対策を施した状態で実施すべきです。

やろうと思えば出来てしまうものについては、十分な知識を得てから安全に利用しましょう！
ヘッポコもヘッポコなりにそういう所は日々努力しています。

今日はもう眠いです。
おやすみなさい。