目录介绍

  • 01.基础使用目录介绍

    • 1.0.1 常用的基础介绍
    • 1.0.2 Android调用Js
    • 1.0.3 Js调用Android
    • 1.0.4 WebView.loadUrl(url)流程
    • 1.0.5 js的调用时机分析
    • 1.0.6 清除缓存数据方式有哪些
    • 1.0.7 如何使用DeepLink
    • 1.0.8 应用被作为第三方浏览器打开
  • 02.优化汇总目录介绍
    • 2.0.1 视频全屏播放按返回页面被放大
    • 2.0.2 加快加载webView中的图片资源
    • 2.0.3 自定义加载异常error的状态页面
    • 2.0.4 WebView硬件加速导致页面渲染闪烁
    • 2.0.5 WebView加载证书错误
    • 2.0.6 web音频播放销毁后还有声音
    • 2.0.7 DNS采用和客户端API相同的域名
    • 2.0.8 如何设置白名单操作
    • 2.0.9 后台无法释放js导致发热耗电
    • 2.1.0 可以提前显示加载进度条
    • 2.1.1 WebView密码明文存储漏洞优化
  • 03.问题汇总目录介绍
    • 3.0.0 WebView进化史介绍
    • 3.0.1 提前初始化WebView必要性
    • 3.0.2 x5加载office资源
    • 3.0.3 WebView播放视频问题
    • 3.0.4 无法获取webView的正确高度
    • 3.0.5 使用scheme协议打开链接风险
    • 3.0.6 如何处理加载错误
    • 3.0.7 webView防止内存泄漏
    • 3.0.8 关于js注入时机修改
    • 3.0.9 视频/图片宽度超过屏幕
    • 3.1.0 如何保证js安全性
    • 3.1.1 如何代码开启硬件加速
    • 3.1.2 WebView设置Cookie
    • 3.1.4 webView加载网页不显示图片
    • 3.1.5 绕过证书校验漏洞
    • 3.1.6 allowFileAccess漏洞
    • 3.1.7 WebView嵌套ScrollView问题
    • 3.1.8 WebView中图片点击放大
    • 3.1.9 页面滑动期间不渲染/执行
    • 3.2.0 被运营商劫持和注入问题
    • 3.2.1 解决资源加载缓慢问题
    • 3.2.2 判断是否已经滚动到页面底端
    • 3.2.3 使用loadData加载html乱码
    • 3.2.4 WebView下载进度无法监听
    • 3.2.5 webView出现302/303重定向

x5封装库YCWebView开源项目地址

  • https://github.com/yangchong211/YCWebView
  • 该后续知识点,几乎包含了实际开发中绝大多数的问题,再次学习和巩固webView,希望这篇文章对你有用……更多内容,可以看我的开源项目,如果觉得给你带来一些收获,麻烦star一下,这也可以增加开发者开源项目的动力!

01.基础使用目录介绍

1.0.1 常用的基础介绍

  • 在activity中最简单的使用

  • 那些因素影响页面加载速度
    • 影响页面加载速度的因素有非常多,在对 WebView 加载一个网页的过程进行调试发现

      • 每次加载的过程中都会有较多的网络请求,除了 web 页面自身的 URL 请求
      • 有 web 页面外部引用的JS、CSS、字体、图片等等都是个独立的http请求。这些请求都是串行的,这些请求加上浏览器的解析、渲染时间就会导致 WebView 整体加载时间变长,消耗的流量也对应的真多。

1.0.2 Android调用Js

  • 第一种方式:native 调用 js 的方法,方法为:

    • 注意的是名字一定要对应上,要不然是调用不成功的,而且还有一点是 JS 的调用一定要在 onPageFinished 函数回调之后才能调用,要不然也是会失败的。
  • 第二种方式:
    • 如果现在有需求,我们要得到一个 Native 调用 Web 的回调怎么办,Google 在 Android4.4 为我们新增加了一个新方法,这个方法比 loadUrl 方法更加方便简洁,而且比 loadUrl 效率更高,因为 loadUrl 的执行会造成页面刷新一次,这个方法不会,因为这个方法是在 4.4 版本才引入的,所以使用的时候需要添加版本的判断:
  • 两种方式的对比
    • 一般最常使用的就是第一种方法,但是第一种方法获取返回的值比较麻烦,而第二种方法由于是在 4.4 版本引入的,所以局限性比较大。
  • 注意问题
    • 记得添加ws.setJavaScriptEnabled(true)代码

