OAuthの仕組み丸分かり体験サイト

ソーシャルログイン等に使用されているプロトコル「OAuth」の仕組みを体験してみよう

※はじめての方は説明をお読みください



・このサイトについて

このサイトでは,あなたのFacebookのアカウントを利用して,我々が用意したアプリ(=免許証作成サイト)上で,Facebookに登録されているあなたの名前と写真が貼られた特製の免許証(図1)を作成します.

図1 生成されたOAuth免許証(例)

あなたは,免許証作成サイトで自分の名前を入力したり写真を送信したりする代わりに, Facebook上に登録されたあなたのプロフィール情報(名前と写真)を,「許可証(=認証コード)」と引き換えで,免許証作成サイトに渡します.受け取ったプロフィール情報(名前と写真)を用いて,免許証作成サイトでは免許証を作成します(図2).

図2 OAuth体験サイトにおける3主体間の関係


このように,あなたのできること(=権限)を「許可証(=認証コード)」として第三者に提供すること(=委譲)を,「権限移譲」と言います.
OAuthによる権限委譲は,図3のような動作をします.このフローを見ただけでは実際に何が起きているのか,すぐには分かりませんよね.

図3 OAuthのフロー

OAuth体験サイトでは,OAuthのフローが操作を行う画面と連動しながら表示されるので,現在どの状態もしくは通信をしているのかを確認することができます(図4).

図4 OAuth体験中のページの例

※体験する前に

  • この体験サイトを利用するためには,Facebookのアカウントが必要になります.
  • 一度ブラウザでFacebookにログインすると,Facebookの認証が省略される可能性がありますので,シークレットブラウザでの利用をおすすめします.
  • OAuth免許証には,あなたのFacebook上の名前,ID,写真が使用されます.
  • Facebookから受け取ったあなたの情報やアクセストークン,認可コードはセッション終了後破棄いたします.ご安心ください.


それでは,下のボタンから,OAuthを体験してみましょう.



・おまけ:OAuthを利用したソーシャルログイン

ソーシャルログインとは...
例えば,ソーシャルログインに対応したWebサイト(ここでは免許証作成サイト)では,図5のようにログイン画面に「〇〇でログイン」というボタンが用意されているとします.ここであなたが「Facebookでログイン」というボタンをクリックしたとしましょう.

図5 ソーシャルログインができるサイトのログイン画面

そうすると,あなたはFacebookのログイン画面(図6)に移動します.そして,あなたは自分の持っているFacebookアカウントでログインを行うだけで,図5のWebサイトにログインすることができます.「許可証(=認可コード)」は,一種の入場券みたいなものですね. このようにSNSアカウントでその他複数のWebサイトにログインする方法を「ソーシャルログイン」と呼びます.「ソーシャルログイン」を採用する,Webサービス(アプリケーション)の管理側も,アカウント情報を不要に収集し管理しなくてよいというメリットがあります.

図6 Facebookのログイン画面

ソーシャルログインを実現する方法は複数存在しますが,OAuthを用いたものが一部でOAuth認証と呼ばれています.

免許証作成サイトにとって,「OAuth認証」が成立するための前提は以下となります:

  1. Facebookがきちんと「あなた」本人であることを確認(=認証)していて,Facebook上で「あなた」がプロフィール情報(名前と写真)を利用する「許可証(=認証コード)」を発行できること
  2. 最初にアクセスしたブラウザと「許可証(=認可コード)」を提示したブラウザが同じであること(これはクッキーを利用します)
  3. 「許可証(=認可コード)」は有効期限内あること

最初に「許可証(=認可コード)」を提示したら,Facebook上で認証された「あなた」以外は「許可証(=認可コード)」を提示できないので,登録後に同じものを提示できるのは「あなた」だけであると判断できます.これは,最初の登録後,「許可証(=認可コード)」を次回以降の接続時に提示できることにより,本人性の確認を実現しています.いわゆる,TOFU (Trust On First Use) と呼ばれる仕組みです.

しかしながら,OAuth認証における「許可証(=認可コード)」は,通信路が無防備なので,「許可証(=認可コード)」が盗まれたり,書き換えられたり,でっち上げられたりしてしまいます.OAuth認証は,安全性より,手軽さを優先する実現と言えるでしょう.


コラム:OAuth2.0におけるCSRF攻撃

実は・・・
「OAuthのしくみ丸わかり体験サイト」は,CSRFという脆弱性を残してあり,皆さんにもCSRF攻撃を体験していただくことができます. OAuthにおけるCSRF脆弱性については,こちら [1][2] が参考になります.

以下に,本サイトでのCSRF攻撃の手順を示しますので,よろしければ,試してみてください.
※本攻撃は本サイトで皆さんに試して貰うことを意図しておりますが,他のサイトで類似の行為は避けてください.
なお,CSRF攻撃を体験する際には,2人(2つのアカウント)で行うことを想定しています. 以下では,攻撃する人をA君,被害を受ける人をBさんとして説明します.

  1. A君は,「OAuthのしくみ丸わかり体験サイト」から移動しFacebookでの承認を完了した後に表示されるページ「(3)認可コードの発行」におけるURL情報を,Bさんに渡す(URLの例: https://www.saitolab.org/oauth/callback.php?code=[乱数列] )
  2. Bさんは渡されたURLのリンク先にアクセスし,OAuthのフローを進める
  3. Bさんは,「A君のFacebookアカウント」で作成されたOAuth免許証を作成することになります
このケースにおいて,このCSRF脆弱性の脅威はどのようなものになるでしょうか?少し想像力が必要かもしれません. たとえば,「OAuthのしくみ丸わかり体験サイト」が,写真を加工してFacebookのアルバムに「非公開」で投稿するサービスであるとします. そのサービスを利用して,Bさんが,アルバムにプライベートな写真を投稿することを想定してください. このCSRF脆弱性が悪用された場合(上記のURLのリンクへアクセスした場合など),「A君のFacebookアカウントのアルバム」にプライベートな写真を投稿することになります. 結果として,Bさんが「非公開」のつもりで投稿した画像を,A君は見ることができてしまいます. なんて恐ろしい話でしょうか. サービス提供者がアプリをキチンと作ってくれていないと,利用者には避けがたいことです.

参考

[1] OAuthやOpenID Connectで使われるstateパラメーターについて - SIOS TECH.LAB
[2] OAuth 2.0に潜む「5つの脆弱性」と解決法 - アットマークIT