JSBridge的原理浅析与操作实践

JSBridge是什么

顾名思义：就是JavaScript(H5)与Native通信的桥梁，在H5开发中经常有操作客户端的需求，比如获取App信息，打开/关闭一个WebView，吊起支付面板等等，但这些功能只能在Native中实现，因此诞生JSBridge，通过JSBridge与Native通信，赋予了JavaScript操作Native的能力，同时也给了Native调用JavaScript的能力。

JSBridge与Native间通信原理

在H5中JavaScript调用Native的方式主要用两种

1.注入API，注入Native对象或方法到JavaScript的window对象中（可以类比于RPC调用）。

2.拦截URL Schema，客户端拦截WebView的请求并做相应的操作（可以类比于JSONP）。

下面将以Android端的JSBridge通信为例，讲解这两种方式的实现原理（本人比较菜，只会Java不会Swift和OC）。

注入API

通过WebView提供的接口，向JavaScript的window中注入对象或方法(Android使用addJavascriptInterface()方法)，让JavaScript调用时相当于执行相应的Native逻辑，达到JavaScript调用Native的效果。

对于Android实现方式如下，核心代码在于

示例如下

在Android的main页面放一个Webview

然后Android端对应的代码如下

对于JavaScript侧，则可以直接调用Native端注入的InjectNativeObjec对象的方法

实际效果如下，其中login按钮点击调用Native端openNewPage方法并传相应的参数给客户端。

缺陷： Android4.2及以下的版本使用addJavascriptInterface方法有漏洞

该漏洞源于程序没有正确限制使用WebView.addJavascriptInterface方法，远程攻击者可通过使用Java Reflection API利用该漏洞执行任意Java对象的方法，简单的说就是通过addJavascriptInterface给WebView加入一个JavaScript桥接接口，JavaScript通过调用这个接口可以直接操作本地的Java接口。

在Android4.2以上提供@JavascriptInterface注解来规避该漏洞，但对于4.2以下版本则没有任何方法。所以使用该方法有一定的风险和兼容性问题。

拦截URL Schema

H5端通过iframe.src或localtion.href发送Url Schema请求，之后Native（Android端通过shouldOverrideUrlLoading()方法）拦截到请求的Url Schema（包括参数等）进行相应的操作。

通俗点讲就是，H5发一个普通的https请求可能是: https://daydream.com/?a=1&b=1， 而与客户端约定的JSBridge Url Schema可能是: Daydream://jsBridgeTest/?data=，客户端可以通过schema来区分是JSBridge调用还是普通的https请求从而做不同的处理。

其实现过程原理类似于JSONP

1.首先在H5中注入一个callback方法，放在window对象中

然后把callback的名字通过Url Schema传到Native

2.Native通过shouldOverrideUrlLoading()，拦截到WebView的请求，并通过与前端约定好的Url Schema判断是否是JSBridge调用。

3.Native解析出前端带上的callback，并使用下面方式调用callback

或者

通过上面几步就可以实现JavaScript到Native的通信。下面可以看看处理Url Schema的拦截的shouldOverrideUrlLoading方法的相关例子

示例

Android页面布局

Android端代码如下

JavaScript侧

window上挂载的方法在Native中可以使用

webView.loadUrl() / webView.evaluateJavascript()

调用

基于JSONP原理可以定义JSBridge类

JavaScript使用例子

效果如下

缺陷： 使用URL Schema有一定的长度问题，url过长可能会导致丢失; 一次JSBridge调用耗时可能比较长，创建请求需要一定的时间。

总结

本文简单介绍了JSBridge以及在Android端的通信，通过相应的分析与代码实现可以发现JSBridge原理其实并没有那么难，因此希望本文能对读者对JSBridge有一定的理解，最后生活不止有前端，还有客户端在等着咱o(T^T)o