使用jsbridge的原因
原生webview h5调用native方法使用addJavaScriptInterface,然而4.2以下系统没有对注册java类的方法做限制,导致攻击者可以利用反射调用其他未注册的任何java类。出于安全性考虑使用jsbridge来处理h5和native的交互。
项目地址
使用方法/两端增加的额外代码比较少
1.native注册方法供h5调用 webView.registerHandler("submitFromWeb") { data, function ->
function.onCallBack("submitFromWeb exe, response data 中文 from Java")
}
2.native调用h5方法
webView.callHandler("functionInJs", Gson().toJson(user)) { data ->
Log.e("处理结果", data)
}
3.h5注册方法供native调用
bridge.registerHandler("functionInJs", function (data, responseCallback) {
if (responseCallback) {
let responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
}
})
4.h5调用native的方法
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
, {'param': '中文测试'}
, function (responseData) {
document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
}
);
源码解析
从上面的使用中可以看到window.WebViewJavascriptBridge和bridge对象,window中好像没有这些对象?WebViewJavascriptBridge从哪里来?
答案在BridgeWebViewClient的onPageFinished中
onPageFinished中有这么一段代码
BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
跟进BridgeUtil
public static void webViewLoadLocalJs(WebView view, String path){
String jsContent = assetFile2Str(view.getContext(), path);
view.loadUrl("javascript:" + jsContent);
}
h5页面加载完成之后执行assets下面的WebViewJavascriptBridge.js,然后将WebViewJavascriptBridge.js里面的一系列方法加入到window中。我们可以看WebViewJavascriptBridge.js中的代码。
window.WebViewJavascriptBridge = {
init: init,
send: send,
registerHandler: registerHandler,
callHandler: callHandler,
_fetchQueue: _fetchQueue,
_handleMessageFromNative: _handleMessageFromNative
};
这样WebViewJavascriptBridge对象就绑定到window中了。这是最重要的一步。接下来我们分两端来分析整个交互过程。
native注册方法供h5调用
注册方法webView.registerHandler("submitFromWeb") { data, function ->
function.onCallBack("submitFromWeb exe, response data 中文 from Java")
}
跟进registerHandler函数
Map<String, BridgeHandler> messageHandlers = new HashMap<String, BridgeHandler>();
public void registerHandler(String handlerName, BridgeHandler handler) {
if (handler != null) {
// 添加至 Map<String, BridgeHandler>
messageHandlers.put(handlerName, handler);
}
}
将注册的方法添加到messageHandlers中,handlerName是方法的名字,BridgeHandler是个接口
public interface BridgeHandler {
void handler(String data, CallBackFunction function);
}
用来回调h5传送的值和处理回传h5结果
h5端调用刚注册的submitFromWeb方法。趁热!!!
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
, {'param': '中文测试'}
, function(responseData) {
document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
}
);
跟进到WebViewJavascriptBridge.js中看callHandler
function callHandler(handlerName, data, responseCallback) {
_doSend({
handlerName: handlerName,
data: data
}, responseCallback);
}
跟进_doSend
var CUSTOM_PROTOCOL_SCHEME = 'yy';
var QUEUE_HAS_MESSAGE = '__QUEUE_MESSAGE__/';
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message.callbackId = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
分为有回调结果和没回调结果两种,有callback在message对象添加callbackId,然后将message对象添加到sendMessageQueue数组中,然后通过改变消息列表iframe的src触发shouldOverrideUrlLoading。消息列表iframe的创建代码也在WebViewJavascriptBridge.js中。
function _createQueueReadyIframe(doc) {
messagingIframe = doc.createElement('iframe');
messagingIframe.style.display = 'none';
doc.documentElement.appendChild(messagingIframe);
}
var doc = document;
_createQueueReadyIframe(doc);
接下来就看BridgeWebViewClient中shouldOverrideUrlLoading回调处理了。
String YY_OVERRIDE_SCHEMA = "yy://";
String YY_RETURN_DATA = YY_OVERRIDE_SCHEMA + "return/";
if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回数据
webView.handlerReturnData(url);
return true;
} else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) {
webView.flushMessageQueue();
return true;
}
第一个分支是处理返回数据,当前我们要看的是第二个分支,跟进flushMessageQueue代码。
重点关注
String JS_FETCH_QUEUE_FROM_JAVA = "javascript:WebViewJavascriptBridge._fetchQueue();"
void flushMessageQueue(){
loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
//具体数据处理
}
}
public void loadUrl(String jsUrl, CallBackFunction returnCallback) {
this.loadUrl(jsUrl);
// 添加至 Map<String, CallBackFunction>
responseCallbacks.put(BridgeUtil.parseFunctionName(jsUrl), returnCallback);
}
第一步调用请求数据的js方法,第二步把回调处理添加到responseCallbacks Map中。
继续跟到WebViewJavascriptBridge.js中
var CUSTOM_PROTOCOL_SCHEME = 'yy';
function _fetchQueue() {
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
if (messageQueueString !== '[]') {
bizMessagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
}
}
序列化消息队列,改变消息体的iframe的src将消息体回调到BridgeWebViewClient的shouldOverrideUrlLoading中,消息体添加在url中。消息体的iframe创建与消息列表的类似。
继续跟到shouldOverrideUrlLoading中
String YY_OVERRIDE_SCHEMA = "yy://";
String YY_RETURN_DATA = YY_OVERRIDE_SCHEMA + "return/";
if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回数据
webView.handlerReturnData(url);
return true;
} else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) {
webView.flushMessageQueue();
return true;
}
调用了handlerReturnData方法
void handlerReturnData(String url) {
String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
CallBackFunction f = responseCallbacks.get(functionName);
String data = BridgeUtil.getDataFromReturnUrl(url);
if (f != null) {
f.onCallBack(data);
responseCallbacks.remove(functionName);
return;
}
}
从responseCallbacks中取出对应的回调处理数据,具体消息从url过滤中json对象解析得来。
if (!TextUtils.isEmpty(callbackId)) {
//需要告诉h5端执行结果
responseFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
Message responseMsg = new Message();
responseMsg.setResponseId(callbackId);
responseMsg.setResponseData(data);
queueMessage(responseMsg);
}
};
}else{
responseFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
}
};
}
BridgeHandler handler;
if (!TextUtils.isEmpty(m.getHandlerName())) {
handler = messageHandlers.get(m.getHandlerName());
} else {
handler = defaultHandler;
}
if (handler != null){
handler.handler(m.getData(), responseFunction);
}
分为需要告诉h5执行结果和不需要两种,不需要告诉的什么都不做就不需要说了。需要告诉的设置message中的responseId和data,执行queueMessage。
private void queueMessage(Message m) {
if (startupMessage != null) {
startupMessage.add(m);
} else {
dispatchMessage(m);
}
}
startupMessage在onPageFinished中会置为null,具体的作用后面会讲到。这边会执行dispatchMessage方法。
String JS_HANDLE_MESSAGE_FROM_JAVA = "javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');";
void dispatchMessage(Message m) {
String messageJson = m.toJson();
//字符串转义特殊字符
String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);
// 必须要找主线程才会将数据传递出去 --- 划重点
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
this.loadUrl(javascriptCommand);
}
}
又回到了WebViewJavascriptBridge.js的_handleMessageFromNative中,把结果塞回到html中。
function _handleMessageFromNative(messageJSON) {
if (receiveMessageQueue) {
receiveMessageQueue.push(messageJSON);
}
_dispatchMessageFromNative(messageJSON);
}
function _dispatchMessageFromNative(messageJSON) {
setTimeout(function() {
var message = JSON.parse(messageJSON);
var responseCallback;
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
}
}
}
为了看得更清楚我画了一张图
h5注册方法供native调用
因为h5页面加载完成的时候WebViewJavascriptBridge对象还没有添加到window中,所以无法调用WebViewJavascriptBridge.registerHandler方法。这里有一个巧妙的做法。看下面的代码。
WebViewJavascriptBridge.js中创建了一个叫WebViewJavascriptBridgeReady自定义事件,加载到的时候立马执行。
var doc = document;
var readyEvent = doc.createEvent('Events');
readyEvent.initEvent('WebViewJavascriptBridgeReady');
doc.dispatchEvent(readyEvent);
html页面中添加了WebViewJavascriptBridgeReady事件的监听
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
connectWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler("functionInJs", function(data, responseCallback) {
document.getElementById("show").innerHTML = ("data from Java: = " + data);
if (responseCallback) {
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
}
});
})
也就是说增加了一个钩子,WebViewJavascriptBridge.js执行完成就能通知到html,随后就可以注册事件了,这边注册了一个叫functionInJs的事件。
native调用该方法
webView.callHandler("functionInJs", Gson().toJson(user)) { data ->
Log.e("处理结果", data)
}
跟进BridgeWebview的callHandler方法
public void callHandler(String handlerName, String data, CallBackFunction callBack) {
doSend(handlerName, data, callBack);
}
跟进doSend
private void doSend(String handlerName, String data, CallBackFunction responseCallback) {
Message m = new Message();
if (!TextUtils.isEmpty(data)) {
m.setData(data);
}
if (responseCallback != null) {
String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
responseCallbacks.put(callbackStr, responseCallback);
m.setCallbackId(callbackStr);
}
if (!TextUtils.isEmpty(handlerName)) {
m.setHandlerName(handlerName);
}
queueMessage(m);
}
组装Message,有responseCallback把responseCallback添加到responseCallbacks
跟进queueMessage
private void queueMessage(Message m) {
if (startupMessage != null) {
startupMessage.add(m);
} else {
dispatchMessage(m);
}
}
这边又看到了startupMessage,startupMessage就是在这里用的。这边startupMessage不为null,把消息添加到了startupMessage中。执行是在onPageFinished中。
if (webView.getStartupMessage() != null) {
for (Message m : webView.getStartupMessage()) {
webView.dispatchMessage(m);
}
webView.setStartupMessage(null);
}
走到了dispatchMessage
String JS_HANDLE_MESSAGE_FROM_JAVA = "javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');";
void dispatchMessage(Message m) {
String messageJson = m.toJson();
//字符串转义特殊字符
String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);
// 必须要找主线程才会将数据传递出去 --- 划重点
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
this.loadUrl(javascriptCommand);
}
}
跟进WebViewJavascriptBridge.js的_handleMessageFromNative
function _handleMessageFromNative(messageJSON) {
if (receiveMessageQueue) {
receiveMessageQueue.push(messageJSON);
}
_dispatchMessageFromNative(messageJSON);
}
走到_dispatchMessageFromNative
function _dispatchMessageFromNative(messageJSON) {
setTimeout(function() {
var message = JSON.parse(messageJSON);
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({
responseId: callbackResponseId,
responseData: responseData
});
};
}
var handler = WebViewJavascriptBridge._messageHandler;
if (message.handlerName) {
handler = messageHandlers[message.handlerName];
}
try {
handler(message.data, responseCallback);
} catch (exception) {
if (typeof console != 'undefined') {
console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", message, exception);
}
}
}
}
有回调的情况组装responseCallback,从messageHandlers找到对应的handler处理数据。回调数据在_doSend中发送
var CUSTOM_PROTOCOL_SCHEME = 'yy';
var QUEUE_HAS_MESSAGE = '__QUEUE_MESSAGE__/';
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message.callbackId = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}
改变消息体iframe的src,将回调数据返回到shouldOverrideUrlLoading中
void handlerReturnData(String url) {
String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
CallBackFunction f = responseCallbacks.get(functionName);
String data = BridgeUtil.getDataFromReturnUrl(url);
if (f != null) {
f.onCallBack(data);
responseCallbacks.remove(functionName);
return;
}
}
从responseCallbacks拿到对应的CallBackFunction回调数据,至此回调结果页拿到了。
其他
1.添加默认处理
function init(messageHandler) {
WebViewJavascriptBridge._messageHandler = messageHandler;
}
bridge.init(function(message, responseCallback) {
var data = {
'Javascript Responds': '测试中文!'
};
if (responseCallback) {
responseCallback(data);
}
});
2._dispatchMessageFromNative为什么要异步执行
为了两条数据消息不重叠,导致消息丢失。
总结
h5发送数据给native通过改变iframe的src回调到shouldOverrideUrlLoadingnative发送消息给h5通过loadurl