1.0.3 Js调用Android

  • 第一种方式:通过 addJavascriptInterface 方法进行添加对象映射

    • 这种是使用最多的方式了,首先第一步我们需要设置一个属性:
    • 这个函数会有一个警告,因为在特定的版本之下会有非常危险的漏洞,设置完这个属性之后,Native需要定义一个类:

      • 在 API17 版本之后,需要在被调用的地方加上 @addJavascriptInterface 约束注解,因为不加上注解的方法是没有办法被调用的
    • JS 代码调用

      • 这种方式的好处在于使用简单明了,本地和 JS 的约定也很简单,就是对象名称和方法名称约定好即可,缺点就是要提到的漏洞问题。
  • 第二种方式:利用 WebViewClient 接口回调方法拦截 url
    • 这种方式其实实现也很简单,使用的频次也很高,上面介绍到了 WebViewClient ,其中有个回调接口 shouldOverrideUrlLoading (WebView view, String url)) ,就是利用这个拦截 url,然后解析这个 url 的协议,如果发现是我们预先约定好的协议就开始解析参数,执行相应的逻辑。注意这个方法在 API24 版本已经废弃了,需要使用 shouldOverrideUrlLoading (WebView view, WebResourceRequest request)) 替代,使用方法很类似,我们这里就使用 shouldOverrideUrlLoading (WebView view, String url)) 方法来介绍一下:

      • 代码很简单,这个方法可以拦截 WebView 中加载 url 的过程,得到对应的 url,我们就可以通过这个方法,与网页约定好一个协议,如果匹配,执行相应操作。
    • JS 代码调用
    • 存在问题:这个代码执行之后,就会触发本地的 shouldOverrideUrlLoading 方法,然后进行参数解析,调用指定方法。这个方式不会存在第一种提到的漏洞问题,但是它也有一个很繁琐的地方是,如果 web 端想要得到方法的返回值,只能通过 WebView 的 loadUrl 方法去执行 JS 方法把返回值传递回去,相关的代码如下:
  • 第三种方式:利用 WebChromeClient 回调接口的三个方法拦截消息
    • 这个方法的原理和第二种方式原理一样,都是拦截相关接口,只是拦截的接口不一样:
    • 和 WebViewClient 一样,这次添加的是WebChromeClient接口,可以拦截JS中的几个提示方法,也就是几种样式的对话框,在 JS 中有三个常用的对话框方法:

      • onJsAlert 方法是弹出警告框,一般情况下在 Android 中为 Toast,在文本里面加入\n就可以换行;
      • onJsConfirm 弹出确认框,会返回布尔值,通过这个值可以判断点击时确认还是取消,true表示点击了确认,false表示点击了取消;
      • onJsPrompt 弹出输入框,点击确认返回输入框中的值,点击取消返回 null。
    • 但是这三种对话框都是可以本地拦截到的,所以可以从这里去做一些更改,拦截这些方法,得到他们的内容,进行解析,比如如果是 JS 的协议,则说明为内部协议,进行下一步解析然后进行相关的操作即可,prompt 方法调用如下所示:
    • 需要注意的是 prompt 里面的内容是通过 message 传递过来的,并不是第二个参数的 url,返回值是通过 JsPromptResult 对象传递。为什么要拦截 onJsPrompt 方法,而不是拦截其他的两个方法,这个从某种意义上来说都是可行的,但是如果需要返回值给 web 端的话就不行了,因为 onJsAlert 是不能返回值的,而 onJsConfirm 只能够返回确定或者取消两个值,只有 onJsPrompt 方法是可以返回字符串类型的值,操作最全面方便。
  • 以上三种方案的总结和对比
    • 以上三种方案都是可行的,在这里总结一下
    • 第一种方式:是现在目前最普遍的用法,方便简洁,但是唯一的不足是在 4.2 系统以下存在漏洞问题;
    • 第二种方式:通过拦截 url 并解析,如果是已经约定好的协议则进行相应规定好的操作,缺点就是协议的约束需要记录一个规范的文档,而且从 Native 层往 Web 层传递值比较繁琐,优点就是不会存在漏洞,iOS7 之下的版本就是使用的这种方式。
    • 第三种方式:和第二种方式的思想其实是类似的,只是拦截的方法变了,这里拦截了 JS 中的三种对话框方法,而这三种对话框方法的区别就在于返回值问题,alert 对话框没有返回值,confirm 的对话框方法只有两种状态的返回值,prompt 对话框方法可以返回任意类型的返回值,缺点就是协议的制定比较麻烦,需要记录详细的文档,但是不会存在第二种方法的漏洞问题。

1.0.4 WebView.loadUrl(url)流程

  • WebView.loadUrl(url)加载网页做了什么?

    • 加载网页是一个复杂的过程,在这个过程中,我们可能需要执行一些操作,包括:
    • 加载网页前,重置WebView状态以及与业务绑定的变量状态。WebView状态包括重定向状态(mTouchByUser)、前端控制的回退栈(mBackStep)等,业务状态包括进度条、当前页的分享内容、分享按钮的显示隐藏等。
    • 加载网页前,根据不同的域拼接本地客户端的参数,包括基本的机型信息、版本信息、登录信息以及埋点使用的Refer信息等,有时候涉及交易、财产等还需要做额外的配置。
    • 开始执行页面加载操作时,会回调WebViewClient.onPageStarted(webview,url,favicon)。在此方法中,可以重置重定向保护的变量(mRedirectProtected),当然也可以在页面加载前重置,由于历史遗留代码问题,此处尚未省去优化。
    • 加载页面的过程中,WebView会回调几个方法。
    • 页面加载结束后,WebView会回调几个方法。
  • 加载页面的过程中回调哪些方法?
    • WebChromeClient.onReceivedTitle(webview, title),用来设置标题。需要注意的是,在部分Android系统版本中可能会回调多次这个方法,而且有时候回调的title是一个url,客户端可以针对这种情况进行特殊处理,避免在标题栏显示不必要的链接。
    • WebChromeClient.onProgressChanged(webview, progress),根据这个回调,可以控制进度条的进度(包括显示与隐藏)。一般情况下,想要达到100%的进度需要的时间较长(特别是首次加载),用户长时间等待进度条不消失必定会感到焦虑,影响体验。其实当progress达到80的时候,加载出来的页面已经基本可用了。事实上,国内厂商大部分都会提前隐藏进度条,让用户以为网页加载很快。
    • WebViewClient.shouldInterceptRequest(webview, request),无论是普通的页面请求(使用GET/POST),还是页面中的异步请求,或者页面中的资源请求,都会回调这个方法,给开发一次拦截请求的机会。在这个方法中,我们可以进行静态资源的拦截并使用缓存数据代替,也可以拦截页面,使用自己的网络框架来请求数据。包括后面介绍的WebView免流方案,也和此方法有关。
    • WebViewClient.shouldOverrideUrlLoading(webview, request),如果遇到了重定向,或者点击了页面中的a标签实现页面跳转,那么会回调这个方法。可以说这个是WebView里面最重要的回调之一,后面WebView与Native页面交互一节将会详细介绍这个方法。
    • WebViewClient.onReceivedError(webview,handler,error),加载页面的过程中发生了错误,会回调这个方法。主要是http错误以及ssl错误。在这两个回调中,我们可以进行异常上报,监控异常页面、过期页面,及时反馈给运营或前端修改。在处理ssl错误时,遇到不信任的证书可以进行特殊处理,例如对域名进行判断,针对自己公司的域名“放行”,防止进入丑陋的错误证书页面。也可以与Chrome一样,弹出ssl证书疑问弹窗,给用户选择的余地。
  • 加载页面结束回调哪些方法
    • 会回调WebViewClient.onPageFinished(webview,url)。
    • 这时候可以根据回退栈的情况判断是否显示关闭WebView按钮。通过mActivityWeb.canGoBackOrForward(-1)判断是否可以回退。

