OAuth 2.0 の新しい response mode の紹介です。

1. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
OAuth 2.0
Web Messaging
Response Mode
OpenID Summit 2015
November
10,
2015
Toru
Yamaguchi
Senior
Architect
Sub
Business
Unit
Head
Open
Pla=orm
Business
Unit
DeNA
Co.,
Ltd.

2. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
講演者紹介
! ⽒氏名
⁃ ⼭山⼝口
徹
(やまぐち
とおる)
! HN
⁃ @zigorou
! 会社
⁃ 株式会社ディー・エヌ・エー
! 部署
⁃ オープンプラットフォーム事業本部
! 役職
⁃ 副事業本部⻑⾧長
シニアアーキテクト
! 仕事
⁃ Mobage
やその他協業案件などにおける
システム設計がメイン
2

3. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
本⽇日の概要
! OAuth
2.0
の
Authorization
Endpoint
からのレスポンスの受信形式
として新しいドラフトである
OAuth
2.0
Web
Messaging
Response
Mode
を作ったので、それの詳細について以下の流流れで解説します
! OAuth
2.0
の
Redirect
URI
について
! OAuth
2.0
Form
Post
Response
Mode
! OAuth
2.0
Web
Messaging
Response
Mode
3

4. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
OAuth
2.0
と
Redirect
URI
OAuth
2.0
Web
Messaging
Response
Mode
4

5. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
OAuth
2.0
とは本質的に何をやりたい枠組みなのか
! もの凄く簡略略化して⾔言えば、Client
が
(End
User
の権限を持つ)
Access
Token
を
Authorization
Server
から得るためのフレームワークが
OAuth
2.0
だと⾔言えます
⁃ その結果得た
Access
Token
を⽤用いて
Protected
Resource
(要は
API)
にアクセスする
5
End
User
AuthorizaDon
Server
Client
1.
Redierct
to
AuthorizaDon
Request
2.
AuthorizaDon
Request
3.
AuthorizaDon
Response
4.
Redirect
to
Redirect
URI
5.
Token
Request
6.
Token
Response

6. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
AuthorizaGon
Code
Grant
のシーケンス
! Authorization
Response
は
Redirect
URI
に対する
UserAgent
を介し
た
HTTP
リダイレクションで渡される
6
hQp://goo.gl/kfZTNY

7. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
AuthorizaGon
Request
! 上記は
RFC
6749
での
Authorization
Code
Grant
での
Authorization
Request
のサンプルです
7
GET
/authorize?
response_type=code&
client_id=s6BhdRkqt3&
state=xyz&
redirect_uri=https%3A%2F%2Fclient%2Eexample
%2Ecom%2Fcb
HTTP/1.1
Host:
server.example.com

8. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
AuthorizaGon
Response
! 上記は
RFC
6749
での
Authorization
Code
Grant
での
Authorization
Response
のサンプルです
8
HTTP/1.1
302
Found
Location:
https://client.example.com/cb?
code=SplxlOBeZQQYbYS6WxSbIA&
state=xyz

9. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Implicit
Grant
のシーケンス
! Implicit
Grant
は
Token
Response
が
Authorization
Endpoint
から
HTTP
リダイレクションで返って来る
⁃ Access
Token
などは
URI
Fragment
(#
以下の⽂文字列列)
として
返って来るため
JavaScript
などによる
parse
が必要
9
hQp://goo.gl/95ddOd

10. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Redirect
URI
と問題点
! 様々ありますが例例えば以下のような課題があります
⁃ User
Agent
を介した
HTTP
リダイレクションのため、中間者攻
撃が成⽴立立し得る
⁃ HTTP
リダイレクションが発⽣生するため
UX
が
Single
Page
Application
向きではない
⁃ Implicit
の場合は
Protected
Resource
にアクセスするための
Access
Token
が
JavaScript
などで触れる領領域に渡されるため、
XSS
などで
Access
Token
そのものが奪われるリスクがある
! 今回の
Web
Message
Response
Mode
は上記のような課題感がモチ
ベーションになっています
10

11. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
OAuth
2.0
Form
Post
Response
Mode
OAuth
2.0
Web
Messaging
Response
Mode
11

12. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Form
Post
Response
Mode
とは何か？
! Spec
⁃ https://openid.net/specs/oauth-‐‑‒v2-‐‑‒form-‐‑‒post-‐‑‒response-‐‑‒
mode-‐‑‒1_̲0.html
! Authorization
Endpoint
からのレスポンスを
HTTP
リダイレクショ
ンではなく、JavaScript
を⽤用いた
form
の⾃自動
POST
に差し替えたもの
! まずはプロトコルについて流流れを追ってみましょう
12

13. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
AuthorizaGon
Code
Grant
のシーケンス
/w
form
post
! Authorization
Response
の渡し⽅方が
form
の⾃自動
submit
になって
います
⁃ それ以外は本質的な違いはありません
13
hQp://goo.gl/3ci98I

14. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
AuthorizaGon
Request
! 通常の
Authorization
Request
と異異なる点は
response_̲mode
に
form_̲post
という値を指定している点です
14
GET
/authorize?
response_type=id_token
&response_mode=form_post
&client_id=some_client
&scope=openid
&redirect_uri=https%3A%2F
%2Fclient.example.org%2Fcallback
&state=DcP7csa3hMlvybERqcieLHrRzKBra
&nonce=2T1AgaeRTGTMAJyeDMN9IJbgiUG
HTTP/1.1
Host:
server.example.com

15. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
AuthorizaGon
Request
! 通常の
Authorization
Request
と異異なる点は
response_̲mode
に
form_̲post
という値を指定している点です
15
GET
/authorize?
response_type=id_token
&response_mode=form_post
&client_id=some_client
&scope=openid
&redirect_uri=https%3A%2F
%2Fclient.example.org%2Fcallback
&state=DcP7csa3hMlvybERqcieLHrRzKBra
&nonce=2T1AgaeRTGTMAJyeDMN9IJbgiUG
HTTP/1.1
Host:
server.example.com

16. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
AuthorizaGon
Response
(1)
! 指定された
Redirect
URI
に対して
HTTP
メソッドの
POST
で⾃自動的に
Submit
するようなレスポンスを返します
16
HTTP/1.1
200
OK
Content-­‐Type:
text/html;charset=UTF-­‐8
Cache-­‐Control:
no-­‐cache,
no-­‐store
Pragma:
no-­‐cache
<html>
<head><title>Submit
This
Form</title></head>
<body
onload="javascript:document.forms[0].submit()">
<form
method="post"
action="https://client.example.org/callback">
<input
type="hidden"
name="state"
value="DcP7csa3hMlvybERqcieLHrRzKBra"/>
<input
type="hidden"
name="id_token"
value="eyJhbGciOiJSUzI1NiIsImtpZCI6IjEifQ.eyJzdWIiOiJqb2huIiw
iYXVkIjoiZmZzMiIsImp0aSI6ImhwQUI3RDBNbEo0c2YzVFR2cllxUkIiLC
Jpc3MiOiJodHRwczpcL1wvbG9jYWxob3N0OjkwMzEiLCJpYXQiOjEzNjM5M
DMxMTMsImV4cCI6MTM2MzkwMzcxMywibm9uY2UiOiIyVDFBZ2FlUlRHVE1B
SnllRE1OOUlKYmdpVUciLCJhY3IiOiJ1cm46b2FzaXM6bmFtZXM6dGM6U0F
NTDoyLjA6YWM6Y2xhc3NlczpQYXNzd29yZCIsImF1dGhfdGltZSI6MTM2Mz
kwMDg5NH0.c9emvFayy-­‐YJnO0kxUNQqeAoYu7sjlyulRSNrru1ySZs2qwqq
wwq-­‐Qk7LFd3iGYeUWrfjZkmyXeKKs_OtZ2tI2QQqJpcfrpAuiNuEHII-­‐_fk
IufbGNT_rfHUcY3tGGKxcvZO9uvgKgX9Vs1v04UaCOUfxRjSVlumE6fWGcq
XVEKhtPadj1elk3r4zkoNt9vjUQt9NGdm1OvaZ2ONprCErBbXf1eJb4NW_h
nrQ5IKXuNsQ1g9ccT5DMtZSwgDFwsHMDWMPFGax5Lw6ogjwJ4AQDrhzNCFc
0uVAwBBb772-­‐86HpAkGWAKOK-­‐wTC6ErRTcESRdNRe0iKb47XRXaoz5acA"/>
</form>
</body>
</html>

17. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
AuthorizaGon
Response
(2)
! JavaScript
が実⾏行行された結果、UserAgent
は上記のようなリクエストを
Redirect
URI
に送出します
17
POST
/callback
HTTP/1.1
Host:
client.example.org
Content-­‐Type:
application/x-­‐www-­‐form-­‐urlencoded
id_token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjEifQ.eyJzdWIiOiJqb2huIiwiYX
VkIjoiZmZzMiIsImp0aSI6ImhwQUI3RDBNbEo0c2YzVFR2cllxUkIiLCJpc
3MiOiJodHRwczpcL1wvbG9jYWxob3N0OjkwMzEiLCJpYXQiOjEzNjM5MDMx
MTMsImV4cCI6MTM2MzkwMzcxMywibm9uY2UiOiIyVDFBZ2FlUlRHVE1BSnl
lRE1OOUlKYmdpVUciLCJhY3IiOiJ1cm46b2FzaXM6bmFtZXM6dGM6U0FNTD
oyLjA6YWM6Y2xhc3NlczpQYXNzd29yZCIsImF1dGhfdGltZSI6MTM2MzkwM
Dg5NH0.c9emvFayy-­‐YJnO0kxUNQqeAoYu7sjlyulRSNrru1ySZs2qwqqwwq
-­‐Qk7LFd3iGYeUWrfjZkmyXeKKs_OtZ2tI2QQqJpcfrpAuiNuEHII-­‐_fkIuf
bGNT_rfHUcY3tGGKxcvZO9uvgKgX9Vs1v04UaCOUfxRjSVlumE6fWGcqXVE
KhtPadj1elk3r4zkoNt9vjUQt9NGdm1OvaZ2ONprCErBbXf1eJb4NW_hnrQ
5IKXuNsQ1g9ccT5DMtZSwgDFwsHMDWMPFGax5Lw6ogjwJ4AQDrhzNCFc0uV
AwBBb772-­‐86HpAkGWAKOK-­‐wTC6ErRTcESRdNRe0iKb47XRXaoz5acA&
state=DcP7csa3hMlvybERqcieLHrRzKBra

18. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Form
Post
Response
Mode
の利利点は何か
! GET
メソッドで⽤用いる
URI
の最⼤大⻑⾧長を気にしなくて良良い
⁃ RFC
では制限はないが
UserAgent
側の制限と
HTTP
Server
側
の制限がある
! サンプルの
Authorization
Request
で指定されている
response_̲type
で
id_̲token
が指定されていて、POST
で直接サーバーに渡している
点に注⽬目
⁃ 本来
URI
Fragment
で渡すのが筋
(OpenID
Connect
1.0)
⁃ つまり
Browser
相⼿手の場合は
JavaScript
で
parse
する必要があ
る
• ID
Token
は
JWT
なので
JWS
or
JWE
でエンコードされているため、あ
まりユースケースが無いと⾔言える
⁃ ⼀一⽅方
Form
Post
を⽤用いた場合は
Implicit
相当の⼿手続きで
ID
Token
を
Server
に渡す事が出来る
! response_̲mode
という新しい語彙を定義した
⁃ 要するにこれが⾔言いたかっただけです！
18

19. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
OAuth
2.0
Web
Messaging
Response
Mode
OAuth
2.0
Web
Messaging
Response
Mode
19

20. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
OAuth
2.0
Web
Messaging
Response
Mode
! Spec
⁃ https://tools.ietf.org/html/draft-‐‑‒sakimura-‐‑‒oauth-‐‑‒wmrm-‐‑‒00
! サマリ
⁃ postMessage()
を⽤用いた新しい
response_̲mode
である
web_̲message
を定義
• 元々同じコンセプトの先⾏行行実装として
Google+
SignIn
があり、その後
Mobage
Connect
でも似たような仕組みを構築
⁃ レスポンス形式に
simple,
relay
モードの⼆二つを定義している
• 特に
relay
モードは
Access
Token
の隠蔽を⾏行行うことが出来る点に新規
性がある
20

21. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Redirect
URI
と問題点
(再掲)
! 様々ありますが例例えば以下のような課題があります
⁃ User
Agent
を介した
HTTP
リダイレクションのため、中間者攻
撃が成⽴立立し得る
⁃ HTTP
リダイレクションが発⽣生するため
UX
が
Single
Page
Application
向きではない
⁃ Implicit
の場合は
Protected
Resource
にアクセスするための
Access
Token
が
JavaScript
などで触れる領領域に渡されるため、
XSS
などで
Access
Token
そのものが奪われるリスクがある
! 今回の
Web
Message
Response
Mode
は上記のような課題感がモチ
ベーションになっています
21

22. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
SPA
向けの
UX
は何か
! どんな要件を満たすべきか
⁃ Single
Page
Application
なのだから、アプリケーションその物
は画⾯面遷移でページ全体が書き換わるような挙動をさせたくない
⁃ とはいえログインフォームのように重要な情報を
submit
するフ
ォームをロケーションバーを表⽰示せずに表⽰示するのはあり得ない
! これらを満たすのは
window.open()
による新しい
window
の作成を
⾏行行い、その
window
で
Authorization
Grant
を⾏行行い、Authorization
Response
を元のページに渡すという仕組み
⁃ これが
Web
Messaging
Response
Mode
の原点
⁃ 呼び出し元の
window
と新しい
window
間は
frame
間通信
(window.postMessage())
を使えば実現出来る
22

23. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
UnauthenGcated
Window
と
Messaging
(simple
mode)
! Unauthenticated
Window
とは新しい
window
を開いて、End
User
が未認証状態でも必要な⼿手続きを経て
Authorization
を⾏行行う事が出来る
window
の事です
23
Main
Window
(Public
Client)
UnauthenDcated
Window
AuthorizaDon
Server
window.addEventListener(
“message”,
authorizationResponseListener,
false
);
var
win
=
window.open(
“https://as.example.com/authorize?...”,
“_new”
);
window.opener.postMessage(
authorizationResponse,
redirectURI
);
1.
Window
の⽣生成と
AuthorizaDon
Request
の設定
2.
AuthorizaDon
Request
3.
AuthorizaDon
Response
4.
AuthorizaDon
Response
の
メッセージ送信

24. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Immediate
Login
[1]
! OpenID
Connect
による拡張の⼀一つで、AuthZ
Request
に
prompt
パラメ
ータに
none
を指定すると
Immediate
Login
が出来る
⁃ 認証・認可状態に応じてユーザーとのインタラクションを求めず即時
にレスポンスが返って来る
⁃ ユーザーがサイトに往訪した際にこの⼿手続きを裏裏で進めるような使い
⽅方をします
24
GET
/authorize?
response_type=code&
scope=openid%20profile&
client_id=s6BhdRkqt3&
state=xyz123&
prompt=none&
redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb
HTTP/1.1
HTTP/1.1
302
Found
Location:
https://client.example.org/cb?
error=login_required&
state=xyz123
1.
AuthorizaDon
Request
2.
AuthorizaDon
Request

25. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Immediate
Login
[2]
! Immediate
Login
は通常は
iframe
を作成して⾏行行う
⁃ iframe
の
load
イベントが発⽣生した際に
iframe
の
src
属性が
Redirect
URI
になっていれば良良いのだが、、、実はなっていない
⁃ 従って
Redirect
URI
で
postMessage
を⽤用いて
Main
Window
に通知するような仕組みがほとんどだと思われる
25
Main
Window
(Public
Client)
AuthenDcated
Window
1.
iframe
の⽣生成と
AuthorizaDon
Request
の設定
4.
AuthorizaDon
Response
を
load
イベントで取得
(これは出来ない)
AuthorizaDon
Server
var
iframe
=
document.createElement(“iframe”);
iframe.addEventListener(
“load”,
authorizationResponseListener,
false
);
iframe.src
=
“https://as.example.com/authorize?...”;
2.
AuthorizaDon
Request
3.
AuthorizaDon
Response

26. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
AuthenGcated
Window
と
Messaging
(simple
mode)
! Authenticated
Window
とは
iframe
を作って、End
User
が認証・
認可状態の際に
Authorization
を⾏行行う事が出来る
window
の事です
26
Main
Window
(Public
Client)
AuthenDcated
Window
AuthorizaDon
Server
window.addEventListener(
“message”,
authorizationResponseListener,
false
);
var
win
=
document.createElement(“iframe”);
iframe.src
=
“https://as.example.com/authorize?..”;
window.parent.postMessage(
authorizationResponse,
redirectURI
);
1.
iframe
の⽣生成と
AuthorizaDon
Request
の設定
2.
AuthorizaDon
Request
3.
AuthorizaDon
Response
4.
AuthorizaDon
Response
の
メッセージ送信

27. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
ここまでのまとめ
! 結局この
Response
Mode
で何が嬉しいか
⁃ window.open()
を⽤用いる事によって
Redirect
が⾏行行われないので
SPA
に向いたフローになっている
• Mobage
JavaScript
SDK
では同等のフローを実現しています
⁃ ログインフォームや認可画⾯面をユーザーに⾒見見せる場合
(Unauthenticated
Window)
でも、Immediate
Login
(Authenticated
Window)
でも⼿手続きが同じようになる
• 特に認可サーバー側がこの
Response
Mode
を実装する際に楽になる
! 引き続いて
relay
mode
について説明していきます
27

28. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Hybrid
Flow
と
scope
について
[1]
! Hybrid
Flow
とは
OpenID
Connect
で新しく定義されたフローで、
Implicit
と
Authorization
Code
を⼀一度度の⼿手続きで⾏行行うための仕組みで
す
⁃ どのように実現しているかと⾔言えば
response_̲type
に複数の値
をスペース区切切りで指定します
28
Redirect
Endpoint
(public
client)
AuthorizaDon
Server
1.
AuthorizaDon
Response
AuthorizaDon
Endpoint
Token
Endpoint
Client
Server
(confidenDal
client)
2.
Token
Request
3.
Token
Response
code,
access_token(implicit),
id_token(implicit)
が取得出
来る
access_token(authorizaDon_c
ode)
などが取得出来る
Protected
Resource
Server
API
access
API
access

29. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Hybrid
Flow
と
scope
について
[2]
! Authorization
Request
で指定出来る
scope
は
Authorization
Code/
Implicit
の区別を付ける事が出来ない
⁃ ⼀一⽅方で
Implicit
で発⾏行行した
access
token
では付与したくない権
限もしばしばある
⁃ その理理由はやはり
confidential
client
に⽐比べて
public
client
の
⽅方が脆弱であるという前提があるからだと思います
! そもそも
public
client
についてやらせたい事は、access
token
を渡
す事ではなく、access
token
を使った
API
コールをやらせたい
⁃ つまり上⼿手く
access
token
が流流出しないような仕組みが作れたら
Hybrid
Flow
⾃自体、安全になるでしょうし許容出来る
scope
も
もっと増やしても良良いかもしれない。
29

30. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
UnauthenGcated
Window
と
Messaging
(relay
mode)
! Main
Window
に対して
Relay
Request/Response
を⾏行行う事で
Main
Window
の
window
オブジェクトの参照を得ます
⁃ その
window
の
frames
プロパティを使うと異異なる
origin
でも
メッセージを送信出来ます
30
Main
Window
(Public
Client)
UnauthenDcated
Window
Protected
Resource
Server
2.
Window
の⽣生成と
AuthorizaDon
Request
の設定
2.
AuthorizaDon
Request
3.
AuthorizaDon
Response
4.
Relay
Request
5.
Relay
Response
Message
Targeted
Window
1.
iframe
の⽣生成
AuthorizaDon
Server
6.
AuthorizaDon
Response
の
メッセージ送信
API
Access

31. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
Relay
Mode
と
JavaScript
SDK
! 前ページの図から分かる通り、Authorization
Response
(特に
access
token)
が
Message
Targeted
Window
に閉じ込められます
⁃ つまり
Main
Window
に直接
access
token
は渡されない
! ⼀一⽅方で
Main
Window
と
Message
Targeted
Window
は親⼦子関係に
あるので、window.postMessage()
を⽤用いて
API
の
request/
response
をハンドリングすれば
access
token
を隠蔽したまま
API
アクセスさせるという⽬目的を達する事が出来る
⁃ よりセキュアにやりたい事だけやらせる事が出来ます
31

32. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
補⾜足
! ここまで説明した⼿手続きですが
IE11
までは
window.postMessage()
に致命的なバグがあり、期待通りに動きません
⁃ Edge
では解消しているらしいです
32

33. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
今後の展開について
! 以下のようになって⾏行行くと良良いなと思っています
⁃ draft
のブラッシュアップ
⁃ ⼀一部の
Message
送受信⽤用
window
を
Web
Worker
で代⽤用
• UI
スレッドとは別に動くので、より⾼高速な⼿手続きが期待出来る
• まだ未検証です
33

34. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
まとめ
! Web
Message
Response
Mode
は以下の特徴があります
⁃ Redirect
ベースではないので
SPA
の
UX
を損ねない
⁃ Immediate
Login
であろうと無かろうと同じ⼿手続きで実現が出来
る
! さらに
relay
mode
では以下の特徴があります
⁃ Main
Window
に
access
token
を直接渡さないので安全性が増
します
⁃ 必然的に
Message
Targeted
Window
で
API
呼び出しを分離離、
抽象化する事が出来ます
34

35. Copyright
(C)
DeNA
Co.,Ltd.
All
Rights
Reserved.
ご清聴ありがとうございました
! 時間があれば質疑応答
35