Android JSBridge原理与实现

在Android中，JSBridge已经不是什么新鲜的事物了，各家的实现方式也略有差异。大多数人都知道WebView存在一个漏洞，详细信息见你不知道的 Android WebView 使用漏洞，虽然该漏洞已经在Android 4.2上修复了，即使用@JavascriptInterface代替addJavascriptInterface，但是由于兼容性和安全性问题，基本上我们不会再利用Android系统为我们提供的addJavascriptInterface方法或者@JavascriptInterface注解来实现，所以我们只能另辟蹊径，去寻找既安全，又能实现兼容Android各个版本的方案。

首先我们来了解一下为什么要使用JSBridge，在开发中，为了追求开发的效率以及移植的便利性，一些展示性强和性能要求不是很高的页面，我们会偏向于使用h5来完成，功能性强的页面我们会偏向于使用native来完成，而一旦使用了h5，为了在h5中尽可能的得到native的体验，我们native层需要暴露一些方法给js调用，比如，弹Toast提醒，弹Dialog，分享等等，有时候甚至把h5的网络请求放着native去完成，而JSBridge做得好的一个典型就是微信，微信给开发者提供了JSSDK，该SDK中暴露了很多微信native层的方法，比如支付，定位等。

那么，怎么去实现一个兼容Android各版本又具有一定安全性的JSBridge呢？我们知道，在WebView中，如果java要调用js的方法，是非常容易做到的，Android4.4以前使用WebView.loadUrl(“javascript:function()”)。Android4.4以后，使用以下方式

webView.evaluateJavascript(“javascript:function()”, new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(MainActivity.this, "onReceiveValue Java To JS", Toast.LENGTH_SHORT).show();
}
});

，这样，就做到了JSBridge的native层调用h5层的通信，但是h5层如何调native层呢，我们需要寻找这么一个通道，仔细回忆一下，WebView有一个方法，叫setWebChromeClient，可以设置WebChromeClient对象，而这个对象中有三个方法，分别是onJsAlert,onJsConfirm,onJsPrompt，当js调用window对象的对应的方法，即window.alert，window.confirm，window.prompt，WebChromeClient对象中的三个方法对应的就会被触发，我们是不是可以利用这个机制，自己做一些处理呢？答案是肯定的。

至于js这三个方法的区别，可以详见w3c JavaScript 消息框 。一般来说，我们是不会使用onJsAlert的，为什么呢？因为js中alert使用的频率还是非常高的，一旦我们占用了这个通道，alert的正常使用就会受到影响，而confirm和prompt的使用频率相对alert来说，则更低一点。那么到底是选择confirm还是prompt呢，其实confirm的使用频率也是不低的，比如你点一个链接下载一个文件，这时候如果需要弹出一个提示进行确认，点击确认就会下载，点取消便不会下载，类似这种场景还是很多的，因此不能占用confirm。而prompt则不一样，在Android中，几乎不会使用到这个方法，就是用，也会进行自定义，所以我们完全可以使用这个方法。该方法就是弹出一个输入框，然后让你输入，输入完成后返回输入框中的内容。因此，占用prompt是再完美不过了。

到这一步，我们已经找到了JSBridge双向通信的一个通道了，接下来就是如何实现的问题了。本文中实现的只是一个简单的demo，如果要在正式项目中下使用，还需要自己做一层封装。

要进行正常的通信，通信协议的制定是必不可少的。我们回想一下熟悉的http请求url的组成部分。形如http://host:port/path?param=value，我们参考http，制定JSBridge的组成部分，我们的JSBridge需要传递给native什么信息，native层才能完成对应的功能，然后将结果返回呢？显而易见我们native层要完成某个功能就需要调用某个类的某个方法，我们需要将这个类名和方法名传递过去，此外，还需要方法调用所需的参数，为了通信方便，native方法所需的参数我们规定为json对象，我们在js中传递这个json对象过去，native层拿到这个对象再进行解析即可。为了区别于http协议，我们的jsbridge使用jsbridge协议，为了简单起见，问号后面不适用键值对，我们直接跟上我们的json字符串，于是就有了形如下面的这个uri

jsbridge://className:port/methodName?jsonObj

假设我们需要调用native层的Logger类的log方法，当然这个类以及方法肯定是遵循某种规范的，不是所有的java类都可以调用，不然就跟文章开头的WebView漏洞一样了，参数是msg，执行完成后js层要有一个回调，那么地址就如下

