Can I pass a Javascript object out to an Android WebView?

Question

I am migrating a web application into an android version. After having received and processed JSON data, I have an array of Javascript objects being held within the page.

How can I pass the complete contents of one of the javascript objects "out" to the webview container for display using native android controls ?

Eventually, I could create a javascript interface with a method having parameters for each of the possible javascript object properties - but this appears to be overly heavy.

Can anyone help with this ?

Answer 1

Android's WebView contains a method called addJavascriptInterface(Object obj, String interfaceName) that should be useful here.

Using this method, the object obj that you add as the interface can be accessed via JavaScript code in the Web View. In your case, you could pass in an object that has a setter method that transfers some JavaScript object back to Java.

You'll still need to create the glue code that converts your JavaScript object into the JSON object. For a quick approach, you can just have your interface generate a JSONObject on the Java side using a JSON string passed from JavaScript. The JSONObject class in Java has a constructor that accepts a String containing JSON data. So, you can pass the stringified result directly back to Java and create the object that way. For example:

class JSInterface {
    HashMap<String, JSONObject> mObjectsFromJS = new HashMap<String, JSONObject>();
    public void passObject(String name, String json) {
        mObjectsFromJS.put(name, new JSONObject(json));
    }
}

//At some point, register using:
mJSInterface = new JSInterface();
mWebView.addJavascriptInterface(mJSInterface, "Android");

Then, on the JavaScript side, in the handler that has a blob of unparsed JSON in the variable jsonData:

Android.passObject("pageItems", jsonData);

Now, your JSInterface on the Java side will have a JSONObject containing the items, which you can access using the getters provided by JSONObject. The objects created via the Javascript call will be in the mObjectsFromJS map. You'll of course want to add additional helper methods to the JSInterface class to allow for managing the objects better.

I haven't compiled or tested any of these methods, so you may have to tweak them a bit for proper operation. But hopefully this gives you the idea.

However, if the objects have a consistent interface and data items, it would be more sensible to just create a simple JavaScript glue function that binds the JavaScript object properties to the Java-side object fields using setter methods.

PLEASE NOTE This is giving remote code ability to trigger native code on your device. If you do not have complete control over the pages/scripts being loaded into the WebView, you should ensure that the behavior exposed by obj doesn't allow any exploits.