前言
上一篇主要讲述了Android中WebView的使用和注意事项，本文将继续延伸WebView的使用，将介绍原生APP如何通过WebView和H5、JS通信交互。由于Android中WebView在4.2系统以下存在安全漏洞，本文将借助开源库JSBridge来完成两者的通讯。
1、Android4.2以下漏洞验证案例
1、先定义一个JavascriptInterface
public class AndroidToJs {
private WeakReference mWeakReference;
public AndroidToJs(MainActivity activity) {
mWeakReference = new WeakReference<>(activity);
}
/**
* 定义JS需要调用的方法
* 被JS调用的方法必须加入@JavascriptInterface注解
*
* @param msg
*/
@JavascriptInterface
public String hello(final String msg) {
Toast.makeText(mWeakReference.get(), msg, Toast.LENGTH_SHORT).show();
mWeakReference.get().runOnUiThread(new Runnable() {
@Override
public void run() {
((TextView) mWeakReference.get().findViewById(R.id.mTvJsMsg)).setText(msg);
}
});
return "来自Android的回应";
}
}
2、再将Interface通过addJavaScriptInterface添加到WebView
webSettings.javaScriptEnabled = true
// 设置允许JS弹窗
webSettings.javaScriptCanOpenWindowsAutomatically = true
mWebView.addJavascriptInterface(AndroidToJs(this), "test")
3、可以看到在Javascript中就可以通过查找window属性中的JInterface对象，然后反射执行一些攻击了，例如下面的例子通过反射Android中的Runtime类在应用中执行shell脚本。
Title
2、开源库JSBridge的使用
2.1、dependencies依赖
repositories {
// ...
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
2.2、使用BridgeWebView替代WebView进行布局
2.3、Java提供方法给JS调用
1、Java端注册一个方法
webView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
function.onCallBack("submitFromWeb exe, response data from Java");
}
});
2、JS端调用该方法
WebViewJavascriptBridge.callHandler(
'submitFromWeb'
, {'param': str1}
, function(responseData) {
document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
}
);
注意：Java端注册方法时，其中一个参数handlerName为submitFromWeb，在JS中调用时也需要传递相同的参数submitFromWeb;
JS传递给Java端的参数，可以在Java端的handler(String data, CallBackFunction function)中的data获取，数据处理完毕后，也可调用function.onCallBack()把结果返回给JS
3、为了简单方便，Java端也可以直接设置一个Handler，那么两边就可以不用规定参数handlerName
//Java端设置handler
webView.setDefaultHandler(new DefaultHandler(){
@Override
public void handler(String data, CallBackFunction function) {
}
});
//JS端发送消息
window.WebViewJavascriptBridge.send(
data
, function(responseData) {
document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
}
);
2.4、Java端调用JS代码
1、和上面Java端注册类似，JS端也要先注册一个方法,同样需要一样的 handlerName
//JS端
WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
document.getElementById("show").innerHTML = ("data from Java: = " + data);
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
});
2、Java端调用该方法
webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
@Override
public void onCallBack(String data) {
}
});
3、同上面类似，JS也可以通过bridge.init(function(message, responseCallback)来设置默认的消息处理，那么两边就可以不用规定参数handlerName
//JS监听Java端的消息
bridge.init(function(message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': 'Wee!'
};
console.log('JS responding with', data);
responseCallback(data);
});
//java端发送消息
webView.send("hello");
2.5、注意
该库会向JS中的window对象中注入WebViewJavascriptBridge对象，所以在js中，在使用WebViewJavascriptBridge之前，必须检测WebViewJavascriptBridge是否存在。如果WebViewJavascriptBridge未退出，则可以侦听WebViewJavascriptBridgeReady事件
if (window.WebViewJavascriptBridge) {
//do your work here
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
//do your work here
},
false
);
}