Android WebView通过动态的修改js去拦截post请求参数实例

时间:2022-07-27
本文章向大家介绍Android WebView通过动态的修改js去拦截post请求参数实例，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

需求背景:

需要在用户点击提交按钮的时候拦截用户提交的数据。

遇到的问题:

1.页面不是自家前端做的,不能修改网页中的代码

2.要拦截的请求不是get请求,而是一个post请求 (难点在于:如果拦截的请求是get请求的话,我只需要拿到url,将后面拼接的参数键值对取出来就好了,但是post请求的参数键值对我们是看不到的。。。)

解决重点:

重写webViewClient的shouldInterceptRequest这个方法

1.这个方法是API21以后才出现的,还有一个过时的方法也要重写,不要忘了!

2.在加载网页时,所有的资源都会经过shouldInterceptRequest这个方法,我们可以通过shouldInterceptRequest和抓包工具(Fidder,Charles)去获取你想要获取信息的网址和资源文件

3.这个方法是执行在子线程的,如果你想要更新UI的话,记得切换线程

解决方案:

我这里找到了两种解决方案(总有一款适合你)

方案A : 适合 精通js 的大大们

1.拦截页面上按钮的点击事件,将点击事件的操作进行替换 

$('#J_submit').off('click'); //1.将id为J_submit的按钮点击事件关闭
$('#J_submit').on('click',function(){ //2.将id为J_submit的按钮点击事件重新打开,并执行function里的内容
 if ($(this).hasClass("btn-disabled")) { // -----  此处为原页面代码,不做解释  -----
    return;
   }
 
   try {
    trackDealerEvent('dlr_order_page_form_submit_click', {
     'esfrom': _mediaId,
     'business': 'songshu',
     'series': _seriesId,
     'city': _cityId
    });
   } catch (e) {
    console.log(e);
   }   // -----  此处为原页面代码,不做解释  -----
 var pageFormData = validateAllField(alertDiv);
 if (pageFormData) {  //3.获取到页面内的数据
  $.ajax({  //4.ajax方式上传到服务器中
   url: 'https://gouche.jxedt.com/gouche/clue/submit',
   data: {
   cityid: _cityId,
   brandid: _brandId,
   seriesid: _seriesId,
   classesid: _specId,
   name: $("[name='userName']").val(),
   phone: $('#phoneNumber').val(),
   type: 4
   }
  });
  postOrder(pageFormData);
 }
})

2.动态的加载一段js代码 

mCommonWebView.setCommonWebViewClient(new CommonWebViewClient() { //添加自定义的 WebViewClient
 @Override
 public void onPageFinished(WebView view, String url) { //重写onPageFinished方法
  super.onPageFinished(view, url);
  //请求js的网址
  runRemoteJs(Constant.QueryCarPrice.loadJsUrl_CarHome);
 }
 
 private void runJs(String remoteJs){ //把获取到的js代码添加到当前网页
  if(TextUtils.isEmpty(remoteJs)) {
   return;
  }
  String js = "javascript:";  //作用:指明字符串后面的都是js代码
  js+= "var script = document.createElement('script');"; // 作用:创建script节点
  js+= "script.type = 'text/javascript';"; 
  js+=remoteJs;
  mCommonWebView.callJsFunction(js); //加载js代码
 }
 
 private void runRemoteJs(String url) {//前端大大提供的一个网址,网址里面就是上面的js代码,将网页中的代码获取下来
  RxRequest<String  request = new RxRequest<String ()
    .setUrl(url)
    .setMethod(Request.Method.GET);
  RxHttpEngineWrapper.commonExec(request)
    .subscribeOn(AndroidSchedulers.mainThread())
    .subscribe(new UtilsRx.DefaultSubscriber<String (){
   @Override
   public void onNext(String s) {
    runJs(s);
   }
  });
 }
});

3.到时候只要前端的大大修改页面中的js就可以了

此方案的坑:

1.要加载的js代码中不能包含script节点

2.要加载的js代码中不能有注释

3.要加载的js代码一定要加上分号

*如果不满足上面的三点要求,要加载的js都不能正确的执行

方案B : 原生的Android方式,相对于上一种方案,这种方案比较麻烦

1.重写shouldInterceptRequest去拦截资源

2.将第三方网页上进行网络请求的js页面下载下来(就是把网页的所有下载下来,找到进行网络请求的js页),对js页进行修改

