Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fb0a40e5e7a9dc85520f1646fd41eb44?s=47 higuuu
January 19, 2022

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

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

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

Fb0a40e5e7a9dc85520f1646fd41eb44?s=128

higuuu

January 19, 2022
Tweet

More Decks by higuuu

Other Decks in Programming

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. 案1クエリでトークンを渡す 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で実装する際はトークンのやりとりに要注意!