How to safely call JS and Java in WebView

[[120265]]

In the current Android native application development, in order to pursue development efficiency and porting convenience, using WebView as the main carrier for business content display and interaction is a good compromise. In such a hybrid app, it is inevitable that the page JS needs to call Java and call Java methods to perform functions that the web page JS cannot complete.

The methods on the Internet can tell us that we can use addjavascriptInterface to inject native interfaces into JS at this time, but in systems below Android 4.2, this solution brings great security risks to our applications. If the attacker executes some illegal JS on the page (to induce users to open some phishing websites to enter the risky page), it is very likely to rebound and obtain the shell permissions of the user's mobile phone. Then the attacker can quietly install the Trojan in the background and completely penetrate the user's mobile phone. The detailed attack process can be seen in this report of Wuyun Platform: Interface hidden dangers in WebView and mobile phone Trojan use.

For Android 4.2 and above (API >= 17), add @JavascriptInterface annotation to the callable method in the injection class. The method without annotation cannot be called. This method can prevent injection vulnerabilities. So is there a safe way that can fully take into account Android versions below 4.2? The answer is to use prompt, that is, the WebChromeClient input box pop-up mode.

We refer to the solution given in the article Solution to Js Object Injection Vulnerability in Android WebView, but its JS method is a bit clumsy, the process of dynamically generating JS files is not clear, and the timing of loading JS files is not accurately grasped. So how can we modify it to conveniently call Java methods in JS code, and safely and reliably?

The source code and project mentioned below can be found here Safe Java-JS Bridge In Android WebView [Github].

1. Dynamically generate the JS code to be injected

When constructing JsCallJava, it takes out the public and static methods of the class to be injected, generates the signatures of the methods one by one, caches the methods according to the method signatures, and dynamically generates a string to be injected into the webview by combining the method name with the static HostApp-JS code.

 public JsCallJava (String injectedName, Class injectedCls) {
 try {
        mMethodsMap = new HashMap<String, Method>();
 //Get all methods declared by itself (including public and private protected), getMethods will get all inherited and non-inherited methods  
        Method[] methods = injectedCls.getDeclaredMethods();
        StringBuilder sb = new StringBuilder( "javascript:(function(b){console.log(\"HostApp initialization begin\");var a={queue:[],callback:function(){var d=Array.prototype.slice.call(arguments,0);var c=d.shift();var e=d.shift();this.queue[c].apply(this,d);if(!e){delete this.queue[c]}}};" ); 
 
 for (Method method : methods) {
 String sign;
 if (method.getModifiers() != (Modifier.PUBLIC | Modifier.STATIC) || (sign = genJavaMethodSign(method)) == null ) {
 continue ;
 }
            mMethodsMap.put(sign, method);
            sb.append(String.format( "a.%s=" , method.getName()));
 } 
 
        sb.append( "function(){var f=Array.prototype.slice.call(arguments,0);if(f.length<1){throw\"HostApp call error, message:miss method name\"}var e=[];for(var h=1;h<f.length;h++){var c=f[h];var j=typeof c;e[e.length]=j;if(j==\"function\"){var d=a.queue.length;a.queue[d]=c;f[h]=d}}var g=JSON.parse(prompt(JSON.stringify({method:f.shift(),types:e,args:f}))));if(g.code!=200){throw\"HostApp call error, code:\"+g.code+\", message:\"+g.result}return g.result};Object.getOwnPropertyNames(a).forEach(function(d){var c=a[d];if(typeof c===\"function\"&&d!==\"callback\"){a[d]=function(){return c.apply(a,[d].concat(Array.prototype.slice.call(arguments,0)))}}});b." + injectedName + "=a;console.log(\"HostApp initialization end\")})(window);" );
        mPreloadInterfaceJS = sb.toString();
 } catch (Exception e) {
        Log.e(TAG, "init js error:" + e.getMessage());
 }
 } 
 
 private String genJavaMethodSign (Method method) {
    String sign = method.getName();
    Class[] argsTypes = method.getParameterTypes();
 int len ​​= argsTypes.length;
 if (len < 1 || argsTypes[ 0 ] != WebView. class ) {
        Log.w(TAG, "method(" + sign + ") must use webview to be first parameter, will be pass" );
 return   null ;
 }
 for ( int k = 1 ; k < len; k++) {
        Class cls = argsTypes[k];
 if (cls == String.class ) {
 sign += "_S" ;
 } else   if (cls == int . class ||
            cls == long . class ||
            cls == float . class ||
            cls == double . class ) {
 sign += "_N" ;
 } else   if (cls == boolean . class ) {
 sign += "_B" ;
 } else   if (cls == JSONObject. class ) {
 sign += "_O" ;
 } else   if (cls == JsCallback. class ) {
 sign += "_F" ;
 } else {
 sign += "_P" ;
 }
 }
 return sign;
 }

