フロントエンドが知って おきたいセキュリティについて

フロントエンドが知っておきたいセキュリティについて
これからアプリ開発でwebviewで開発したいと言われたフロントエンドエンジニアに読んで欲しい内容です。
アプリからSPAにトークンを渡す方法について記載しています。

関連記事
【OpenID Connect】ログイン情報連携させる時ってどうするの？
https://menta.work/post/detail/13200/0m3pMbwd9CxzqXiTPLTM

Transcript

1. フロントエンドが知って おきたいセキュリティについて ヒグ！（樋口修也）
2. 発表者 フロントエンド,認証認可 2015年 旭川→岩手大学へ入学 2019年 東京のIT企業に新卒入社 2020年 コープさっぽろへ転職し札幌へ ダブルダッチ、筋トレ、ダンス AWS CDK, Vue.js 情報安全確保支援士試験に合格した! 樋口修也(24) 担当: 経歴: 趣味: 好み: 最近:
3. フロントエンドが最も気にすべきセキュリティ トークン ＆ 認証認可
4. フロントエンドが最も気にすべきセキュリティ トークン ＆ 認証認可
5. ある日突然・・・アプリ開発を ※Webview とは・・・ WEBで公開しているサイトなどをアプリから 呼び出して、サイトをあたかもアプリのように 見せて動作させる技術 サイト アプリ 上司 うちのサイトの機能をアプリでも 出したいから、webviewで サクッと実装してくれ
6. 問題 アプリでログインした時の トークンをどのように webview経由で安全にサイ トに渡すか？ サイト アプリ トークン
7. 1. Authorization headerでトークンを渡す サイト GET https://xxx.com { “Authorization”:“Bearer ey...” }
8. 1. Authorization headerでトークンを渡す サイト GET https://xxx.com { “Authorization”:“Bearer ey...” } SPAでは不可
9. SPAではない時の構成 index.html xxx.js クライアント サーバー webview アプリ Authorization あり Authorization なし token保持 一度アクセスが来た際に Cookieなどでセッションを保持して もらったトークンから認証情報を連携するなど 簡単にログイン状態の引き継ぎができる
10. SPAの構成 index.html xxx.js クライアント API通信
11. SPAの構成 index.html xxx.js クライアント API通信 webview アプリ header Authorization あり ソースをとってきた後は headerにあったトークン の情報を保持できない
12. じゃあ クエリストリングにトークンつけてしまえ
13. クエリでトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx? token=ey... SPAでもURLは残るのでwebview内で活用できる
14. 問題 クエリストリングにトークンつけるのは どのような危険性があるか？
15. よくある考察と回答 • wire shark で傍受されるとクエリのトークンの部分が丸見えになる ◦ 暗号化されるのでそれはない。 httpsの暗号化方式である、 TLSではURIがペイロードに含まれるの で暗号化される。ドメイン名は晒されるがクエリに付帯したトークンは無事 • サーバーサイドのログに残る ◦ ログの取り方によっては残る。ログの取得ルールなどで取らないようにする必要があるが、一番危 険性が高いと思われる。 • GAに残る ◦ ほぼ確実に取得されてしまう。他社に GAの収集結果を渡している場合要注意。 • ブラウザの履歴に残る ◦ webviewは内部ブラウザでかつ個人端末で利用されることが多いのでクライアント側の履歴をそこ まで気にする必要はない。
16. ちなみにRFC6749では アプリなのでブラウザの履歴に残ることを警戒してRFC6749ではクエリでトークンを渡す ことを非推奨としている。 ※2020/4~
17. 案１クエリでトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx? token=ey... • SPAでもURLは残るのでwebview内で活用できる • TLSで暗号化されている場合ドメイン以外は隠されるので通信を傍受され てもクエリは覗かれない • サーバーログに残ってしまう
18. 案2ローカルストレージでトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx • 「evaluateJavascript」関数を利用してローカルストレージを操作 window. localStorage
19. issue ばっか立っててうまくいっていないっぽい
20. 案3 js発火させた時の引数としてトークンを渡す index.html xxx.js クライアント webview アプリ https://xxx? token=ey... https://xxx • 「evaluateJavascript」関数を利用してjsを発火
21. JSがトランスパイルされてしまうのでうまく呼べない
22. 案4 ワンタイムパスワードを渡す index.html xxx.js クライアント webview アプリ https://xxx https://xxx ?otp=... • トークンの代わりにOTPを渡す • webview側からOTPとトークンの交換を行う • 実装方法が煩雑 トークン交換 API otpとtokenをpostで交換 otp
23. 実装方法の詳細は記事にしたのでご覧ください https://menta.work/post/detail/13200/0m3pMbwd9CxzqXiTPLTM 中間者攻撃などの対策 もある
24. まとめ • リファレンスに乗っているようなベストプラクティスでも現実問題上手くいかない場合 もある • 今のところ案1,4が把握している実現方法 • SPAでwebviewへトークンを渡す方法で王道というのは確立されていない • webviewは利用規約ぐらいに留めてトークンを扱う部分はnativeで実装したほうが いい • 誰かいい方法あったら教えて欲しいです！ webviewで実装する際はトークンのやりとりに要注意！