maaash.jp

what I create

how twitter @anywhere works

ということでOAuth2のImplicitGrant方式(または古いドラフトではUserAgent方式)ってのはどうなってるのか実例を見ようと、twitterの@anywhereのJSのソース(http://platform.twitter.com/anywhere.js)を読んでみた。

JSがminifyされてるので JsDecoder で読みやすくしたり ChromeのDeveloper ToolsでどんなURLにアクセスしてるのか見てさらに掘り進んでいったり。

blog.twitter.comに@anywhereがはいってるのでそこで確認してみた。

  1. @Twitter にマウスオーバーするとオーバーレイが出て「フォローする」ってボタンがある
  2. それを押すとポップアップが開き、oauth2の、Clientを認証するか?って聞くダイアログが出るっぽいURL(https://oauth.twitter.com/2/authorize?oauth_callback_url=…%E7%95%A5%EF%BC%89%E3%81%A0%E3%81%8C%E3%80%81%E3%81%BE%E3%81%9A%E3%81%AFTwitter%E3%81%AB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AETwitterID(またはメアド)とパスワードが聞かれるフォームが表示される、ただしsubmitボタンが「連携する」になってる
  3. 「連携する」を押すと、リダイレクトされ、#以降に何やら入っているURLがちらっと表示された後に、ポップアップが閉じる
  4. 何事もなかったかのようだが、もう一度 @Twitter にマウスオーバーすると、「フォローしている」と表示される

ここでおもむろにConsoleで localStorage.twttr_anywhere とうつと、なにやらtokenがあるようだ。 localStorage.twttr_anywhere_expiry というのもあって、2時間の有効期限を表して自分で無効化したりするのかな

@Twitterをフォローするリクエストは、これを使って行なわれたようだ。iframe使ったクロスドメインかな Chrome Developer ToolsのNetworkタブに履歴が残っていたのでそれを再現すると、こんな感じ。

OAuth2のaccess_tokenのような権力をもつtokenだがAuthorizationヘッダが必要な何かみたい。

ということで、JSのみでaccess_tokenとってきたらlocalStorageにいれておいてあって、 それをフォローしたりするリクエストで使っていることがわかりました。 localStorageは

User agents must raise a SECURITY_ERR exception whenever any of the members of a Storage object originally returned by the localStorage attribute are accessed by scripts whose effective script origin is not the same as the origin of the Document of the Window object on which the localStorage attribute was accessed.

http://dev.w3.org/html5/webstorage/#security-localStorage

だからaccess_tokenをAuthzサーバからClientにリダイレクトしてきたURLの#から誰よりも早く取り出して、 localStorageに保存して、 他のスクリプトからは取れなく(window.closeなど)すれば 安全だってことでいいのかな?

Comments