Osheep

时光不回头,当下最重要。

WebView 封装

WebView 是 Android 最复杂以及最强大的一个控件(最多坑) , 一大堆的 setting 让人摸不着头脑 , 很多时候压根不知道这个设置有什么用 ,加上 WebViewClient 和 WebChromeClient 做为内部类 , 一堆业务逻辑 , 使得 Activity 变得乱糟糟的 ,代码可读性更是糟糕透了 , 最后被逼上梁山 , 走上了封装的道路 。

WebView 封装思路

对于 WebView 的封装 , 相信很多人都是抽象在一个基类里面 , 封装成一个 BaseWebActivity , 或者 BaseWebFragment , 对于这种封装还是不能满足像我这种有洁癖有程序员的 , 因为复用性不高 , 而且容易导致 Activity 或者 Fragment 基类膨胀 。 下面向大家分享我的封装思路。

首先让大家看下我封装的效果

mAgentWeb = AgentWeb.with(this)//传入Activity
                .setAgentWebParent(mLinearLayout, new LinearLayout.LayoutParams(-1, -1))//传入AgentWeb 的父控件 ,如果父控件为 RelativeLayout , 那么第二参数需要传入 RelativeLayout.LayoutParams
                .useDefaultIndicator()// 使用默认进度条
                .defaultProgressBarColor() // 使用默认进度条颜色
                .setReceivedTitleCallback(mCallback) //设置 Web 页面的 title 回调
                .createAgentWeb()//
                .ready()
                .go("http://www.jd.com");

效果图

《WebView 封装》

jd.png

上面已经封装成一个 Web 库了 , 叫 AgentWeb , 欢迎大家使用 。

可以看到里面没有一句 WebSettings , 甚至 WebChromeClient 和 WebViewClient 都不用配置 , 使用的是简洁链式调用 。

AgentWeb 封装思路是通过代理 , 将 WebView 从 Activity 或者 Fragment 中代理出来 , 不再需要 Activity 或者 Fragment 内部创建和管理 ,Activity 管理 WebView 需要通过 AgentWeb , 下面通过 UML 图来简单说明下 .

BaseActivity 封装使用的 UML 关系图

《WebView 封装》

common_.png

AgentWeb 封装使用的 UML 关系图

《WebView 封装》

agentweb结构.png

BaseWebActivity 直接组合 WebView , 这样做为什么说复用性不高呢 ? 主要还是因为 WebView 依附在 BaseWebActivity 身上 ,要别人直接继承你的 Activity 是很不好的 ,因为 Java 的单继承关系 , 使得使用基类的灵活性受到很大的约束 , 这也是 Effective Java 里面提到的组合优先于继承 。

AgentWeb 则不同 , AgentWeb 是一个独立的库 , 可以让你很方便一句话就引入 , 不需要依赖 BaseWebActivity , 就像上面一样简简单单一句话引入即可。

AgentWeb 把 WebView 代理出来 , 将功能细分成一个类去管理 , 比如说的 WebCreator 负责创建 WebView 以及 进度条 、WebSettings 则是对 WebView 进行统一设置 , JsEntraceAccess 是对 Javascript 方法访问进行统一入口 , 这样做使得每一个功能独立 , 相互不影响 , 也使得 AgentWeb 的结构更清晰 , 符合单一职责原则 。 源码太多就不贴了 ,下面分享下封装 WebView 遇到的一些问题 。

WebView 封装的一些问题与解决思路

WebView 的封装可谓真是一波三折啊 , WebView 实在太多坑了 , 比如说 常见的泄露 , Js 安全 ,低版本跨源问题 , Context 引致的 onJsAlert 失效 ,Android 4.4 不支持文件选择问题等等。

内存泄露

这个问题在低版本不好解决就算类似下面代码通过反射制空 sConfigCallback 该字段, 还是有些手机会出现泄露 ,对于该问题 ,唯一有效方案解决在 AndroidManifest 里面为 Web Activity 添加 android:process=":web" 属性 , 然后在 该 Activity onDestroy 里面 执行 System.exit(0); 下面可以解决一部分泄露

                Field field = WebView.class.getDeclaredField("mWebViewCore");
                field = field.getType().getDeclaredField("mBrowserFrame");
                field = field.getType().getDeclaredField("sConfigCallback");
                field.setAccessible(true);
                field.set(null, null);

addJavascriptInterface API 引起的远程代码执行漏洞

对于这个问题 ,我相信大家或多或少都有点了解 ,问题是由注入类引起 ,从注入类中找到 Runtime 对象 ,可以通过 Runtime 执行 shell 命令 。 Google 只针对 Android 4.2.2 版本及以上版本给出了解决方法 ,为了解决兼容 4.2.2 以下版本这个问题 AgentWeb 采用 360 大牛给出的方案 , 向 Web 页面注入一段 Js 脚本 ,然后通过脚本弹 Prompt 向 Java 通信 ,解决了 4.2.2 以下版本 addJavascriptInterface 安全通信问题 。 下面给出大致实现

比如下面注入类

public class AndroidInterface {   
    public void callAndroid(final String msg) {
            Log.i("Info",""+msg);
    }
}
 mAgentWebView.addJavascriptInterface("android",new AndroidInterface()); //注意 mAgentWebView 是 WebView 子类 , 并重写了 addJavascriptInterface 方法 。

低于 Android 4.2.2 的版本上面的注入对象会经过包装拼接成如下脚本 。

注入的脚本

