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
780
CIサービス「Bitrise」を使って 最小限の労力でDanger + ktlintをGithubと連携させる
tarumzu
1
1k
Realm Cloudを使ったオフラインファーストなアプリ開発
tarumzu
2
900
ViewFlipperで手軽にリッチアニメーション
tarumzu
0
590
Kotlin serializationの使い方を詳しく調べてみた
tarumzu
2
1.6k
Other Decks in Technology
See All in Technology
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
260
AWSで推進するデータマネジメント
kawanago
0
870
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
650
Agile PBL at New Grads Trainings
kawaguti
PRO
1
120
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
260
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.3k
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
1.1k
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
450
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
2
130
モダンフロントエンド 開発研修
recruitengineers
PRO
10
6.2k
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
100
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Into the Great Unknown - MozCon
thekraken
40
2k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Bash Introduction
62gerente
614
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
RailsConf 2023
tenderlove
30
1.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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
ご清聴、ありがとうございました!