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
领取专属 10元无门槛券
私享最新 技术干货