.....省略N多 Js 代码
android.callAndroid = function() {
        .....省略N多 Js 代码
        var m = prompt('AgentWeb: ' + JSON.stringify({method: l, types: e, args: f}));
        var g = JSON.parse(m);
        if (g.code != 200) {
            throw "Android call error, code:" + g.code + ", message:" + g.result
        }
        return g.result
    };

通过 webView.loadUrl(脚本) 注入上面的脚本 。

Js 执行下面方法

function sendHelloToAndroid() {    
        window.android.callAndroid("你好,Android! ");
  }

就会执行上面的 function 里面的方法体 ,Android 端回调onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) message 参数里面取出 js 要调的目标方法 , 然后通过反射调用该目标方法 。

对于同源跨域攻击问题

什么是同源策略吗 ? 同源策略是由 Netscape 提出来的 ,现在主流的浏览器都遵循这种策略 ,同源是一般指http://(协议)www.google.com(主机):8080 (端口) 三要素都相同 ,但实际上并不是那么严格 , 比如 IE 就会忽略对端口的判断 。

同源有什么作用吗 ?
同源的数据默认为可以安全访问的 。 比如说 url http://www.google.com:xxxx/login 登录后浏览器就会把返回来的 cookies 保存起来 , 对于 http://www.google.com:xxxx/index.html 对于这个 url 浏览器会默认为跟前者同源 , 那么这个 url 可以无缝的访问到 login 保存下来的 cookies 。

大家都知道 Android 应用之间的文件和数据一般情况下是不能相互访问的 , 但是不正确的使用 WebView ,会打破这种状况 , 比如说以下这种使用

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);
        webView = (WebView) findViewById(R.id.webView1);
        webView.getSettings().setAllowFileAccess(true);                    
        webView.getSettings().setJavaScriptEnabled(true);                   
        webView.getSettings().setAllowFileAccessFromFileURLs(true);       
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true); 
        Intent i = getIntent();
        String url = i.getData().toString(); 
        webView.loadUrl(url);
    }

将该 Activity 设置 exported=”true” , 其他应用就可以通过隐式启动 ,将 data 作为 url ,启动的该应用 , 让该应用加载脚本 ,遍历该应用内的文件或者私密文件 , 上传服务器 。

这个问题一直存在 Android 手机中 ,这个问题 Google 并没有修复它 , 只是在 4.2 后的版本把 setAllowFileAccessFromFileURLs 以及 mWebSettings.setAllowUniversalAccessFromFileURLs 设置为 false , 用户没有刻意去开启它 , 高于 Android 4.2 版本默认是安全的 。 对于该问题 AgentWeb 使用的是以下设置 。

         mWebSettings.setAllowFileAccess(true); //允许file 协议 , 加载本地文件  
         mWebSettings.setAllowFileAccessFromFileURLs(false); //禁止通过 file url 加载的文件执行 Javascript 读取其他的本地文件 .
         mWebSettings.setAllowUniversalAccessFromFileURLs(false);//禁止通过 file url 加载的文件执行 Javascript 可以访问其他的源 如  http , https 。

Context 引致的 onJsAlert 失效

这个问题根本原因在防止泄露时候创建 new WebView(activity.getApplicationContext()); 导致 , 很正常啊 , 因为你创建 WebView 传的是 Application , Application 本身是无法弹 Dialog 的 。 所以只能无反应 !这个问题解决方案只要你创建 WebView 时候传入 Activity , 或者 自己实现 onJsAlert 方法即可。

Android 4.4 文件访问

Android 4.4 WebView 内核正式有 WebKit 替换 为 Chromium 使得很多 Api 都废弃掉了 , 这是 Google 正式宣告抛弃 Webkit 的一个句号 。 所以要兼容 Android 4.4 以下的 WebView 的应用特别难受 。 回到正题 , 4.4 文件访问 , 你会发现 4.4 点击 input 标签没反应 , 瞬间一万只曹尼玛在崩腾 , 幸庆的是还有 Js 通信 ,解决方案:可以通能过 Js 访问 Java 然后打开文件选择器 , 拿到文件后 , 将文件转成 Base64 字符串回传给 Js , 因为拿到的文件路径是 Content:// 开头 JS 是无法解析的 。(这个代码跨度有点大 , 就不贴源码了 , 有兴趣可以克隆仓库看下)

WebView 封装后使用

App 下载

AgentWeb 在 Fragment 中使用

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        mAgentWeb = AgentWeb.with(this)// Fragment  传入
                .setAgentWebParent((LinearLayout) view, new LinearLayout.LayoutParams(-1, -1))// 设置 AgentWeb 的父控件 , 这里的view 是 LinearLayout , 那么需要传入 LinearLayout.LayoutParams
                .useDefaultIndicator()// 使用默认进度条
                .setReceivedTitleCallback(mCallback) //标题回调
                .setSecurityType(AgentWeb.SecurityType.strict) //注意这里开启 strict 模式 , 设备低于 4.2 情况下回把注入的 Js 全部清空掉 , 这里推荐使用 onJsPrompt 通信
                .createAgentWeb()//
                .ready()//
                .go(getUrl());

    }

跟原先 WebFragment 比简洁多了 。

Js 调用 。

function callByAndroid(msg1,msg2){
      console.log("callByAndroid")
  }

没有经过封装的

mWebView.loadUrl("javascript:callByAndroid("+"\"hello\""+","+"\" js\""+")");

封装后

mAgentWeb.getJsEntraceAccess().quickCallJs("callByAndroid","Hello","js");

Github

点赞