Gravatar とは、ブログに投稿したりコメントしたりした時に、
どのサイトでもあなたの名前の横に表示される画像です。
Gravatarはメールアドレスをキーとしたアバター管理Webサービスです。
自分のアバターをGravatarに登録すれば他のサイトでも汎用的に使えるんです。
サイトごとにアバターをアップロードする手間がなくなるので結構便利です。
例えばこのブログでもGravatarが使えるので、
コメントの際にメールアドレスを入力すればGravatarで登録したアバターが表示されます。
一回登録し、アバターをアップロードしてください。
複数のアバターをアップロードした場合はどのアバターを使うか選択できます。
良かったらGravatarに登録し、ここにコメントを入れてみてください。
メールアドレスが同じであればGravatarに登録したアバターが表示されるはずです。
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=?”を要求してるそうです。
Mozilla Foundationで「Raindrop」という実験を始めたとの記事がありました。オープンなWeb技術を利用して、電子メール、SNS、「Twitter」、友人のブログなどのメッセージを管理するものです。
コミュニケーションを容易にするという、Google Waveとよく似てる意味で、Googleに対抗する存在とも言われてます。
Raindrop は、小規模の Web サーバーを使って異なるソース (Eメール、Twitter、RSS フィード) からユーザーのメッセージを取り込み、インテリジェンス処理で重要な部分を抜き出し、ユーザーが自分の好きな近代的な Web ブラウザでメッセージ操作を行なえるようにする。
こんな興味深い内容で、私はRaindropの公式サイトを訪ねることになりました。
英語の資料だけなんですが、Vimeoでの動画があるので、
一応それで直感的にRaindropが何か少しはわかるでしょう。
この動画で紹介したのはRaindropのデザイン・イテレーション1です。
画面の左側がメッセージの表示で、
右側がメニューみたいな感じです。
このレイアウトはまだ確定してなく、正式リリース時の変更はあり得るといってました。
便利な操作性がこの動画で表現されました。
上下のキーボードでメッセージの切り替えと、
左右のキーボードで返信や取り消しが自由にできます。
続いてデザイン・イテレーション2を見てみましょう。
デザイン1ではメッセージが1カラムになってることに対し、
デザイン2では最初3カラムで表示されてます。
それと幅の調整でメッセージのレイアウトもかわってきます。
もっと詳しい情報はRaindropの公式サイトをお訪ねください。
今回紹介するのは読書メーターです。
簡単にいうと、読書を記録、管理するサイトです。
FC2のブログアプリケーションにも似た感じの読書カレンダーがありますが、
比較してみて、やはり読書メーターのほうが機能も充実し、面白いと思います。
まずユーザ登録はFC2や、はてな、そしてmixiのIDでそのままログインできます。
そして自分が読んだ本をどんどん登録すると、面白いグラフができてますよ。
本の追加は以下の4種類あり、自分が今までの「実績」がすぐわかります。
コメントはもちろん入力でき、さらに本を読んでる、読んだ人の人数まで数えてくれます。
本の追加、コメントする時は自動でTwitterにも投稿できます。
本はページ数まで把握して、グラフで自分がどれほどのページを読み終わったかも見れます。
私はログインしてから一気に全部の本を追加しました。
ほかにも読友、相性、職本、お気に入り、コミュニティ、ブログパーツなどの
機能が充実してます。
相性や職本などのジャンルはなかなかアイディアのいい機能じゃないですか。
ぜひ試してみてください。