As can be seen above, the names of the various methods of the class are spliced ​​into the two statically compressed JS codes. So what does the complete and clear HostApp-JS fragment generated in this way look like? Assuming that only three public static methods, toast, alert, and getIMSI, are defined in the HostJsScope class, the complete fragment is as follows:

 (function(global){
    console.log( "HostApp initialization begin" );
 var hostApp = {
 queue: [],
        callback: function () {
            var args = Array.prototype.slice.call(arguments, 0 );
            var index = args.shift();
            var isPermanent = args.shift();
 this .queue[index].apply( this , args);
 if (!isPermanent) {
                delete this .queue[index];
 }
 }
 };
    hostApp.toast = hostApp.alert = hostApp.getIMSI = function () {
        var args = Array.prototype.slice.call(arguments, 0 );
 if (args.length < 1 ) {
 throw   "HostApp call error, message:miss method name" ;
 }
 var aTypes = [];
 for (var i = 1 ;i < args.length;i++) {
            var arg = args[i];
            var type = typeof arg;
            aTypes[aTypes.length] = type;
 if (type == "function" ) {
                var index = hostApp.queue.length;
                hostApp.queue[index] = arg;
                args[i] = index;
 }
 }
        var res = JSON.parse(prompt(JSON.stringify({
            method: args.shift(),
 types: aTypes,
 args: args
 }))); 
 
 if (res.code != 200 ) {
 throw   "HostApp call error, code:" + res.code + ", message:" + res.result;
 }
 return res.result;
 }; 
 
 //Sometimes, we want to insert some other behaviors before this method is executed to check the current state or monitor  
 //Code behavior, this requires the use of interception (Interception) or injection (Injection) technology  
 /**
 * Object.getOwnPropertyName returns an array containing all the properties of the specified object
 *
 * Then traverse this array and do the following processing:
 * 1. Back up original properties;
 * 2. Check if the attribute is a function (i.e., a method);
 * 3. If you redefine the method, do what you need to do, and then apply the original method body.
 */  
    Object.getOwnPropertyNames(hostApp).forEach(function (property) {
        var original = hostApp[property]; 
 
 if (typeof original === 'function' &&property!== "callback" ) {
            hostApp[property] = function () {
 return original.apply(hostApp, [property].concat(Array.prototype.slice.call(arguments, 0 )));
 };
 }
 });
 global.HostApp = hostApp;
    console.log( "HostApp initialization end" );
 })(window);

In fact, when JsCallJava is initialized, we only splice the above line 15 hostApp.toast = hostApp.alert = hostApp.getIMSI = function () . The purpose is to graft all JS layer call functions into an anonymous function 1, and then use interception technology to traverse all functions under hostApp, take out the corresponding function name, and then graft all function calls under hostApp into another anonymous function 2. The purpose of this is to first execute anonymous function 2 when calling a function under hostApp, and anonymous function 2 will use the corresponding function name as the first parameter and then call anonymous function 1, so that anonymous function 1 can distinguish the call source during execution. A unified JS layer call entry and a unified return exit structure system are realized.

2. HostApp JS fragment injection timing

Step 1 explains how to splice the HostApp-JS fragment. The JS fragment splicing is completed in the JsCallJava initialization, which is initiated when the InjectedChromeClient object is instantiated.

 public InjectedChromeClient (String injectedName, Class injectedCls) {
    mJsCallJava = new JsCallJava(injectedName, injectedCls);
 }

