13
How To Hybrid Custom HTML5-Native Bridge for Android MICHAEL HANTLER ANDROIDDEV101.COM

Custom HTML5-Native Bridge for Android

  • Upload
    mhant

  • View
    211

  • Download
    2

Embed Size (px)

DESCRIPTION

Presentation from talk given at Cordova TLV Meetup on October 1st 2014. The presentation covers how to create a custom HTML5-Native bridge in Android.

Citation preview

Page 1: Custom HTML5-Native Bridge for Android

How To HybridCustom HTML5-Native Bridge for AndroidMICHAEL HANTLER

ANDROIDDEV101.COM

Page 2: Custom HTML5-Native Bridge for Android

PhoneGap (Cordova) framework

The open source framework we all know and love uses a similar technology in order to transmit requests over the HTML5-Java Bridge (JavaScript prompt boxes)

Page 3: Custom HTML5-Native Bridge for Android

If We Build It…They will Code

JavaScript Java

Page 4: Custom HTML5-Native Bridge for Android

It’s All About the WebView Baby

Similar to the Cordova(PhoneGap) implementation we will utilize built-in components of the Android WebView. This functionality will give us two way communication between our Java code and our HTML5(JavaScript) code.

+

Page 5: Custom HTML5-Native Bridge for Android

JavaScript to Java public void addJavascriptInterface (Object object, String name)

 class JsObject {    @JavascriptInterface    public String toString() { return "injectedObject"; } } webView.addJavascriptInterface(new JsObject(), "injectedObject"); webView.loadData("", "text/html", null); webView.loadUrl("javascript:alert(injectedObject.toString())");

Page 6: Custom HTML5-Native Bridge for Android

WebView Exploits

AVG: Analyzing an Android WebView exploit by Elad Shapira

MWR InfoSecurity: WebView addJavascriptInterface Remote Code Execution

Trigger.io: Why Trigger.io doesn’t use PhoneGap – 5x faster native bridge

Page 7: Custom HTML5-Native Bridge for Android

Java to JavaScript public void loadUrl (String url)

 class JsObject {    @JavascriptInterface    public String toString() { return "injectedObject"; } } webView.addJavascriptInterface(new JsObject(), "injectedObject"); webView.loadData("", "text/html", null); webView.loadUrl("javascript:alert(injectedObject.toString())");

Page 8: Custom HTML5-Native Bridge for Android

Examples on GitHub All example code can be found on Github at https://github.com/mhant/DroidConTLV2014

Page 9: Custom HTML5-Native Bridge for Android

Basic Bridge example

Page 10: Custom HTML5-Native Bridge for Android

Example: Ads

Page 11: Custom HTML5-Native Bridge for Android

Example: Drawer

Page 12: Custom HTML5-Native Bridge for Android

Example: Login

Page 13: Custom HTML5-Native Bridge for Android

Shout Outs

www.AndroidDev101.com

Delivering the highest quality mobile app and web app development. Previous clients include Caesars Interactive Entertainment, YMCA related firms, and a wide assortment of breakthrough startups.