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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191223A08ZNS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券