一瞬popup + 以降iframeでproxyするようなもの。XHR level2いらないのでやや動作環境が広がる。
- クライアント側ボタンクリックで window.open + ランダムなid(これをclient_id相当にする)の名前をつけてiframe埋め込み
- popup windowにiframeの名前をpostMessageで送る
- サーバー側: popup windowはiframeに対してpostMessageで返信(event.source.frames.xxxx)、api-domainのoriginであることを確認、cookieで認証してランダムなidとセットで使えるトークン発行
- トークン保存はmemcachedなど揮発性のストレージで良い。使っている限り期限が延長される。最長期限があってもよい(あったほうがよい)
- ログアウトとセットで破棄されるようになっていると良い
- iframeはポップアップwindowからメッセージを受け取る。ランダムなid + トークンを使ってAPIにアクセスする。
- iframeは親windowからメッセージを受け取る。あとはpostMessageでproxyしてXHRのリクエスト、レスポンスをやり取りする。
- iframeは親windowからのメッセージであることをevent.originを使って検証する
- トークンは親windowに渡ってはいけない。レスポンスだけ受け渡す。
図: http://cache.gyazo.com/feef74a84d49644470eba6cb7cb4aac5.png
iframe api-domain/proxy#client_id
popup auth-domain/authorize
popup windowは現状のブラウザの仕様上、ユーザー操作を起因にして開かないとまずブロックされる。ボタンやリンクを押す必要はあり。
親window自体が別サイトからpopup windowとして開かれて、ユーザーが操作して認可を与えた場合に、popup.frames[num].postMessageを使ってapi-domainにリクエストが送られてしまうと困る、api-domainは親windowからのmessageかどうかを検証する必要がある。
api-domainのoriginに不適切なページがあった場合に、例えばpostMessageで受け取ったデータを外部に漏らしちゃう、というようなものがあれば(XSSがある前提だとそもそも安全じゃないことになるが、こういったものだと単体ではクリティカルな脆弱性にならないはずのところ) tokenが外部に漏れてしまうことになる。何らかの方法でiframeがproxy用のURLであることの保証が出来ると良い。popup -> iframeはいきなりtokenを渡すのではなく、お互いにclient_idを知っているかどうかを確認してから渡す方が良いかも知れない。
XHR level2で直接リクエストしてレスポンスを受け取っているのか、postMessageを使ってiframe経由でリクエストしているのか、というのはライブラリレベルでは完全に隠蔽できるので、開発者は気にする必要がない。
新規で作る場合は、api用ドメイン分けろ余計なページ作るなでFAです。既存の既に存在してるapiに対するproxyをさっくり作りたい場合に、余計なこと考えなくても済む方が嬉しい。例えばcallback url使うものも同一ドメインにリダイレクタがあったら、とか考えないで済むに越したことない。
クライアント(親window)は信頼できない前提でOK。やりたいことはブラウザ閉じたりAPI提供サイトからログアウトした際に自動で認可も取り消される、というものです。