从华为P30图片不显示谈WebView的资源加载模式

原文

持续更新...

前言

在日常开发过程中,现在已经是第二次碰见华为手机在 APP 内置 WebView 上浏览图片出现图片不显示的问题了,在 wap 端是不存在这个问题的。还记得第一次碰见这个问题的时候是在与移动端开发人员探讨图片不显示 bug,排除了样式、图片因素和 js 干扰后,最后将矛头指向 WebView 加载问题,然后移动端开发人员在查阅 WebView 文档后指出是 WebView 模式引起的。作为一名专业的螺丝钉制造者,有必要将问题总结下来,让大家少踩坑~

WebView 的模式

  • Android@version < v5.0,默认是采用的 MIXED_CONTENT_ALWAYS_ALLOW 模式,即总是允许 WebView 同时加载 Https 和 Http;
  • Android@version >= v5.0,默认用 MIXED_CONTENT_NEVER_ALLOW 模式,即总是不允许 WebView 同时加载 Https 和 Http。

安全问题一直都是值得开发者探讨的问题,开发者本应对每个微小细节把关,保护好每一份数据。从 Android 5.0 开始,WebView 默认是采用的 MIXED_CONTENT_NEVER_ALLOW 模式,不再支持同时加载 Https 和 Http 混合模式。这主要处于对网络数据安全性的考虑,官方默认推荐使用 https。对于需要修改模型的,可以自行修改配置,不过实测在一些机型如华为 P30,WebView 使用混合 http 和 https 也不是万全之策,况且在规范上应尽量保持只用 http 或只用 https 为妙。

MIXED_CONTENT_NEVER_ALLOW

此模式要求 WebView 使用 https 加载资源。WebView 不允许一个安全的站点(https)去加载非安全的站点内容(http),比如,https 网页内容的图片是 http 链接。强烈建议 App 使用这种模式,因为这样更安全

MIXED_CONTENT_ALWAYS_ALLOW

允许 https 环境加载 http 资源,不安全。此模式下 WebView 是可以在一个安全的站点(Https)里加载非安全的站点内容(Http),这是 WebView 最不安全的操作模式,尽可能地不要使用这种模式。

MIXED_CONTENT_COMPATIBILITY_MODE

允许 https 环境兼容式阻塞加载 http 资源,较安全。此模式下,当涉及到混合式内容时,WebView 会尝试去兼容最新 Web 浏览器的风格。一些不安全的内容(Http)能被加载到一个安全的站点上(Https),而其他类型的内容将会被阻塞。这些内容的类型是被允许加载还是被阻塞可能会随着版本的不同而改变,并没有明确的定义。这种模式主要用于在 App 里面不能控制内容的渲染,但是又希望在一个安全的环境下运行。

实战情景

华为 P30 App 内置 WebView 环境加载图片不显示

  • 测试环境
    • 运行终端:app 内置 WebView 环境
    • 手机型号:华为 P30
    • os:Android 9.0

对于这个图片加载不显示的问题做了几个尝试:

  • 在不修改原本加载资源的情况下,使用混合模式MIXED_CONTENT_COMPATIBILITY_MODE尝试加载资源
/*app启用WebView混合模式尝试解决图片不显示*/
webSetting.setBlockNetworkImage(false); // 不阻塞网络图片
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  //允许混合(http,https)
  //webSetting.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
  webSetting.setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
}

在设置好混合模式后来了一波测试,本以为顺利搞掂,最后杀出一个程咬金说有些图片不够s,所以不见得能显示出来(;д;)。

啊不,是因为有些图片没有安全证书问题显示不出来。ヾ(o・ω・)ノ

蓦然回首,发现在这个 https 安全环境的问题还是挺多的呀,有些机型加载 http 资源没有安全证还是不让显示的。有安全证书保平安呐!混合模式并不是万能的!

回到问题,当 WebView 加载网页发生证书认证错误时,会调用 WebViewClient 类的 onReceivedSslError 方法,在这个方法里,可以点击源码看到 SslErrorHandler 中有两个主要的方法可以调用:

  • cancel():停止加载问题页面
  • proceed():忽略 SSL 证书错误,继续加载页面

如果不考虑证书安全,则可以这样忽略报错:

WebView.setWebViewClient(new WebViewClient() {
  @Override
  public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
  handler.proceed();//接受所有网站的证书
}
});

然后对于不显示的图片,只能让后台手动修改链接,改为对应的 https 什么的。

另外,在测试时发现 X5 内核的 WebView 中,是找不到 MIXED_CONTENT_ALWAYS_ALLOW 这些模式参数的,对此要手动判断是否 X5 并设值:

MIXED_CONTENT_NEVER_ALLOW = 0;
MIXED_CONTENT_ALWAYS_ALLOW = 1;
MIXED_CONTENT_COMPATIBILITY_MODE = 2;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  // 混合模式
  webSetting.setMixedContentMode(2);
}

测试至此,本人对混合模式是持谨慎态度的,不太建议使用,除非迫不得已的情况吧。

从规范上来讲,要么全部使用 http 的资源,要么全部使用 https。

  • 最后推荐全部资源使用 https
  • 对于爱偷懒的我来讲(~ ̄ ▽  ̄)~ ,更喜欢这种格式书写://www.xxx.com/

参考文档

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容