我们在爬取数据的过程中难免会碰到的一些滑块.而这些滑块web我们可以用我debug大法随意调试模拟他滑动上报提交.很多同学对于嵌入在app在的滑块有时候就束手无策了,这时候我们引入了vconsole进行注入爬取
你必须web端调试通过,直接这滑块的js注入点在哪里,如果不知道后续调试难度会增加.
1.利用vconsole生成一个终端调试界面
2.利用拦包工具对于滑块返回的html页面中js外链的引入替换成我们修改后具有埋点打印的内容js,以及HTML最开始部分引入vconsole的js实现原理就是如此简单
js 链接
https://unpkg.com/vconsole@latest/dist/vconsole.min.js
https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js有些同学会感觉每次拦包我都要替换太麻烦了有没有什么不用手动替换的自动的
面对这个需求我们还是有的
用到的工具
- Thor HTTP Sniffer: HTTP 抓包及断点调试。
- vConsole 调试脚本: A lightweight, extendable front-end developer tool for mobile web page.
- Eruda 调试脚本: Console for mobile browsers.
因为对 HTML body 标签注入 js 脚本后可能不会总是生效，所以这里选择优先对 title 标签进行替换
加入判断条件：判断是否包含 title 标签
@rsp.bodyText CONTAINS[cd] "</title>"
当有 title 标签时，执行以下表达式
^@rsp.bodyText "<\/title>" "</title><script type='text/javascript' src='https://coding.net/u/Tumblr/p/thor-lib/git/raw/master/vconsole/3.2.0/vconsole.min.js'></script><script>new VConsole();</script>" 没有 title 标签，则找 body 标签替换
^@rsp.bodyText "<\/body>" "<script type='text/javascript' src='https://coding.net/u/Tumblr/p/thor-lib/git/raw/master/vconsole/3.2.0/vconsole.min.js'></script><script>
new VConsole();</script></body>"- 其中
new VConsole()是关键不调用不会生成界面 - 还有载人方式可以使用chalrs或者fiddler替换js再头部注入
- 考虑加载速度的原因，没有直接使用 github 上的 vConsole 原地址，而是 dump 了一份到 coding.net 仓库里，所以上面用的是 codeing.net 的脚本地址
同理，再新建一个断点，完成 Eruda 工具的注入（其实可以不用两个调试脚本都注入，这里只是演示效果）
- JSBox 的网页调试插件
- 三种解密 HTTPS 流量的方法介绍 by Jerry Qu
- Content Security Policy Level 2 介绍 by Jerry Qu
- eruda - Console for mobile browsers
- vConsole by Tencent
3、过滤器 “WebView 注入调试” 后期优化版下载（下载后直接用 Thor 打开，安装）