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
JavaScriptでWebViewをハックする
Search
Wataru Mizukami
April 12, 2019
Technology
2
1.4k
JavaScriptでWebViewをハックする
Wataru Mizukami
April 12, 2019
Tweet
Share
More Decks by Wataru Mizukami
See All by Wataru Mizukami
GitHub Actions活用術
tarumzu
1
770
CIサービス「Bitrise」を使って 最小限の労力でDanger + ktlintをGithubと連携させる
tarumzu
1
990
Realm Cloudを使ったオフラインファーストなアプリ開発
tarumzu
2
890
ViewFlipperで手軽にリッチアニメーション
tarumzu
0
590
Kotlin serializationの使い方を詳しく調べてみた
tarumzu
2
1.6k
Other Decks in Technology
See All in Technology
地図と生成AI
nakasho
0
560
今日からあなたもGeminiを好きになる
subaruhello
1
520
SREを知らずに SREマネージャーになった話 / How I Became an SRE Manager Without Knowing What SRE Is
moneyforward
0
260
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
0
140
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
500
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
100
Snowflake のアーキテクチャは本当に筋がよかったのか / Data Engineering Study #30
indigo13love
0
230
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.8k
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
680
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
820
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
210
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Designing for Performance
lara
610
69k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Designing for humans not robots
tammielis
253
25k
Being A Developer After 40
akosma
90
590k
Rails Girls Zürich Keynote
gr2m
95
14k
Adopting Sorbet at Scale
ufuk
77
9.5k
GitHub's CSS Performance
jonrohan
1031
460k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Embracing the Ebb and Flow
colly
86
4.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
Transcript
JavaScriptでWebViewをハックする Wataru Mizukami(水上 亘) Shibuya.apk #33
自己紹介 - Wataru Mizukami/水上 亘 - / @tarumzu (たる)
- Organization/ sikmi, inc. TOEICテストTEPPAN英単語、好評発売中! (付録のAndroidアプリがおすすめです!)
WebViewを使った開発するときに JavaScriptに苦しめられたこと、 ありませんか?
初級編 SPAでページの変更を検知する① 通常、WebViewでページの変更を検出する場合は下記を使用す るがReactやVueで作成されたSPAではsubmitが走らないため UrlLoadingを検知できない。 WebViewClient#shouldOverrideUrlLoading
初級編 SPAでページの変更を検知する② webview.getSettings().setJavaScriptEnabled(true) webview.setWebViewClient(object : WebViewClient() { override fun doUpdateVisitedHistory(view: WebView,
url: String, isReload: Boolean) { Log.d("MainActivity", "doUpdateVisitedHistory url = $url") } })
初級編 SPAでページの変更を検知する② webview.getSettings().setJavaScriptEnabled(true) webview.setWebViewClient(object : WebViewClient() { override fun doUpdateVisitedHistory(view: WebView,
url: String, isReload: Boolean) { Log.d("MainActivity", "doUpdateVisitedHistory url = $url") } }) doUpdateVisitedHistoryは訪問済みリンクのデータ ベースを更新した際に呼ばれる
今回の例は専用のメソッドが用意されれ てたけど、なかった場合どうする? もっと自由にイベントをフックしたくない?
上級編 自在にイベントをフックする① webview.setWebViewClient(object : WebViewClient() { override fun onPageFinished(view: WebView, url:
String) { webview.loadUrl("javascript:window.addEventListener('popState', function (event) { injectedObj.testFunction(‘test') }, false)") } })
上級編 自在にイベントをフックする① webview.setWebViewClient(object : WebViewClient() { override fun onPageFinished(view: WebView, url:
String) { webview.loadUrl("javascript:window.addEventListener('popState', function (event) { injectedObj.testFunction(‘test') }, false)") } }) popStateとは JavaScriptのHTML5 HistoryAPIで、 history.back()、history.forward()が実行された 際に呼び出されるイベント
上級編 自在にイベントをフックする① webview.setWebViewClient(object : WebViewClient() { override fun onPageFinished(view: WebView, url:
String) { webview.loadUrl("javascript:window.addEventListener('popState', function (event) { injectedObj.testFunction(‘test') }, false)") } }) 例えば、JavaScriptのaddEventListenerを使 えばpopStateイベントのリスナーにfunctionを 登録させることが出来る。という事は…
上級編 自在にイベントをフックする② class JSObject(private val webview: WebView) { @JavascriptInterface fun testFunction(str:
String): String { Log.d("xxx", "hook $str") return "false" } } JSObjectというクラスを用意して…
上級編 自在にイベントをフックする③ webview.addJavascriptInterface(JSObject(webview), "injectedObj") webview.setWebViewClient(object : WebViewClient() { override fun onPageFinished(view:
WebView, url: String) { webview.loadUrl("javascript:window.addEventListener('popState', function (event) { injectedObj.testFunction(‘test') }, false)") } }) JSObjectクラスをaddJavascriptInterfaceで登録して あげることでpopStateイベントが走った際に自前のメ ソッドが呼ばれるようになる!
つまり、WebView側だけの対応で、 Webページを自由自在に操作できる!
まとめ - SPAのページ変更検知はdoUpdateVisitedHistoryを使う。 - メソッドが用意されてなくてもJavaScriptを知ることで何でも出 来る。
宣伝 4/14開催の技術書典6でSwift/Kotlin愛好会合同執筆本として、 日本で唯一!のRealm Cloud入門書書くのでぜひ買いに来てくだ さい!他にも内容盛りだくさんです。 場所は「け18」よろしくおねがいします! https://techbookfest.org/event/tbf06/circle/71750003
ご清聴、ありがとうございました!