1.0.5 js的调用时机分析

  • onPageFinished()或者onPageStarted()方法中注入js代码

    • 做过WebView开发,并且需要和js交互,大部分都会认为js在WebViewClient.onPageFinished()方法中注入最合适,此时dom树已经构建完成,页面已经完全展现出来。但如果做过页面加载速度的测试,会发现WebViewClient.onPageFinished()方法通常需要等待很久才会回调(首次加载通常超过3s),这是因为WebView需要加载完一个网页里主文档和所有的资源才会回调这个方法。
    • 能不能在WebViewClient.onPageStarted()中注入呢?答案是不确定。经过测试,有些机型可以,有些机型不行。在WebViewClient.onPageStarted()中注入还有一个致命的问题——这个方法可能会回调多次,会造成js代码的多次注入。
    • 从7.0开始,WebView加载js方式发生了一些小改变,官方建议把js注入的时机放在页面开始加载之后。
  • WebViewClient.onProgressChanged()方法中注入js代码
    • WebViewClient.onProgressChanged()这个方法在dom树渲染的过程中会回调多次,每次都会告诉我们当前加载的进度。

      • 在这个方法中,可以给WebView自定义进度条,类似微信加载网页时的那种进度条
      • 如果在此方法中注入js代码,则需要避免重复注入,需要增强逻辑。可以定义一个boolean值变量控制注入时机
    • 那么有人会问,加载到多少才需要处理js注入逻辑呢?
      • 正是因为这个原因,页面的进度加载到80%的时候,实际上dom树已经渲染得差不多了,表明WebView已经解析了标签,这时候注入一定是成功的。在WebViewClient.onProgressChanged()实现js注入有几个需要注意的地方:
      • 1 上文提到的多次注入控制,使用了boolean值变量控制
      • 2 重新加载一个URL之前,需要重置boolean值变量,让重新加载后的页面再次注入js
      • 3 如果做过本地js,css等缓存,则先判断本地是否存在,若存在则加载本地,否则加载网络js
      • 4 注入的进度阈值可以自由定制,理论上10%-100%都是合理的,不过建议使用了75%到90%之间可以。

1.0.6 清除缓存数据方式有哪些

  • 清除缓存数据的方法有哪些?

1.0.7 如何使用DeepLink

1.0.8 应用被作为第三方浏览器打开

  • 微信里的文章页面,可以选择“在浏览器打开”。现在很多应用都内嵌了WebView,那是否可以使自己的应用作为第三方浏览器打开此文章呢?
  • 在Manifest文件中,给想要接收跳转的Activity添加<intent-filter>配置:
  • 然后在 X5WebViewActivity 中获取相关传递数据。具体可以看lib中的X5WebViewActivity类代码。
  • 一些重点说明
    • 在微信中“通过浏览器”打开自己的应用,然后将自己的应用切到后台。重复上面的操作,会一直创建应用的实例,这样肯定是不好的,为了避免这种情况我们设置启动模式为:launchMode="singleTask"。

02.优化汇总目录介绍

2.0.1 视频全屏播放按返回页面被放大(部分手机出现)

  • 至于原因暂时没有找到,解决方案如下所示

2.0.2 加载webView中的资源时,加快加载的速度优化,主要是针对图片

  • html代码下载到WebView后,webkit开始解析网页各个节点,发现有外部样式文件或者外部脚本文件时,会异步发起网络请求下载文件,但如果在这之前也有解析到image节点,那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下,过多的网络请求就会造成带宽紧张,影响到css或js文件加载完成的时间,造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片,等页面finish后再发起图片加载。

2.0.3 自定义加载异常error的状态页面,比如下面这些方法中可能会出现error

  • 当WebView加载页面出错时(一般为404 NOT FOUND),安卓WebView会默认显示一个出错界面。当WebView加载出错时,会在WebViewClient实例中的onReceivedError(),还有onReceivedTitle方法接收到错误

2.0.4 WebView硬件加速导致页面渲染闪烁

  • 4.0以上的系统我们开启硬件加速后,WebView渲染页面更加快速,拖动也更加顺滑。但有个副作用就是,当WebView视图被整体遮住一块,然后突然恢复时(比如使用SlideMenu将WebView从侧边滑出来时),这个过渡期会出现白块同时界面闪烁。解决这个问题的方法是在过渡期前将WebView的硬件加速临时关闭,过渡期后再开启

2.0.5 WebView加载证书错误

  • webView加载一些别人的url时候,有时候会发生证书认证错误的情况,这时候我们希望能够正常的呈现页面给用户,我们需要忽略证书错误,需要调用WebViewClient类的onReceivedSslError方法,调用handler.proceed()来忽略该证书错误。

2.0.6 web音频播放销毁后还有声音

  • WebView页面中播放了音频,退出Activity后音频仍然在播放,需要在Activity的onDestory()中调用