3.将处理好的js页加载到本地,以后加载时就利用本地的js替换第三方的js(我会在本地的js页面中添加与webview沟通的桥梁)

//以下为具体操作,我把具体的方法贴了上去,如果不太懂的可以看看代码,我写了注释
//初始化WebView
private void initWebView() {
mWebView.getSettings().setDomStorageEnabled(true);
mWebView.getSettings().setDefaultTextEncodingName("utf-8");
if(Build.VERSION.SDK_INT  =21){//Added in API level 21
mWebView.getSettings().setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setUseWideViewPort(true); //设置webview推荐使用的窗口，使html界面自适应屏幕
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setGeolocationEnabled(true);
mWebView.getSettings().setAllowFileAccess(true);
if (Build.VERSION.SDK_INT  = 16) {
//屏蔽Webview的跨域漏洞
mWebView.getSettings().setAllowFileAccessFromFileURLs(false);
mWebView.getSettings().setAllowUniversalAccessFromFileURLs(false);
}
mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
if (Build.VERSION.SDK_INT  = 11) {
mWebView.getSettings().setAllowContentAccess(true);
}
mWebView.loadUrl(currUrl);
mWebView.setWebViewClient(new MyWebViewClient());
//与js通讯的桥梁
mWebView.addJavascriptInterface(new StubClass(),"stub");
}
public class MyWebViewClient extends WebViewClient {
/*两个shouldInterceptRequest方法体中的内容大致相同,因为是demo,我也没有抽取方法*/
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
//获取的请求参数的 Map 集合
HashMap<String,String  params;
Uri uri=Uri.parse(url);  //获取网址对应的Uri
if (rightUrl(uri.toString())) {
/*get请求获取参数*/
params=paramForGET(uri);
/*重头戏,post请求获取参数*/
/*
* 获取post请求参数的思路就是:
* 找到其网址中进行网络请求的js代码,对这段js代码进行替换
* 我采取的是拦截第三方网址上请求数据的js资源,将本地的资源提交上去替换原资源
*/
if (uri.toString().contains("index.js")) {      //拦截该网页下对应的js资源并进行替换
try {
//WebResourceResponse的构造器三个参数作用 String mimeType:指定替换资源的类型  String encoding:字符集  InputStream input:输入流
return new WebResourceResponse("application/x-javascript","UTF-8",getAssets().open("index.js"));
} catch (IOException e) {
e.printStackTrace();
}
}
}
return super.shouldInterceptRequest(view, url);
}
//API21及21以后才支持此方法
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
//获取的请求参数的 Map 集合
HashMap<String,String  params;
String method=request.getMethod();         //当前网址的提交方式
Map<String, String  requestHeaders = request.getRequestHeaders(); //获取请求头
Uri uri=request.getUrl();           //获取网址对应的Uri
if (rightUrl(uri.toString())) {
/*get请求获取参数*/
params=paramForGET(uri);
/*重头戏,post请求获取参数*/
/*
* 获取post请求参数的思路就是:
* 找到其网址中进行网络请求的js代码,对这段js代码进行替换
* 我采取的是拦截第三方网址上请求数据的js资源,将本地的资源提交上去替换原资源
*/
if (uri.toString().contains("index.js")) {      //拦截该网页下对应的js资源并进行替换
try {
//WebResourceResponse的构造器三个参数作用 String mimeType:指定替换资源的类型  String encoding:字符集  InputStream input:输入流
return new WebResourceResponse("application/x-javascript","UTF-8",getAssets().open("index.js"));
} catch (IOException e) {
e.printStackTrace();
}
}
}
return super.shouldInterceptRequest(view, request);
}
private boolean rightUrl(String url){
if (url.contains(COLLECT_URL))         //判断资源网址是否是我需要的
return true;
return false;
}
private HashMap<String,String  paramForGET(Uri uri){
HashMap<String,String  params=new HashMap< ();
Set<String  paramNames = uri.getQueryParameterNames();   //获取此get请求中所有的参数名
/*我这里是将所有的参数都填了进去,大家在获取的时候可以进行筛选和过滤*/
for (String param : paramNames) {
params.put(param,uri.getQueryParameter(param));    //存储键值对
}
return params;
}
}
public class StubClass{
@JavascriptInterface
public void getData(String json){
Log.i("xxx","json -  "+json);
}
}

