SPAのサイトを アプリのwebviewで利用するとき のトークンの渡し方 ヒグ！（樋口修也）

発表者 フロントエンド,認証認可 2015年 旭川→岩手大学へ入学 2019年 東京のIT企業に新卒入社 2020年 コープさっぽろへ転職し札幌へ ダブルダッチ、筋トレ、ダンス AWS CDK, Vue.js ワクチンで昨日39.1℃まで上がりました 樋口修也(24) 担当: 経歴: 趣味: 好み: 最近: 新参者なのでお手柔らかにお願いします

webviewとは・・ WEBで公開しているサイトなどをアプリから 呼び出して、サイトをあたかもアプリのように 見せて動作させる技術 サイト アプリ

1. Authorization headerでトークンを渡す サイト GET https://xxx.com { “Authorization”:“Bearer ey...” }

1. Authorization headerでトークンを渡す サイト GET https://xxx.com { “Authorization”:“Bearer ey...” } SPAでは不可

SPAの構成 index.html xxx.js クライアント API通信

SPAの構成 index.html xxx.js クライアント API通信 webview アプリ Authorization あり Authorization なし API通信に必 要なトークンな し

SPAではない時の構成 index.html xxx.js クライアント サーバー webview アプリ Authorization あり Authorization なし token保持 SPAではない時なら簡単にトークンの保持ができる

案１クエリでトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx? token=ey... ● SPAでもURLは残るのでwebview内で活用できる ● TLSで暗号化されている場合ドメイン以外は隠されるので通信を傍受されてもクエリは覗かれない ● サーバーログに残ってしまう

RFC6749でも禁止するような文言が アプリなのでブラウザの履歴にはのこならないが、サーバーログには残るのでやはり避 けるべき

案2ローカルストレージでトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx ● 「evaluateJavascript」関数を利用してローカルストレージを操作 window. localStorage

issue ばっか立っててうまくいっていないっぽい

案3 js発火させた時の引数としてトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx ● 「evaluateJavascript」関数を利用してjsを発火

JSがトランスパイルされてしまうのでうまく呼べない

案4 ワンタイムパスワードを渡す index.html xxx.js クライアント webview アプリ https://xxx https://xxx ?otp=... ● トークンの代わりにOTPを渡す ● webview側からOTPとトークンの交換を行う ● 実装方法が煩雑 トークン交 換API otpとtokenをpostで交換

実装方法の詳細は記事にしたのでご覧ください https://menta.work/post/detail/13200/0m3pMbwd9CxzqXiTPLTM

まとめ ● リファレンスに乗っているようなベストプラクティスでも現実問題上手くいかない場合 もある ● 今のところ案1,4が把握している実現方法 ● SPAでwebviewへトークンを渡す方法が正直どれもイケてない ● webviewは利用規約ぐらいに留めてトークンを扱う部分はnativeで実装したほうが いい ● 誰かいい方法あったら教えて欲しいです！