From the code in step 1, we know that the JS code spliced ​​by JsCallJava is temporarily stored in the mPreloadInterfaceJS field. So when do we inject this code string into the page space of Webview? The answer is when the page loading progress changes.

 @Override  
 public   void onProgressChanged (WebView view, int newProgress) {
 //Why inject JS here?  
 //1 Injection in OnPageStarted may fail globally, causing all interfaces on the page script to be unavailable at any time  
 //2 Inject in OnPageFinished. Although the global injection will be successful in the end, the completion time may be too late. When the page is initialized and calls the interface function, it will wait too long.  
 //3 Inject when the progress changes, just to get a compromise between the above two problems  
 //Why is the injection performed only when the progress is greater than 25%? Because from the test, only when the progress is greater than this number can the page actually get the framework refresh and load, ensuring 100% injection success  
 if (newProgress <= 25 ) {
        mIsInjectedJS = false ;
 } else   if (!mIsInjectedJS) {
        view.loadUrl(mJsCallJava.getPreloadInterfaceJS());
        mIsInjectedJS = true ;
        Log.d(TAG, " inject js interface completely on progress " + newProgress); 
 
 }
 super .onProgressChanged(view, newProgress);
 }

From the above, we can see that the timing of injection is to accurately grasp when the progress is greater than 25%. If injected in OnPageFinished, the initial callback of the page document.ready will wait too long. We will talk about the detailed reasons later.

3. The process of page calling Java method execution

OK, the above two steps solve the two major problems of dynamic generation and successful injection. Next, we need to deal with the specific JS calling process. As mentioned above, when the page calls the Java method, the anonymous js function prompts the json data after concatenating the parameters. The prompt message is intercepted by WebChromeClient.onJsPrompt in the Java layer.

 @Override  
 public   boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    result.confirm(mJsCallJava.call(view, message));
 return   true ;
 }

The specific implementation of JsCallJava.call is as follows.

 public String call(WebView webView, String jsonStr) {
 if (!TextUtils.isEmpty(jsonStr)) {
 try {
            JSONObject callJson = new JSONObject(jsonStr);
            String methodName = callJson.getString( "method" );
            JSONArray argsTypes = callJson.getJSONArray( "types" );
            JSONArray argsVals = callJson.getJSONArray( "args" );
            String sign = methodName;
 int len ​​= argsTypes.length();
            Object[] values ​​= new Object[len + 1 ];
 int numIndex = 0 ;
 String currType; 
 
            values[ 0 ] = webView; 
 
 for ( int k = 0 ; k < len; k++) {
                currType = argsTypes.optString(k);
 if ( "string" .equals(currType)) {
                    sign += "_S" ;
                    values[k + 1 ] = argsVals.isNull(k) ? null : argsVals.getString(k);
 } else   if ( "number" .equals(currType)) {
                    sign += "_N" ;
                    numIndex = numIndex * 10 + k + 1 ;
 } else   if ( "boolean" .equals(currType)) {
                    sign += "_B" ;
                    values[k + 1 ] = argsVals.getBoolean(k);
 } else   if ( "object" .equals(currType)) {
                    sign += "_O" ;
                    values[k + 1 ] = argsVals.isNull(k) ? null : argsVals.getJSONObject(k);
 } else   if ( "function" .equals(currType)) {
                    sign += "_F" ;
                    values[k + 1 ] = new JsCallback(webView, argsVals.getInt(k));
 } else {
                    sign += "_P" ;
 }
 } 
 
            Method currMethod = mMethodsMap.get(sign); 
 
 // Method matching failed  
 if (currMethod == null ) {
 return getReturn(jsonStr, 500 , "not found method(" + methodName + ") with valid parameters" );
 }
 //Digital type segmentation matching  
 if (numIndex > 0 ) {
                Class[] methodTypes = currMethod.getParameterTypes();
 int currIndex;
                Class currCls;
 while (numIndex > 0 ) {
                    currIndex = numIndex - numIndex / 10 * 10 ;
                    currCls = methodTypes[currIndex];
 if (currCls == int . class ) {
                        values[currIndex] = argsVals.getInt(currIndex - 1 );
 } else   if (currCls == long . class ) {
 //WARN: argsJson.getLong(k + defValue) will return a bigger incorrect number  
                        values[currIndex] = Long.parseLong(argsVals.getString(currIndex - 1 ));
 } else {
                        values[currIndex] = argsVals.getDouble(currIndex - 1 );
 }
                    numIndex /= 10 ;
 }
 } 
 
 return getReturn(jsonStr, 200 , currMethod.invoke( null , values));
        } catch (Exception e) {
 // Return detailed error information first  
 if (e.getCause() != null ) {
 return getReturn(jsonStr, 500 , "method execute error:" + e.getCause().getMessage());
 }
 return getReturn(jsonStr, 500 , "method execute error:" + e.getMessage());
 }
 } else {
 return getReturn(jsonStr, 500 , "call data empty" );
 }
 }