这是我本地的js，对原来的js进行了修改，添加了与Android通讯的桥梁，来截取数据。

补充知识：android WebView使用Post请求和设置浏览器弹框

这里要注意：post请求参数只能传byte数组，而且必须是键值对字符串形式的byte数组，其中的key是后台服务器接收key，后台规定key是什么值就是什么值，不能随意更改，没有key=value格式或者key不正确，都会请求不到数据网页打不开。

下面代码直接看initWebView()方法就好 

package com.xxxxx.xxx.activity.banksign;
import org.json.JSONException;
import org.json.JSONObject;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import com.xinzong.etc.R;
import com.xinzong.xx.base.BaseGestureActivty;
import com.xinzong.xxx.utils.ShowReloadUtil;
/**
* 
* @author 
*
*/
public class WebViewActivity extends BaseGestureActivty implements OnClickListener{
private ShowReloadUtil reloadUtil;
private String url = "http://120.1.1.1/xx/xxxx";
private WebView webView;
private String urlParameter = "";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sign_webview);
findViewById(R.id.ibBack).setOnClickListener(this);
//获取传过来的支付参数
urlParameter = getIntent().getStringExtra("urlParameter");
Log.i("TAG", urlParameter);
//初始化重新加载框
reloadUtil = new ShowReloadUtil(this);
reloadUtil.setReloadView(this, R.id.ll_show_data_mc,
R.id.rl_reload_parent_mc);
//刷新界面，加载webview
refresh();
}
private void refresh() {
if(isNetworkConnected()){
findView(R.id.webview1).setVisibility(View.VISIBLE);
reloadUtil.showDataView();
initWebView();
}else{
findView(R.id.webview1).setVisibility(View.GONE);
reloadUtil.showReload();
}
}
private void initWebView() {
webView = (WebView) findViewById(R.id.webview1);
//初始化webview
//启用支持javascript
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);//支持javaScript
settings.setDefaultTextEncodingName("utf-8");//设置网页默认编码
settings.setJavaScriptCanOpenWindowsAutomatically(true);
Log.d("TAG", "url:"+url);
//post请求(使用键值对形式，格式与get请求一样，key=value,多个用&连接)
urlParameter = "JSONpriKey=" +urlParameter;
webView.postUrl(url, urlParameter.getBytes());
//	  webView.loadUrl(url);//get
webView.setWebChromeClient(new MyWebChromeClient());// 设置浏览器可弹窗 
//覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//返回值是true的时候控制去WebView打开，为false调用系统浏览器或第三方浏览器
Log.d("TAG", "url:"+url);
view.loadUrl(url);
return true;
}
@Override
public void onPageStarted(WebView view, String url,
Bitmap favicon) {
Log.d("TAG", "onPageStarted--url:"+url);
//支付完成后,点返回关闭界面
if(url.endsWith("http://120.1.1.1/xxx/xx/xxx")){
finish();
}
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
});
}
@Override
public void onClick(View v) {
if (v.getId() == R.id.btnReload) {// 点击 ‘重新加载'
reloadUtil.showClickloadingView();
Log.d("TAG", "RELOAD");
if (this.isNetworkConnected()) {
webView.loadUrl(url);
} else {
reloadUtil.showReload();
}
}else if(v.getId() == R.id.ibBack){
if(webView !=null && webView.canGoBack()){
webView.goBack();
}else{
finish();
}
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_BACK && webView !=null && webView.canGoBack()){
webView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
/** 
* 浏览器可弹窗 
* 
* @author Administrator 
* 
*/ 
final class MyWebChromeClient extends WebChromeClient { 
@Override 
public boolean onJsConfirm(WebView view, String url, String message, 
final JsResult result) { 
new AlertDialog.Builder(CTX) 
.setTitle("App Titler") 
.setMessage(message) 
.setPositiveButton(android.R.string.ok, 
new DialogInterface.OnClickListener() { 
public void onClick(DialogInterface dialog, 
int which) { 
result.confirm(); 
} 
}) 
.setNegativeButton(android.R.string.cancel, 
new DialogInterface.OnClickListener() { 
public void onClick(DialogInterface dialog, 
int which) { 
result.cancel(); 
} 
}).create().show(); 
return true; 
} 
} 
}

以上这篇Android WebView通过动态的修改js去拦截post请求参数实例就是小编分享给大家的全部内容了，希望能给大家一个参考。

随机文章
Javascript知识点必读
最近更新