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.3k
JavaScriptでWebViewをハックする
Wataru Mizukami
April 12, 2019
Tweet
Share
More Decks by Wataru Mizukami
See All by Wataru Mizukami
GitHub Actions活用術
tarumzu
1
730
CIサービス「Bitrise」を使って 最小限の労力でDanger + ktlintをGithubと連携させる
tarumzu
1
940
Realm Cloudを使ったオフラインファーストなアプリ開発
tarumzu
2
840
ViewFlipperで手軽にリッチアニメーション
tarumzu
0
570
Kotlin serializationの使い方を詳しく調べてみた
tarumzu
2
1.5k
Other Decks in Technology
See All in Technology
AIエージェント入門
minorun365
PRO
32
19k
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
150
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.4k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.9k
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
780
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
120
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
110
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
280
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Faster Mobile Websites
deanohume
306
31k
Six Lessons from altMBA
skipperchong
27
3.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
4 Signs Your Business is Dying
shpigford
183
22k
Practical Orchestrator
shlominoach
186
10k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Gamification - CAS2011
davidbonilla
80
5.2k
Site-Speed That Sticks
csswizardry
4
410
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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
ご清聴、ありがとうございました!