2.0.7 DNS采用和客户端API相同的域名

  • 建立连接/服务器处理;在页面请求的数据返回之前,主要有以下过程耗费时间。

  • DNS采用和客户端API相同的域名
    • DNS会在系统级别进行缓存,对于WebView的地址,如果使用的域名与native的API相同,则可以直接使用缓存的DNS而不用再发起请求图片。
    • 举个简单例子,客户端请求域名主要位于api.yc.com,然而内嵌的WebView主要位于 i.yc.com
    • 当我们初次打开App时:客户端首次打开都会请求api.yc.com,其DNS将会被系统缓存。然而当打开WebView的时候,由于请求了不同的域名,需要重新获取i.yc.com的IP。静态资源同理,最好与客户端的资源域名保持一致。

2.0.8 如何设置白名单操作

  • 客户端内的WebView都是可以通过客户端的某个schema打开的,而要打开页面的URL很多都并不写在客户端内,而是可以由URL中的参数传递过去的。上面4.0.5 使用scheme协议打开链接风险已经说明了scheme使用的危险性,那么如何避免这个问题了,设置运行访问的白名单。或者当用户打开外部链接前给用户强烈而明显的提示。具体操作如下所示:

    • 在onPageStarted开始加载资源的方法中,获取加载url的host值,然后和本地保存的合法host做比较,这里domainList是一个数组
  • 设置白名单操作其实和过滤广告是一个意思,这里你可以放一些合法的网址允许访问。

2.0.9 后台无法释放js导致发热耗电

  • 在有些手机你如果webView加载的html里,有一些js一直在执行比如动画之类的东西,如果此刻webView 挂在了后台这些资源是不会被释放用户也无法感知。
  • 导致一直占有cpu 耗电特别快,所以如果遇到这种情况,处理方式如下所示。大概意思就是在后台的时候,会调用onStop方法,即此时关闭js交互,回到前台调用onResume再开启js交互。

2.1.0 可以提前显示加载进度条

  • 提前显示进度条不是提升性能 , 但是对用户体验来说也是很重要的一点 , WebView.loadUrl("url") 不会立马就回调 onPageStarted 或者 onProgressChanged 因为在这一时间段,WebView 有可能在初始化内核,也有可能在与服务器建立连接,这个时间段容易出现白屏,白屏用户体验是很糟糕的 ,所以建议

2.1.1 WebView密码明文存储漏洞优化

  • WebView 默认开启密码保存功能 mWebView.setSavePassword(true),如果该功能未关闭,在用户输入密码时,会弹出提示框,询问用户是否保存密码,如果选择”是”,密码会被明文保到 /data/data/com.package.name/databases/webview.db 中,这样就有被盗取密码的危险,所以需要通过 WebSettings.setSavePassword(false) 关闭密码保存提醒功能。

    • 具体代码操作如下所示

03.问题汇总目录介绍

3.0.0 WebView进化史介绍

  • 进化史如下所示

    • 从Android4.4系统开始,Chromium内核取代了Webkit内核。
    • 从Android5.0系统开始,WebView移植成了一个独立的apk,可以不依赖系统而独立存在和更新。
    • 从Android7.0 系统开始,如果用户手机里安装了 Chrome , 系统优先选择 Chrome 为应用提供 WebView 渲染。
    • 从Android8.0系统开始,默认开启WebView多进程模式,即WebView运行在独立的沙盒进程中。

3.0.1 提前初始化WebView必要性

  • 第一次打开Web面 ,使用WebView加载页面的时候特别慢,第二次打开就能明显的感觉到速度有提升,为什么?

    • 是因为在你第一次加载页面的时候 WebView 内核并没有初始化 ,所以在第一次加载页面的时候需要耗时去初始化WebView内核 。
    • 提前初始化WebView内核 ,例如如下把它放到了Application里面去初始化 , 在页面里可以直接使用该WebView,这种方法可以比较有效的减少WebView在App中的首次打开时间。当用户访问页面时,不需要初始化WebView的时间。
    • 但是这样也有不好的地方,额外的内存消耗。页面间跳转需要清空上一个页面的痕迹,更容易内存泄露。

3.0.2 x5加载office资源

  • 关于加载word,pdf,xls等文档文件注意事项:Tbs不支持加载网络的文件,需要先把文件下载到本地,然后再加载出来
  • 还有一点要注意,在onDestroy方法中调用此方法mTbsReaderView.onStop(),否则第二次打开无法浏览。更多可以看FileReaderView类代码!

3.0.3 WebView播放视频问题

  • 1、此次的方案用到WebView,而且其中会有视频嵌套,在默认的WebView中直接播放视频会有问题, 而且不同的SDK版本情况还不一样,网上搜索了下解决方案,在此记录下. webView.getSettings.setPluginState(PluginState.ON);webView.setWebChromeClient(new WebChromeClient());
  • 2、然后在webView的Activity配置里面加上: android:hardwareAccelerated="true"
  • 3、以上可以正常播放视频了,但是webview的页面都finish了居然还能听 到视频播放的声音, 于是又查了下发现webview的onResume方法可以继续播放,onPause可以暂停播放, 但是这两个方法都是在Added in API level 11添加的,所以需要用反射来完成。
  • 4、停止播放:在页面的onPause方法中使用:webView.getClass().getMethod("onPause").invoke(webView, (Object[])null);
  • 5、继续播放:在页面的onResume方法中使用:webView.getClass().getMethod("onResume").invoke(webView,(Object[])null);这样就可以控制视频的暂停和继续播放了。