sbridge://Logger:callbackAddress/log?{"msg":"native log"}

至于这个callback对象的地址，可以存储到js中的window对象中去。至于怎么存储，后文再讲述。

上面是js向native的通信协议，那么另一方面，native向js的通信协议也需要制定，一个必不可少的元素就是返回值，这个返回值和js的参数做法一样，通过json对象进行传递，该json对象中有状态码code，提示信息msg，以及返回结果result，如果code为非0，则执行过程中发生了错误，错误信息在msg中，返回结果result为null，如果执行成功，返回的json对象在result中。下面是两个例子，一个成功调用，一个调用失败。

{
    "code":500,
    "msg":"method is not exist",
    "result":null
}

{
    "code":0,
    "msg":"ok",
    "result":{
                 "key1":"returnValue1",
                 "key2":"returnValue2",
                 "key3":{
                         "nestedKey":"nestedValue"
                         "nestedArray":["value1","value2"]
                           }

}
}

那么这个结果如何返回呢，native调用js暴露的方法即可，然后将js层传给native层的port一并带上，进行调用即可，调用的方式就是通过WebView.loadUrl方式来完成，如下。

mWebView.loadUrl("javascript:JSBridge.onFinish(port,jsonObj);");

关于JsBridge.onFinish方法的实现，后面再叙述。前面我们提到了native层的方法必须遵循某种规范，不然就非常不安全了。在native中，我们需要一个JSBridge统一管理这些暴露给js的类和方法，并且能实时添加，这时候就需要这么一个方法

JSBridge.register("jsName",javaClass.class)

这个javaClass就是满足某种规范的类，该类中有满足规范的方法，我们规定这个类需要实现一个空接口，为什么呢?主要作用就混淆的时候不会发生错误，还有一个作用就是约束JSBridge.register方法第二个参数必须是该接口的实现类。那么我们定义这个接口

public interface IBridge{

}

类规定好了，类中的方法我们还需要规定，为了调用方便，我们规定类中的方法必须是static的，这样直接根据类而不必新建对象进行调用了（还要是public的），然后该方法不具有返回值，因为返回值我们在回调中返回，既然有回调，参数列表就肯定有一个callback，除了callback，当然还有前文提到的js传来的方法调用所需的参数，是一个json对象，在java层中我们定义成JSONObject对象；方法的执行结果需要通过callback传递回去，而java执行js方法需要一个WebView对象，于是，满足某种规范的方法原型就出来了。
public static void methodName(WebView web view,JSONObject jsonObj,Callback callback){

}

js层除了上文说到的JSBridge.onFinish(port,jsonObj);方法用于回调，应该还有一个方法提供调用native方法的功能，该函数的原型如下

JSBridge.call(className,methodName,params,callback)

在call方法中再将参数组合成形如下面这个格式的uri

jsbridge://className:callbackAddress/methodName?jsonObj

然后调用window.prompt方法将uri传递过去，这时候java层就会收到这个uri，再进一步解析即可。

万事具备了，只欠如何编码了，别急，下面我们一步一步的来实现，先完成js的两个方法。新建一个文件，命名为JSBridge.js

(function (win) {
    var hasOwnProperty = Object.prototype.hasOwnProperty;
    var JSBridge = win.JSBridge || (win.JSBridge = {});
    var JSBRIDGE_PROTOCOL = 'JSBridge';
    var Inner = {
        callbacks: {},
        call: function (obj, method, params, callback) {
            console.log(obj+" "+method+" "+params+" "+callback);
            var port = Util.getPort();
            console.log(port);
            this.callbacks[port] = callback;
            var uri=Util.getUri(obj,method,params,port);
            console.log(uri);
            window.prompt(uri, "");
        },
        onFinish: function (port, jsonObj){
            var callback = this.callbacks[port];
            callback && callback(jsonObj);
            delete this.callbacks[port];
        },
    };
    var Util = {
        getPort: function () {
            return Math.floor(Math.random() * (1 << 30));
        },
        getUri:function(obj, method, params, port){
            params = this.getParam(params);
            var uri = JSBRIDGE_PROTOCOL + '://' + obj + ':' + port + '/' + method + '?' + params;
            return uri;
        },
        getParam:function(obj){
            if (obj && typeof obj === 'object') {
                return JSON.stringify(obj);
            } else {
                return obj || '';
            }
        }
    };
    for (var key in Inner) {
        if (!hasOwnProperty.call(JSBridge, key)) {
            JSBridge[key] = Inner[key];
        }
    }