怎么用原生开发使 react native 实现对 webview 的广告拦截

查看 97|回复 8
作者:Mistsink   
如题,我使用 expo 开发 react native 应用时,使用 react-native-webview 作为 RN 中的 Webview 组件。希望能够使用如 ghostery/adblocker 这样的第三方库来完成广告拦截。但是发现这个 Webview 组件没有开放什么接口可以拦截或者获取一个网页中所有的资源请求,如各种 js 文件,css 文件,这些资源请求没法拦截,所以没法使用 adblocker 完成相应的拦截。
我有一个想法能不能使用原生开发,替换 android 、ios 底层的 webview 组件,然后开放几个函数用于 onLoadStart 、onLoadEnd ,这几个函数可以在 RN 层级中作为参数传给 Webview 组件。这个方案是否可行呢?如果可行的话我的顾虑是:RN 中使用的 react-native-webview 的 webview 组件会不会是自己在底层替换的 webview 组件呢?如果不是,这个应该怎么解决呢?
如果解决思路有问题,非常想请教大家有没有更好的思路呢?
mxT52CRuqR6o5   
用 injectedJavaScriptBeforeContentLoaded 注入 js 代码,hook 会导致资源加载的 api 并 MutationObserver 监视资源加载,进行阻止,不知道行不行
Mistsink
OP
  
@mxT52CRuqR6o5 MutationObserver 只能监听 dom 变化吧,不能监听网络请求呢,这个应该没法做到广告拦截的效果呢,我看主流的那些方案都是拦截网络请求+注入 css+注入 js 来实现的。现在的难点就是怎么拦截所有的网络请求。
mxT52CRuqR6o5   
@Mistsink #2 加载 css 、js 通常需要把 link 、script 标签加载到 html 里(但我不清楚 html 首屏的 script 标签 MutationObserver 能不能监听到)
Mistsink
OP
  
@mxT52CRuqR6o5 这里感觉不好控制呢,一旦 MutationObserver 创建的慢了就会漏掉很多,而且可能也会造成性能压力。你觉得呢?
br_wang   
@Mistsink #4 MutationObserver 创建前先对现有的 DOM 标签筛选、处理一遍?
Mistsink
OP
  
@br_wang 这种方案我觉着可能有些 hack 呢,不好接入现成的拦截方案。
li1218040201   
没用过 react-native-webview ,用过 flutter-inappwebivew ,思路应该类似。
1. FlutterInAppWebivew
2. Windows Webview2 (原生组件)
在 flutter 端调用 webview 组件并传入 shouldInterceptRequest 属性,此时原生代码调用 Webiview2 ,Webview2 调用 add_WebResourceRequestd 方法可以监听所有网络请求
https://github.com/pichillilorenzo/flutter_inappwebview/blob/master/flutter_inappwebview_windows/windows/in_app_webview/in_app_webview.cpp#L874
并调用 flutter 传入的 shouldInterceptRequest
https://github.com/pichillilorenzo/flutter_inappwebview/blob/master/flutter_inappwebview_windows/windows/in_app_webview/in_app_webview.cpp#L945
在回调中判断 shouldInterceptRequest 是否有返回值,如果没有就不响应(等于拦截了请求),也可以修改响应(返回自定义结果)
上面是 Windows 代码,它还有 ios 和 android 不过我没用上,你可以参考他的原生代码那块。
另外  flutter-inappwebivew 内置了 ad block 功能,也可以参考他是怎么实现的
https://github.com/pichillilorenzo/flutter_inappwebview_examples/tree/main/webview_ad_blocker
br_wang   
@Mistsink #6 最后都是一遍一遍扫,只是补齐触发时机点而已。针对 ad 的现有拦截方案也都是这个思路吧。
您需要登录后才可以回帖 登录 | 立即注册

返回顶部