Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPAのサイトを アプリのwebviewで利用するときのトークンの渡し方
Search
higuuu
October 13, 2021
Programming
0
2.3k
SPAのサイトを アプリのwebviewで利用するときのトークンの渡し方
higuuu
October 13, 2021
Tweet
Share
More Decks by higuuu
See All by higuuu
副業で入ったけどタスクがないからPMっぽいことをした話
higuuu
0
250
年700万円損するサーバレスの 認可システムをご紹介します!!
higuuu
3
1.2k
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
670
フロントエンドが知って おきたいセキュリティについて
higuuu
1
1.1k
今年の抱負 81日でやり遂げるぞー
higuuu
1
300
Testing rules for teams that do not write test code
higuuu
1
240
コードレビューで 開発が加速した話
higuuu
0
740
Other Decks in Programming
See All in Programming
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
個人軟體時代
ethanhuang13
0
330
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
速いWebフレームワークを作る
yusukebe
5
1.7k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.4k
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
Optimizing for Happiness
mojombo
379
70k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Invisible Side of Design
smashingmag
301
51k
RailsConf 2023
tenderlove
30
1.2k
Site-Speed That Sticks
csswizardry
10
820
GraphQLとの向き合い方2022年版
quramy
49
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Balancing Empowerment & Direction
lara
3
630
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Transcript
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ではない時なら簡単にトークンの保持ができる
案1クエリでトークンを渡す 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で実装したほうが
いい • 誰かいい方法あったら教えて欲しいです!