EasyBridge:A new design of JS-Brdige

EasyBridge:A new design of JS-Brdige

EasyBridge is an easy-to-use js-bridge tool library that provides the ability to communicate between JavaScript and Java in everyday development. Unlike other common js-bridge toolkit implementations, EasyBridge has the following features:

  • Base on the addJavaScriptInterface()feature of Android WebView;
  • Define your seuciry policy and execute the security check on two strategies,making the js-bridge more secure;
  • Lightweight and easy to use. Adding the dependency of EasyBridge, only the actual communication interface needs to be written
  • APT tech is supported

You can find more features and details on my Github Repository.

Implementation principle

Hybrid development has always been a promising technology for mobile terminal development in the industry. In combination with the features of h5, it can better support the needs of business development. It not only enables rapid on-line deployment, but also can quickly respond to online bugs. Current hybrid development programs include:

EasyBridge is a simple JSBridge solution. Among the numerous solutions, the open access rights and interfaces of the system’s WebView are used to open the communication channels between Java and JavaScript. The implementation principles of these solutions include:

  • Intercept onJsPrompt() method

When the page in WebView calls the window.prompt() method in JavaScript, this method is called back. And this method can not only get the contents of the string string passed by JavaScript, but also can return a string string content received by JavaScript, is a quite suitable entrance method to build the bridge.

  • Intercept the shouldOverrideUrlLoading()method

This method is called back when the page reloads the URL or the page’s iframe element reloads the new URL.

  • Provide addJavaScriptInterface()interface

This interface is simple but powerful. Through this interface, we can directly map the objects defined in Java to a corresponding object in JavaScript and make it directly call the methods in Java. However, there are serious problems in android 4.1 and earlier versions. The loopholes have always been ignored.

Among of these solutions, EasyBridge chose the addJavaScriptInterface()interface as the basis of the solution, mainly based on the following considerations:

  • At present, the Android version has reached the 9.0 version. The pre-Android 4.4 version of the mobile phone has a very low market share. Many businesses have set the minimum compatible version at 4.2 or higher. Therefore, there is no need to consider the following vulnerabilities in 4.1.
  • addJavaScriptInterface() can provide the simplest synchronous call
  • addJavaScriptInterface() combined with evaluateJavascript()/loadUrl to bring a simpler asynchronous call solution

Program structure

The structure of EasyBridge is shown in the figure below:

EasyBridge will inject two JavaScript objects into the page in total:

  1. easyBridge

When the page is loaded to 25% or more (onProgressChanged()) , it is injected by executing a js file in the library. The main purpose of this object is to define the JavaScript code of the business page to call the specification entry of the native Java code. The most critical function defined in the object is callHandler(handlerName, args, callback), which is the entrance of the bridge. In fact, inside this method, it is finally through the following _easybridge object to enter the Java code layer.

2. _easybridge

An object is mapped and injected via addJavaScriptInterface() , which provides the actual eunqueue() entry method. In this method, the route of the code goes from the JavaScript layer to the Java layer, which opens the interaction between the two.

Interface distribution

In fact, we can open many interfaces to the JavaScript layer by using the @JavascriptInterface annotation. We can also map multiple Java objects to the JavaScript layer through addJavaScriptInterface(). However, the EasyBridge design provides only one entry for simplicity and communication convenience.. All functions that need to be open to the JavaScript layer are handled by building interface instances.

The definition of the interface is as follows:

public interface BridgeHandler {
    String getHandlerName();
​    void onCall(String parameters, ResultCallBack callBack);
​    SecurityPolicyChecker securityPolicyChecker();

The actual workflow is shown below:

Initially you need to register all business interfaces that can be called by the JavaScript layer. During the running process, the eunqueue() entry will find the corresponding instance of the processing interface through the interface name according to the protocol definition and trigger the interface response. Therefore, in fact, the _easyBrdige object (in fact, an instance of EasyBridge in the Java layer) is a hub station that performs task assignment and delivery of results.

Security Control

Both the EasyBridgeWebView and each BridgeHandler instance can define its own security control policy, corresponding to an instance of SecurityPolicyChecker. Its definition is as follows:

public interface SecurityPolicyChecker {
    boolean check(String url, String parameters);

Start Using it

EasyBridge is an extremely easy-to-use solution that requires only a few simple steps to communicate with the JavaScript layer and the Java layer.

Star my Github repository and get the sample demo,hope you can enjoy it.If you have any questions about it ,submit you Issue ,and I will handle it quickly,thanks.

Author: Pawan Kumar

Leave a Reply

Close Menu
%d bloggers like this:
Skip to toolbar