Detailed example Android Webview intercepts ajax requests

Although Android Webview provides a hook for page loading and resource requests, it does not provide an interface for interfering ajax requests for h5, which means that we cannot interfere with http requests initiated by javascript in the webview. Sometimes we do need to be able to intercept ajax requests and implement some functions such as: unified network request management, cookie synchronization, certificate verification, access control, etc.

Ideas

Although it is impossible to directly intercept ajax request in the Webview (in fact, ajax request can be received in shouldInterceptRequest, unfortunately, the request parameters cannot be retrieved, which is meaningless). We can change our thinking and whether we can forward all requests to native in js, so that the same purpose is achieved. If possible, it is necessary to communicate between JavaScript and native. Through it, JavaScript passes request information to native, and then passes the result data to JavaScript after the real request is completed. Then our idea is:

Intercept all ajax requests in javascript and pass request information to native via javascript bridge
After native receives the request information, it performs some processing logic, then completes this request, and passes the request result back to javascript through javascript bridge.
In this way, after receiving the request information in the second step native, we can perform unified network request management, cookie synchronization, certificate verification, and access control. Although the idea is simple, it is quite troublesome to implement, because both the front-end and native require a lot of work. So is there any easy way? Of course there is!

wheel

It is a lightweight, cross-platform Javascript http request library that supports request redirection. The front-end can use it to easily initiate network requests, and it will automatically forward the request to native. Now that the first problem has been solved, we need to choose a javascript bridge, and now there are a lot of open source javascript bridges, you can choose any one you like. However, here I strongly recommend DSBridge. It is a very simple cross-platform javascript birdge that supports synchronization. The most important thing is that there are examples of receiving and processing forwarded http requests in the demo of DSBridge, and it gives an okhttp implementation. Moreover, ](/wendux/fly) also provides the DSBridge adapter. Let's use DSBridge as an example to demonstrate the whole process:

Example

front end

//Introduce dsbridge adaptervar adapter = require("flyio/dist/npm/adapter/dsbridge")
var EngineWrapper = require("flyio/dist/npm/engine-wrapper")
var dsEngine = EngineWrapper(adapter)
var fly = new Fly(dsEngine);

//Next, the ajax requests initiated by fly will be forwarded to native('/user', {
  name: 'Doris',
  age: 24
  phone:"18513222525"
 })
 .then(function (response) {
  (response);
 })
 .catch(function (error) {
  (error);
 });

Native end

 @JavascriptInterface
 public void onAjaxRequest(JSONObject jsonObject, final CompletionHandler handler){
  //jsonObject is the request object passed to the end by fly adapter  //After completing the request on the terminal, return the response object to the fly adapter through the handle.  //hanlder(response)
 }

The adapter in dsbridge will call Native's onAjaxRequest method. Native only needs to implement this method. The complete request implementation can refer to the implementation of AjaxHandler in DSbridge demo.