关于javascript:mPaasWKWebview网络拦截常见问题

47次阅读

共计 2545 个字符,预计需要花费 7 分钟才能阅读完成。

简介:mPaas-WKWebview 网络拦挡常见问题

1. 背景

原生 WKWebView 在独立于 app 过程之外的过程中执行网络申请,申请数据不通过主过程,因而在 WKWebView 上间接应用 NSURLProtocol 是无奈拦挡申请的。然而因为 mPaas 的离线包机制强依赖网络拦挡,所以基于此,mPaas 利用了 WKWebview 的暗藏 api,去注册拦挡网络申请去满足离线包的业务场景需要,参考代码如下:

[WKBrowsingContextController registerSchemeForCustomProtocol:@"https"]

然而因为出于性能的起因,WK 的网络申请在给主过程传递数据的时候会把申请的 body 去掉,导致拦挡后申请的 body 参数失落。在离线包场景,因为页面的资源不须要 body 数据,所以离线包能够失常应用不受影响。然而在 H5 页面内的其余 post 申请会失落 data 参数。为了解决 post 参数失落的问题,mPaas 通过在 js 注入代码,hook 了 js 上下文里的 XMLHTTPRequest 对象解决。通过在 JS 层把办法内容组装好,而后通过 WKWebView 的 messageHandler 机制把内容传到主过程,把对应 HTTPBody 而后存起来,随后告诉 JS 端持续这个申请,网络申请到主过程后,在将 post 申请对应的 HttpBody 增加上,这样就实现了一次 post 申请的解决。整体流程能够参考之前崔同学的分享流程图如下:


图 1

2. 遇到的问题

通过下面的机制,既满足了离线包的资源拦挡诉求,也解决了 post 申请 body 失落的问题。然而在一些场景还是存在一些问题,须要开发者进行适配。

2.1. mPaas 容器和三方容器混用导致三方容器申请 body 失落

2.1.1. 问题场景

典型的场景,是在 App 内同时集成了多个 wkwebview 容器,常见的问题景象如下:关上 mPaas 容器后在关上三方的 WK 页面,三方 WK 页面内的 post 申请 body 参数失落。起因是因为 mPaas 容器注册了全局的网络拦挡,导致三方容器内的申请,也走到了 mPaas 的网络拦挡,然而因为 mPaas 容器没有启动,所以无奈失常走到 mPaas 全局拦挡补全 body 的链路,导致 body 参数失落。

2.1.2. 解决方案

在三方容器创立的时候反注册,在销毁的时候再注册回来。

j// 反注册
Class cls = NSClassFromString(@"WKBrowsingContextController");
    SEL sel = NSSelectorFromString([NSString stringWithFormat:@"unregisterSchemeForCustomProtocol:"]);
    if ([(id)cls respondsToSelector:sel]) {[(id)cls performSelector:sel withObject:@"http"];
        [(id)cls performSelector:sel withObject:@"https"];
    }
  
  // 注册
    Class cls = NSClassFromString(@"WKBrowsingContextController");
    SEL sel = NSSelectorFromString([NSString stringWithFormat:@"registerSchemeForCustomProtocol:"]);
    if ([(id)cls respondsToSelector:sel]) {
    #pragma clang diagnostic push
    #pragma clang diagnostic ignored "-Warc-performSelector-leaks"
        [(id)cls performSelector:sel withObject:@"http"];
        [(id)cls performSelector:sel withObject:@"https"];
    #pragma
    }

2.2. mPaas 容器关上离线包后间接拜访虚构域名导致白屏

2.2.1. 问题场景

和下面第一个 case 相似,也是在 App 内同时集成了多个 wkwebview 容器,同时三方的容器也会操作全局的网络拦挡,导致 mPaas 的网络拦挡生效。常见的问题景象如下:关上三方容器后,在关上 mPaas 的离线包后,发现离线包会间接通过在线网络拜访虚构域名,不走离线,导致页面白屏。

2.2.1. 解决方案

参考第一个问题的解决方案,在启动 mPaas 容器的时候,确认全局的网络拦挡是能够失常失效的就能够。

2.3. mPaas 容器内 sendBeacn 申请 body 失落

2.3.1. 问题场景

有客户在容器内集成了神策的埋点 jssdk,发现埋点申请里的 body 参数失落。通过查看源码发现神策 jssdk 是通过 navigator.sendBeacon 发送的申请,目前 mPaas 内 hook 的 js 申请,只反对 XMLHTTPRequest,sendBeacon 还不反对,所以导致走了网络拦挡后 body 参数失落。


图 2

2.3.1. 解决方案

神策 sdk 内反对指定 ajax 的形式上报埋点,批改上报形式为 ajax 后问题解决。可参考文后材料 [1] 理解详情。


图 3

[1]JavaScript SDK 应用阐明:https://www.sensorsdata.cn/2.0/manual/js\_sdk.html

咱们是阿里云智能寰球技术服务 -SRE 团队,咱们致力成为一个以技术为根底、面向服务、保障业务零碎高可用的工程师团队;提供业余、体系化的 SRE 服务,帮忙广大客户更好地应用云、基于云构建更加稳固牢靠的业务零碎,晋升业务稳定性。咱们冀望可能分享更多帮忙企业客户上云、用好云,让客户云上业务运行更加稳固牢靠的技术,您可用钉钉扫描下方二维码,退出阿里云 SRE 技术学院钉钉圈子,和更多云上人交换对于云平台的那些事。

版权申明:本文内容由阿里云实名注册用户自发奉献,版权归原作者所有,阿里云开发者社区不领有其著作权,亦不承当相应法律责任。具体规定请查看《阿里云开发者社区用户服务协定》和《阿里云开发者社区知识产权爱护指引》。如果您发现本社区中有涉嫌剽窃的内容,填写侵权投诉表单进行举报,一经查实,本社区将立即删除涉嫌侵权内容。

正文完
 0