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.1k
JavaScriptでWebViewをハックする
Wataru Mizukami
April 12, 2019
Tweet
Share
More Decks by Wataru Mizukami
See All by Wataru Mizukami
GitHub Actions活用術
tarumzu
1
640
CIサービス「Bitrise」を使って 最小限の労力でDanger + ktlintをGithubと連携させる
tarumzu
1
800
Realm Cloudを使ったオフラインファーストなアプリ開発
tarumzu
2
730
ViewFlipperで手軽にリッチアニメーション
tarumzu
0
530
Kotlin serializationの使い方を詳しく調べてみた
tarumzu
2
1.3k
Other Decks in Technology
See All in Technology
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
150
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
270
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
アクセス制御にまつわる改善 / Improving access control
itkq
0
530
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
350
開発パフォーマンスを最大化するための開発体制
ham0215
2
330
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
ServiceNow Knowledge Learning Rise up
manarobot
0
210
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
2
2.1k
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
300
20240416_devopsdaystokyo
kzkmaeda
1
220
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Code Reviewing Like a Champion
maltzj
514
39k
Producing Creativity
orderedlist
PRO
337
39k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Building Adaptive Systems
keathley
31
1.9k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Clear Off the Table
cherdarchuk
84
310k
Agile that works and the tools we love
rasmusluckow
325
20k
How GitHub (no longer) Works
holman
304
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
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
ご清聴、ありがとうございました!