3.0.4 无法获取webView的正确高度

  • 偶发情况,获取不到webView的内容高度

    • 其中htmlString是一个HTML格式的字符串。
    • 这是因为onPageFinished回调指的WebView已经完成从网络读取的字节数,这一点。在点onPageFinished被激发的页面可能还没有被解析。
  • 第一种解决办法:提供onPageFinished()一些延迟
  • 第二种解决办法:使用js获取内容高度,具体可以看这篇文章:https://www.jianshu.com/p/ad22b2649fba

3.0.5 使用scheme协议打开链接风险

  • 常见的用法是在APP获取到来自网页的数据后,重新生成一个intent,然后发送给别的组件使用这些数据。比如使用Webview相关的Activity来加载一个来自网页的url,如果此url来自url scheme中的参数,如:yc://ycbjie:8888/from?load_url=http://www.taobao.com。

    • 如果在APP中,没有检查获取到的load_url的值,攻击者可以构造钓鱼网站,诱导用户点击加载,就可以盗取用户信息。
    • 这个时候,别人非法篡改参数,于是将scheme协议改成yc://ycbjie:8888/from?load_url=http://www.doubi.com。这个时候点击进去即可进入钓鱼链接地址。
  • 使用建议
    • APP中任何接收外部输入数据的地方都是潜在的攻击点,过滤检查来自网页的参数。
    • 不要通过网页传输敏感信息,有的网站为了引导已经登录的用户到APP上使用,会使用脚本动态的生成URL Scheme的参数,其中包括了用户名、密码或者登录态token等敏感信息,让用户打开APP直接就登录了。恶意应用也可以注册相同的URL Sechme来截取这些敏感信息。Android系统会让用户选择使用哪个应用打开链接,但是如果用户不注意,就会使用恶意应用打开,导致敏感信息泄露或者其他风险。
  • 解决办法
    • 在内嵌的WebView中应该限制允许打开的WebView的域名,并设置运行访问的白名单。或者当用户打开外部链接前给用户强烈而明显的提示。具体操作可以看5.0.8 如何设置白名单操作方式。

3.0.6 如何处理加载错误(Http、SSL、Resource)

  • 对于WebView加载一个网页过程中所产生的错误回调,大致有三种

3.0.7 webView防止内存泄漏

3.0.9 视频/图片宽度超过屏幕

  • 视频播放宽度或者图片宽度比webView设置的宽度大,超过屏幕:这个时候可以设置ws.setLoadWithOverviewMode(false);
  • 另外一种让图片不超出屏幕范围的方法,可以用的是css
  • 通过webView的setting属性设置

3.1.0 如何保证js安全性

  • Android和js如何通信

    • 为了与Web页面实现动态交互,Android应用程序允许WebView通过WebView.addJavascriptInterface接口向Web页面注入Java对象,页面Javascript脚本可直接引用该对象并调用该对象的方法。
    • 这类应用程序一般都会有类似如下的代码:
    • 此段代码将javaObj对象暴露给js脚本,可以通过jsObj对象对其进行引用,调用javaObj的方法。结合Java的反射机制可以通过js脚本执行任意Java代码,相关代码如下:
      • 当受影响的应用程序执行到上述脚本的时候,就会执行someCmd指定的命令。
  • addJavascriptInterface任何命令执行漏洞
    • 在webView中使用js与html进行交互是一个不错的方式,但是,在Android4.2(16,包含4.2)及以下版本中,如果使用addJavascriptInterface,则会存在被注入js接口的漏洞;在4.2之后,由于Google增加了@JavascriptInterface,该漏洞得以解决。
  • @JavascriptInterface注解做了什么操作
    • 之前,任何Public的函数都可以在JS代码中访问,而Java对象继承关系会导致很多Public的函数都可以在JS中访问,其中一个重要的函数就是getClass()。然后JS可以通过反射来访问其他一些内容。通过引入 @JavascriptInterface注解,则在JS中只能访问 @JavascriptInterface注解的函数。这样就可以增强安全性。

3.1.1 如何代码开启硬件加速

  • 开启软硬件加速这个性能提升还是很明显的,但是会耗费更大的内存 。直接调用代码api即可完成,webView.setOpenLayerType(true);

3.1.2 WebView设置Cookie

  • h5页面为何要设置cookie,主要是避免网页重复登录,作用是记录用户登录信息,下次进去不需要重复登录。
  • 代码里怎么设置Cookie,如下所示
  • 在android里面在调用webView.loadUrl(url)之前一句调用此方法就可以给WebView设置Cookie
    • 注:这里一定要注意一点,在调用设置Cookie之后不能再设置,否则设置Cookie无效。该处需要校验,为何???
  • 还有跨域问题: 域A: test1.yc.com 域B: test2.yc.com
  • Cookie的过期机制
    • 可以设置Cookie的生效时间字段名为: expires 或 max-age。

      • expires:过期的时间点
      • max-age:生效的持续时间,单位为秒。
    • 若将Cookie的 max-age 设置为负数,或者 expires 字段设置为过期时间点,数据库更新后这条Cookie将从数据库中被删除。如果将Cookie的 max-age 和 expires 字段设置为正常的过期日期,则到期后再数据库更新时会删除该条数据。
  • 下面列出几个有用的接口:
    • 获取某个url下的所有Cookie:CookieManager.getInstance().getCookie(url)
    • 判断WebView是否接受Cookie:CookieManager.getInstance().acceptCookie()
    • 清除Session Cookie:CookieManager.getInstance().removeSessionCookies(ValueCallback<Boolean> callback)
    • 清除所有Cookie:CookieManager.getInstance().removeAllCookies(ValueCallback<Boolean> callback)
    • Cookie持久化:CookieManager.getInstance().flush()
    • 针对某个主机设置Cookie:CookieManager.getInstance().setCookie(String url, String value)

