JsBridge源碼詳解

時間  2019-11-08
標籤 jsbridge 源碼 詳解 简体版
原文   原文鏈接

使用jsbridge的緣由

原生webview h5調用native方法使用addJavaScriptInterface，然而4.2如下系統沒有對註冊java類的方法作限制，致使攻擊者能夠利用反射調用其餘未註冊的任何java類。出於安全性考慮使用jsbridge來處理h5和native的交互。javascript

項目地址

github.com/lzyzsd/JsBr…html

使用方法/兩端增長的額外代碼比較少

1.native註冊方法供h5調用 
webView.registerHandler("submitFromWeb") { data, function ->
            function.onCallBack("submitFromWeb exe, response data 中文 from Java")
        }
複製代碼

2.native調用h5方法java

webView.callHandler("functionInJs", Gson().toJson(user)) { data ->
            Log.e("處理結果", data)
        }
複製代碼

3.h5註冊方法供native調用git

bridge.registerHandler("functionInJs", function (data, responseCallback) {
            if (responseCallback) {
                let responseData = "Javascript Says Right back aka!";
                responseCallback(responseData);
            }
        })
複製代碼

4.h5調用native的方法github

window.WebViewJavascriptBridge.callHandler(
            'submitFromWeb'
            , {'param': '中文測試'}
            , function (responseData) {
                document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
            }
        );
複製代碼

源碼解析

從上面的使用中能夠看到window.WebViewJavascriptBridge和bridge對象，window中好像沒有這些對象？WebViewJavascriptBridge從哪裏來？web

答案在BridgeWebViewClient的onPageFinished中json

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中的代碼。bash

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回調到shouldOverrideUrlLoading native發送消息給h5經過loadurl
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程