This is a complete parsing and matching process. It will generate a method signature again based on the method name and parameter type list passed in by the js layer, and match it with the method in the cache object that was initialized and constructed before. After a successful match, it will determine whether there is a number type in the js call parameter type. If there is, it will determine whether to take an int, long, or double type value based on the definition of the Java layer method. Finally, the call value list and method object are used for reflection execution, and the result of the function execution is returned. There are a few points to note here:

• When the method is executed by reflection, the current WebView instance will be placed in the first parameter, so that the HostJsScope static method can get some relevant context information based on Context;
• The parameter definition of the static method of the injection class (such as HostJsScope) can use the types of int/long/double, String, boolean, JSONObject, and JsCallback. The corresponding types passed in by the js layer are number, string, boolean, object, and function. Note that when the number is too large (such as a timestamp), it may need to be converted to a string type first (the parameters in the Java method must also be defined as String) to avoid precision loss ;
• The return value of a Java method can be void or a type that can be converted to a string (such as int, long, String, double, float, etc.) or a serializable custom type ;
• If the execution fails or the calling method cannot be found, the Java layer will pass the exception information to the JS layer, and an error will be thrown in the JS anonymous function;

4. Use of HostApp on the page

With the above preparations, we can now use HostApp in the page easily without loading any dependent files. For example, when clicking on the li tag:

 < ul   class = "entry" >  
 <​   onclick = "HostApp.alert('HostApp.alert');" > HostApp.alert </ li >  
 <​   onclick = "HostApp.toast('HostApp.toast');" > HostApp.toast </ li >  
 <​   onclick = "HostApp.testLossTime(new Date().getTime() + '');" > HostApp.testLossTime </ li >   <!-- Timestamp long integer is converted to string before calling -->  
 <​   onclick = "HostApp.toast(HostApp.getIMSI());" > HostApp.getIMSI </ li >  
 </ ul >  

But at the same time, there is a business scenario where the call should be triggered immediately when the page is initially loaded. If we write:

 document.addEventListener('DOMContentLoaded', function() {
    HostApp.toast('document ready now');;
 }, false);

Then the call to HostApp is very likely to fail, because the timing of injecting the HostApp-JS fragment may be before or after document.ready. So how to solve this contradiction?

If the HostApp JS has been injected successfully when document.ready is called, this is OK. If the HostApp JS has not been injected yet when document.ready is called, our JS script layer needs to be changed, that is, polling the status until the injection is successful or the timeout (1.5s) occurs, and then a callback occurs. The specific implementation is as follows (the following is an example of the modification of the $.ready() function of zepto.js).

 //Some operations on DOM  
 // Define methods that will be available on all  
 // Zepto collections  
 $.fn = {
 //DOM Ready  
    ready: function(callback, jumpHostAppInject) {
        var originCb = callback;
 var mcounter = 0 ;
 //Try to wait (1500ms timeout) for the client to inject HostApp Js  
        callback = function () {
 if (!window.HostApp && mcounter++ < 150 )setTimeout(callback, 10 ); else originCb($);
 };
 //Whether to skip waiting for HostApp injection  
 if (jumpHostAppInject) {
            callback = originCb;
 }
 if (readyRE.test(document.readyState)) callback($); else document.addEventListener( 'DOMContentLoaded' , function() {
 callback($)
 }, false );
 return   this  
 },
 ...
 ...
 };

This mechanism also explains why the JS injection of the Java layer is not placed in OnPageFinish. If that is the case, the number of page polling will increase, the waiting time will become longer, and there may be a timeout. Well, with the above changes, the call to HostApp needs to be triggered immediately when the page is initially loaded, as follows:

 < script   type = "text/javascript" >  
 $(function () {
        HostApp.alert("HostApp ready now");
 });
 </ script >  

For more instructions and complete source code, see: Safe Java-JS Bridge In Android WebView [Github]

Original: http://www.pedant.cn/2014/07/04/webview-js-java-interface-research/