3.1.4 webView加载网页不显示图片

  • webView从Lollipop(5.0)开始webView默认不允许混合模式, https当中不能加载http资源, 而开发的时候可能使用的是https的链接, 但是链接中的图片可能是http的, 所以需要设置开启。

3.1.5 绕过证书校验漏洞

  • webviewClient中有onReceivedError方法,当出现证书校验错误时,我们可以在该方法中使用handler.proceed()来忽略证书校验继续加载网页,或者使用默认的handler.cancel()来终端加载。

    • 因为我们使用了handler.proceed(),由此产生了该“绕过证书校验漏洞”。如果确定所有页面都能满足证书校验,则不必要使用handler.proceed()

3.1.6 allowFileAccess漏洞

  • 如果webView.getSettings().setAllowFileAccess(boolean)设置为true,则会面临该问题;该漏洞是通过WebView对Javascript的延时执行和html文件替换产生的。

    • 解决方案是禁止WebView页面打开本地文件,即:webView.getSettings().setAllowFileAccess(false);
    • 或者更直接的禁止使用JavaScript:webView.getSettings().setJavaScriptEnabled(false);

3.1.7 WebView嵌套ScrollView问题

  • 问题描述

    • 当 WebView 嵌套在 ScrollView 里面的时候,如果 WebView 先加载了一个高度很高的网页,然后加载了一个高度很低的网页,就会造成 WebView 的高度无法自适应,底部出现大量空白的情况出现。
  • 解决办法

3.1.8 WebView中图片点击放大

  • 首先载入js

  • html加载完成之后,添加监听图片的点击js函数,这个可以在onPageFinished方法中操作
  • 具体看addImageArrayClickListener的实现方法。
  • 最后看看js的通信接口做了什么

3.1.9 页面滑动期间不渲染/执行

  • 在有些需求中会有一些吸顶的元素,例如导航条,购买按钮等;当页面滚动超出元素高度后,元素吸附在屏幕顶部。在WebView中成了难题:在页面滚动期间,Scroll Event不触发。不仅如此,WebView在滚动期间还有各种限定:

    • setTimeout和setInterval不触发。
    • GIF动画不播放。
    • 很多回调会延迟到页面停止滚动之后。
    • background-position: fixed不支持。
  • 这些限制让WebView在滚动期间很难有较好的体验。这些限制大部分是不可突破的,但至少对于吸顶功能还是可以做一些支持,解决方法:
    • 在Android上,监听touchMove事件可以在滑动期间做元素的position切换(惯性运动期间就无效了)。
  • 参考美团技术文章

3.2.0 被运营商劫持和注入问题

  • 由于WebView加载的页面代码是从服务器动态获取的,这些代码将会很容易被中间环节所窃取或者修改,其中最主要的问题出自地方运营商和一些WiFi。监测到的问题包括:

    • 无视通信规则强制缓存页面。
    • header被篡改。
    • 页面被注入广告。
    • 页面被重定向。
    • 页面被重定向并重新iframe到新页面,框架嵌入广告。
    • HTTPS请求被拦截。
    • DNS劫持。
  • 针对页面注入的行为,有一些解决方案:
    • 1.使用CSP(Content Security Policy)
    • 2.HTTPS。
      • HTTPS可以防止页面被劫持或者注入,然而其副作用也是明显的,网络传输的性能和成功率都会下降,而且HTTPS的页面会要求页面内所有引用的资源也是HTTPS的,对于大型网站其迁移成本并不算低。HTTPS的一个问题在于:一旦底层想要篡改或者劫持,会导致整个链接失效,页面无法展示。这会带来一个问题:本来页面只是会被注入广告,而且广告会被CSP拦截,而采用了HTTPS后,整个网页由于受到劫持完全无法展示。
      • 对于安全要求不高的静态页面,就需要权衡HTTPS带来的利与弊了。
    • 3.App使用Socket代理请求
      • 如果HTTP请求容易被拦截,那么让App将其转换为一个Socket请求,并代理WebView的访问也是一个办法。
      • 通常不法运营商或者WiFi都只能拦截HTTP(S)请求,对于自定义的包内容则无法拦截,因此可以基本解决注入和劫持的问题。
      • Socket代理请求也存在问题:
      • 首先,使用客户端代理的页面HTML请求将丧失边下载边解析的能力;根据前面所述,浏览器在HTML收到部分内容后就立刻开始解析,并加载解析出来的外链、图片等,执行内联的脚本……而目前WebView对外并没有暴露这种流式的HTML接口,只能由客户端完全下载好HTML后,注入到WebView中。因此其性能将会受到影响。
      • 其次,其技术问题也是较多的,例如对跳转的处理,对缓存的处理,对CDN的处理等等……稍不留神就会埋下若干大坑。
      • 此外还有一些其他的办法,例如页面的MD5检测,页面静态页打包下载等等方式,具体如何选择还要根据具体的场景抉择。

3.2.1 解决资源加载缓慢问题

  • 在资源预加载方面,其实也有很多种方式,下面主要列举了一些:

    • 第一种方式是使用 WebView 自身的缓存机制:如果我们在 APP 里面访问一个页面,短时间内再次访问这个页面的时候,就会感觉到第二次打开的时候顺畅很多,加载速度比第一次的时间要短,这个就是因为 WebView 自身内部会做一些缓存,只要打开过的资源,他都会试着缓存到本地,第二次需要访问的时候他直接从本地读取,但是这个读取其实是不太稳定的东西,关掉之后,或者说这种缓存失效之后,系统会自动把它清除,我们没办法进行控制。基于这个 WebView 自身的缓存,有一种资源预加载的方案就是,我们在应用启动的时候可以开一个像素的 WebView ,事先去访问一下我们常用的资源,后续打开页面的时候如果再用到这些资源他就可以从本地获取到,页面加载的时间会短一些。
    • 第二种方案是,自己去构建和管理缓存:把这些需要预加载的资源放在 APP 里面,可能是预先放进去的,也可能是后续下载的,问题在于前端这些页面怎么去缓存,两个方案,第一种是前端可以在 H5 打包的时候把里面的资源 URL 进行替换,这样可以直接访问本地的地址;第二种是客户端可以拦截这些网页发出的所有请求做替换。
    • 具体可以看美团的技术文章:美团大众点评 Hybrid 化建设

