WKWebView 使用 NSURLProtocol 拦截后的 POST 请求异常及解决方法

原因

首先 WebKit 进程是独立于 app 进程之外的，两个进程之间使用消息队列的方式进行进程间通信。比如 app 想使用 WKWebView 加载一个请求，就要把请求的参数打包成一个 Message，然后通过 IPC 把 Message 交给 WebKit 去加载，反过来 WebKit 的请求想传到 app 进程的话（比如 URLProtocol ），也要打包成 Message 走 IPC。出于性能的原因，打包的时候 HTTPBody 和 HTTPBodyStream 这两个字段被丢弃掉了，这个可以参考 WebKit 的源码，这就导致 -[WKWebView loadRequest:] 传出的 HTTPBody 和 NSURLProtocol 传回的 HTTPBody 全都被丢弃掉了。所以如果通过 NSURLProtocol 注册拦截 http scheme，那么由 WebKit 发起的所有 http POST 请求就全都无效了，这个从原理上就是无解的。同时拦截后对 ATS 支持不好。

验证过程

通过注册NSURLProtocol并注册私有API后进行NSURLRequest拦截，可以获取 H5 发送的请求头，但无法获取 H5 端的请求。
1.WKWebView 拦截如图：

WKWebView 拦截

2.UIWebView 拦截如图：

UIWebView 拦截

解决方案

1. 修改Scheme
   将 H5 的资源文件与 POST 请求的链接使用不同的 Scheme ，移动端只拦截资源文件的 Scheme ，不拦截 POST 地址。
   拦截方式：iOS 11 以上可使用 WKURLSchemeHandler 进行拦截，且只允许拦截自定义 Scheme 的请求，不允许拦截“http”、“https”、“ftp”、“file”等请求，否则会 crash。在 iOS 11 以下只能使用私有API：WKBrowsingContextController 和 registerSchemeForCustomProtocol ，通过反射的方式拿到了私有的 class/selector。

2. POST 请求改为与原生交互
   2.1 将 H5 对 POST 的交互改为与 Native 的桥接，由 Native 负责请求接口数据，再将数据返回给 JS。
   2.2 注入一段 HookAjax 的 JS 代码，拦截所有的 XMLHttpRequest 的 POST 请求转移给移动端处理。将 POST 请求通过 JS 和 Native 交互的方式将请求转交给 Native 处理并且在 Native 处理完后将结果返回给 JS。

小结：
方案1，移动端修改小，前端需要对数据所在的站点重新部署；
方案2.1，移动端、前端修改均较大；
方案2.2，移动端较大、前端修改较小，但需要有人帮忙写 HookAjax 的 JS 代码。

解决方法

上述的方案1、2.1对于前端改动较大，为了避免牵扯过多人员导致项目进展缓慢，则本文采用方案2.2。
1.注册与注销拦截

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    Class cls = NSClassFromString(@"IMYWebURLProtocol");
    [NSURLProtocol registerClass:cls];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    Class cls = NSClassFromString(@"IMYWebURLProtocol");
    [NSURLProtocol unregisterClass:cls];
}

2.设置与卸载WKWebViewConfiguration的hookAjax

WKUserContentController *wkUController = [[WKUserContentController alloc] init];
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;
[wkWebConfig.userContentController imy_installHookAjax]; // hookAjax

//卸载hookAjax
[wkConfig.userContentController imy_uninstallHookAjax];

至此，hookAjax已经结束，H5的post在被我们拦截后也能正常请求到数据了。代码中涉及到的部分代码来源于IMYWebLoader。不过经测试，如果H5加入eruda框架那么会导致冲突。于是笔者经过修改后编写了一份新的js文件：github:WKHookAjax里的ajaxhook.js

---

参考资料
iOS - NSProtocol 拦截 WKWebView POST 请求 body 会被清空的问题解决
Web的一系列优化方案
Ajax-hook 原理解析
WKWebView 那些坑
iOS app秒开H5优化探索