3.2.2 判断是否已经滚动到页面底端

  • getScrollY()方法返回的是当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离.
  • getHeight()或者getBottom()方法都返回当前WebView 这个容器的高度
  • getContentHeight 返回的是整个html的高度,但并不等同于当前整个页面的高度,因为WebView有缩放功能,所以当前整个页面的高度实际上应该是原始html 的高度再乘上缩放比例. 因此,更正后的结果,准确的判断方法应该是:

3.2.3 使用loadData加载html乱码

  • 可以通过使用 WebView.loadData(String data, String mimeType, String encoding)) 方法来加载一整个 HTML 页面的一小段内容,第一个就是我们需要 WebView 展示的内容,第二个是我们告诉 WebView 我们展示内容的类型,一般,第三个是字节码,但是使用的时候,这里会有一些坑

    • 明明已经指定了编码格式为 UTF-8,加载却还会出现乱码……
  • 使用loadData()或 loadDataWithBaseURL()加载一段HTML代码片段
    • data:是要加载的数据类型,但在数据里面不能出现英文字符:'#', '%', '' , '?' 这四个字符,如果有的话可以用 %23, %25, %27, %3f,这些字符来替换,在平时测试时,你的数据时,你的数据里含有这些字符,但不会出问题,当出问题时,你可以替换下。

      • %,会报找不到页面错误,页面全是乱码。乱码样式见符件。
      • #,会让你的goBack失效,但canGoBAck是可以使用的。于是就会产生返回按钮生效,但不能返回的情况。
      • \ 和? 我在转换时,会报错,因为它会把\当作转义符来使用,如果用两级转义,也不生效,我是对它无语了。
    • 我们在使用loadData时,就意味着需要把所有的非法字符全部转换掉,这样就会给运行速度带来很大的影响,因为在使用时,在页面stytle中会使用很多%号。页面的数据越多,运行的速度就会越慢。
    • data中,有人会遇到中文乱码问题,解决办法:参数传"utf-8",页面的编码格式也必须是utf-8,这样编码统一就不会乱了。别的编码我也没有试过。
  • 解决办法

3.2.4 WebView下载进度无法监听

3.2.5 webView出现302/303重定向

  • 专业叙述

    • 302重定向又称之为302代表暂时性转移
  • 网络解释
    • 重定向是网页制作中的一个知识,几个例子跟你说明,假设你现在所处的位置是一个论坛的登录页面,你填写了帐号,密码,点击登陆,如果你的帐号密码正确,就自动跳转到论坛的首页,不正确就返回登录页;这里的自动跳转,就是重定向的意思。或者可以说,重定向就是,在网页上设置一个约束条件,条件满足,就自动转入到其它网页、网址 。比如,你输入一个网站链接,一般可以直接进入网站,如果出现错误,则又跳转到另外一个网页。
  • 举个例子
    • 叙述下这种问题的情况,就是WebView首先加载A链接,然后在WebView上点击一个B链接进行加载,B链接会自动跳转到C链接,这个时候调用WebView的goback方法,会返回到加载B链接,但是B链接又会跳转到C链接,从而导致没法返回到A链接界面(当然也有朋友说快速的按两次返回键-也就是连续触发了两次goback可以返回到A链接,但并不是所有用户都懂这个,而且操作上也很恶心。),这就是重定向问题。
  • 实现WebView的滑动监听和优雅处理回退栈问题
    • WebView能否知道某个url是不是301/302呢?当然知道,WebView能够拿到url的请求信息和响应信息,根据header里的code很轻松就可以实现,事实正是如此,交给WebView来处理重定向(return false),这时候按返回键,是可以正常地回到重定向之前的那个页面的。(PS:从上面的章节可知,WebView在5.0以后是一个独立的apk,可以单独升级,新版本的WebView实现肯定处理了重定向问题)
    • 但是,业务对url拦截有需求,肯定不能把所有的情况都交给系统WebView处理。为了解决url拦截问题,本文引入了另一种思想——通过用户的touch事件来判断重定向。具体可以看项目lib中的ScrollWebView!

04.关于参考

05.关于x5开源库YCWebView

5.0.1 前沿说明

  • 基于腾讯x5封源库,提高webView开发效率,大概要节约你百分之六十的时间成本。该案例支持处理js的交互逻辑且无耦合、同时暴露进度条加载进度、可以监听异常error状态、支持视频播放并且可以全频、支持加载word,xls,ppt,pdf,txt等文件文档、发短信、打电话、发邮件、打开文件操作上传图片、唤起原生App、x5库为最新版本,功能强大。

5.0.2 该库功能和优势

  • 提高webView开发效率,大概要节约你百分之六十的时间成本,一键初始化操作;
  • 支持处理js的交互逻辑,方便快捷,并且无耦合,操作十分简单;
  • 暴露进度条加载进度,结束,以及异常状态(分多种状态:无网络,404,onReceivedError,sslError异常等)listener给开发者;
  • 支持视频播放,可以切换成全频播放视频,可旋转屏幕,暴露视频操作监听listener给开发者;
  • 集成了腾讯x5的WebView,最新版本,功能强大;
  • 支持打开文件的操作,比如打开相册,然后选中图片上传,兼容版本(5.0);
  • 支持加载word,xls,ppt,pdf,txt等文件文档,使用方法十分简单;
  • 支持设置仿微信加载H5页面进度条,完全无耦合,操作简单,极大提高用户体验;

5.0.3 项目地址

x5开源库后续知识点的更多相关文章

  1. 【踩坑速记】开源日历控件,顺便全面解析开源库打包发布到Bintray/Jcenter全过程(新),让开源更简单~

    一.写在前面 自使用android studio开始,就被它独特的依赖方式:compile 'com.android.support:appcompat-v7:25.0.1'所深深吸引,自从有了它,麻 ...

  2. 开源库Magicodes.WeChat.SDK总体介绍

    目录 1    概要    1 2    主要特点    2 3    架构图    8 3.1    构造器——WeChatSDKBuilder    8 3.2    函数管理器——WeChatF ...

  3. 使用开源库MAGICODES.WECHAT.SDK进行微信公众号支付开发

    概要 博客使用Word发博,发布后,排版会出现很多问题,敬请谅解.可加群获取原始文档. 本篇主要讲解微信支付的开发流程,相关业务基于MAGICODES.WECHAT.SDK实现.通过本篇教程,您可以很 ...

  4. 开源库Magicodes.ECharts使用教程

    目录 1    概要    2 2    Magicodes.ECharts工作原理    3 2.1    架构说明    3 2.1.1    Axis    4 2.1.2    CommonD ...

  5. DCMTK开源库的学习笔记4:利用ini配置文件对dcm影像进行归档

    转:http://blog.csdn.net/zssureqh/article/details/8846337 背景介绍: 医学影像PACS工作站的服务端需要对大量的dcm文件进行归档,写入数据库处理 ...

  6. C/C++ 开源库及示例代码

    C/C++ 开源库及示例代码 Table of Contents 说明 1 综合性的库 2 数据结构 & 算法 2.1 容器 2.1.1 标准容器 2.1.2 Lockfree 的容器 2.1 ...

  7. 【Java&Android开源库代码剖析】のandroid-smart-image-view

    Android应用开发已经进入到相对成熟的阶段,特别在国外,涌现出了各式各样的成熟稳定的开源库,供普通开发者使用.这种情况虽然极大加速了app开发的进程,但同时带来的问题是大多数普通开发者在使用这些开 ...

  8. Android6.0运行时权限(基于RxPermission开源库)

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在6.0以前的系统,都是权限一刀切的处理方式,只要用户安装,Manifest申请的权限都会被赋予,并且安装后权限也撤销不了. And ...

  9. 开源库支付库Magicodes.Pay发布

    Magicodes.Pay,是心莱科技团队提供的统一支付库,相关库均使用.NET标准库编写,支持.NET Framework以及.NET Core.目前支持以下支付方式和功能: 支付宝APP支付 支付 ...

  10. DICOM:DICOM三大开源库对比分析之“数据加载”

    背景: 上一篇博文DICOM:DICOM万能编辑工具之Sante DICOM Editor介绍了DICOM万能编辑工具,在日常使用过程中发现,“只要Sante DICOM Editor打不开的数据,基 ...

随机推荐

  1. .NET Core开发实战(第19课:日志作用域:解决不同请求之间的日志干扰)--学习笔记

    19 | 日志作用域:解决不同请求之间的日志干扰 开始之前先看一下上一节的代码 // 配置的框架 var configBuilder = new ConfigurationBuilder(); con ...

  2. ABC 313

    前三题过水. D题 与 5+*的题解 注意:交互题每输出一次,就要 fflush(stdout); 一次 E 其实不是太难,但是赛时一直在搓 D 还没搓出来 首先如果有两个大于 \(1\) 的数相邻, ...

  3. Java集合篇之逐渐被遗忘的Stack,手写一个栈你会吗?

    正月初九,开工大吉! 2024年,更上一层楼! 写在开头 其实在List的继承关系中,除了ArrayList和LinkedList之外,还有另外一个集合类stack(栈),它继承自vector,线程安 ...

  4. NC17890 方格填色

    题目链接 题目 题目描述 给一个m x n的方格,Applese想要给方格填上颜色,每个格子可以是黑色或者白色.他要求左右相邻两格不能同为白色且相邻两列不能全为黑色. 求满足条件的方案数. 输入描述 ...

  5. 介绍 ComPDFKit 转换 SDK 1.5.0

    介绍 ComPDFKit 转换 SDK 1.5.0 了解有关 ComPDFKit PDF SDK 的更多信息:https ://www.compdf.com/ ComPDFKit Conversion ...

  6. Python中用With open as 实现对文件的操作

    with open as f在Python中用来读写文件(夹). 基本写法如下: with open(文件名,模式)as f: f.write(内容)#写操作 例:with open ('这个文章.t ...

  7. 超详细的 springboot & mybatis 程序入门

    ps:网上有很多类似的入门案例,我也是看了被人的之后自己写的一个 估计有哥们懒 我把数据表格拿上来,数据自己填吧 CREATE TABLE `tb_user` ( `id` int(10) DEFAU ...

  8. Spring rce CVE-2022-22965

    原理大致是这样:spring框架在传参的时候会与对应实体类自动参数绑定,通过"."还可以访问对应实体类的引用类型变量.使用getClass方法,通过反射机制最终获取tomcat的日 ...

  9. extra用法

    做子查询时,有些orm语句满足不了的时候使用 select参数 ## select age,(age > 18) as is_adult from myapp_person; Person.ob ...

  10. 图片验证码pillow模块

    安装下载 pip install pillow 使用 需要引入PIL里面的Image from PIL import Image # mode为采用什么色系,size为大小px,color为颜色 im ...