flutter项目实战之网络抓包(代码片段)

Xiao冰同学 Xiao冰同学     2023-04-01     151

关键词:

Flutter项目实战之网络抓包

前言

首先在项目实战中,网络请求与接口的交互是必不可少的操作,但是移动端开发者没有 Web开发者那样完善的抓包工具,所以我们就需要一些抓包软件来替代浏览器的控制台来对APP的网络请求进行抓包分析数据,从而更有利于我们的日常工作。本次笔者将通过Flutter与抓包软件fiddler的双重教程,既可以让 Flutter开发者学习到抓包,又能让其他移动端开发者学习到Fidder工具的使用。

首先认识一下抓包软件 Fiddler。可能早期的开发者都认识这款开发工具,因为这款软件不如 charles那样跨平台,再加上很多开发者都是用 Mac 开发,所以饱受诟病。但是 Fiddler 现在已经不是以前的 Fiddler了,而且是 Fiddler Everywhere,已经可以在 多个主流系统平台上完美运行了。笔者将内容分为两个部分 Fiddler 跟 Flutter,另外会使用 Mac跟 Windows分别演示效果。

环境

软件或框架名称作用
Fiddler EveryWhere 2.0.0用于抓包
dio 3.1.0Flutter的网络请求框架,相当于Android的 OKHttp,可以配置代理

前期准备

先查看自己的IP地址

Mac OS X

控制台命令: ifconfig

图 1

Windows

控制台命令:ipconfig

图2

Fiddler教程

Fidder 官网 下载成功之后,使用默认选项直接安装即可。

笔者使用的最新版 2.0.2,安装成功之后进入登录页.如图3

图3

如果没有账号的话,可以点击 “New User?SIgn up” 注册。

进入 Fiddler 首页之后

图4

其实Mac跟Windows下的首页都差不多,所以就不放Windows的图了。

先去 “设置”,点击下图 画圈的位置,如图5

图5
弹出设置的对话框,先点击connections选项卡,查看黄色画圈的是监听的端口号“8866”,还有要(红色画圈)检查 “Allow remote computers to connect” 这个要勾中,因为我之前出现过一种情况那就是 明明手机跟电脑连接的同一个Wifi但是无法抓取到 我的应用的网络,后来经过排查发现这个选项没有被勾中导致的。如**图6**

图6

这样就可以配置 HTTPS证书,从而完成抓取HTTPS的请求网络数据,如图7。可能有读者对HTTPS的原理流程不了解的,可以 参考一下笔者的 这篇博客 HTTPS流程详解 希望能对您有所帮助。

图7

这样 初步的配置就完成了。可以抓取浏览器的数据了。

Flutter 配置 抓包

Flutter 1.22.6.stable
dio 3.0.10

 	Dio dio = Dio();
    dio.options.connectTimeout = 1000 * 30;  // 设置最大连接超时时间 30秒
    dio.options.receiveTimeout = 1000 * 30;  // 设置最大接受超时时间 30秒
    dio.options.contentType = Headers.jsonContentType;  // 设置数据的返回格式 json
    dio.options.headers['channel'] = Platform.operatingSystem; // 设置自定义的 请求头 channel,值为系统平台的名称;如果为Android平台,则为 channel: Android
    if (kDebugMode)  // 当前运行模式为 debug调试模式下开启代理,避免上线出现问题,设置代理的服务的URL 为 192.168.1.5:8866,也就是笔者电脑的 IP地址
      (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client)  
          client.findProxy = (uri) 
            return 'PROXY 192.168.1.5:8866';
          ;
      ;

通过上面的注释,相信读者应该会很了解,并且能根据自己的实际项目进行配置。

但是有个问题就是如果抓取的请求太多,我们如何做有效的过滤呢?

所以 笔者的技巧就是加上专有的 请求头,也就是上文代码 的 channel这个请求头,既可以标记 请求的客户端平台,又可以对抓包有效过滤,一举两得。可以在图8所示,点击画圈的那个图标。

图8

然后弹出对话框,如图9所示

图9

只捕获中请求头包含有 “channel:iOS”的 HTTP请求,这样就把项目以外的请求全部筛选掉。

有的时候 项目中可能有一些周期性的请求,比如 “埋点”,“定时网络任务”等,这个时候这些请求容易干扰,也需要根据 其他条件来对 请求进行更进一步的过滤。比如我想过滤掉这种 周期性的请求,可以筛选掉URL带有"uploadTrack“的请求

图10

点击 URL 下的 三个小点点的图标,如图11

图11

弹出筛选菜单,如图12所示配置

图12

这样就可以通过匹配URL 过滤或者只保留一些特定的URL请求记录,每个列都有 三点按钮 可以用来过滤一些匹配的信息,读者可自行练习

还可以配置根据接口的请求顺序排序
点击图13 圈出来的 向上箭头,切换接口是按照 从新到旧排序,还是从旧到新排序

图13

注意事项

因为Fiddler EveryWhere是通过设置代理的方式来抓包,如果 Fiddler EveryWhere 没有通过正常操作来关闭 ,在 Windows 10 平台 将会 出现 “断网” 现象,解决方案如下图 14-15所示,将 使用代理服务器 切换成关闭。

图14

图 15

flutter项目实战之网络抓包(代码片段)

Flutter项目实战之网络抓包前言首先在项目实战中,网络请求与接口的交互是必不可少的操作,但是移动端开发者没有Web开发者那样完善的抓包工具,所以我们就需要一些抓包软件来替代浏览器的控制台来对APP的网络... 查看详情

网络安全攻防之破解小程序积分制度(fiddler抓包教程实战)文末含彩蛋(代码片段)

网络安全攻防之破解小程序积分制度(Fiddler抓包)背景介绍实操步骤安装Fiddler并配置可拦截到请求Fiddler操作技能储备技能一:清除Session(小技能)技能二:Fiddler过滤url技能三:Fiddler打断点技能四... 查看详情

网络安全攻防之破解小程序积分制度(fiddler抓包教程实战)文末含彩蛋(代码片段)

网络安全攻防之破解小程序积分制度(Fiddler抓包)背景介绍实操步骤安装Fiddler并配置可拦截到请求Fiddler操作技能储备技能一:清除Session(小技能)技能二:Fiddler过滤url技能三:Fiddler打断点技能四... 查看详情

网络安全攻防之破解小程序积分制度(fiddler抓包教程实战)文末含彩蛋(代码片段)

网络安全攻防之破解小程序积分制度(Fiddler抓包)背景介绍实操步骤安装Fiddler并配置可拦截到请求Fiddler操作技能储备技能一:清除Session(小技能)技能二:Fiddler过滤url技能三:Fiddler打断点技能四... 查看详情

flutter上线项目实战——队列任务(代码片段)

一、应用场景队列压缩视频队列解密视频队列请求网络等等二、实现思路定义一个任务队列taskList[先进先出]提供添加任务方法取第一个任务执行执行完后,从taskList移除递归获取第一个任务并执行任务直到taskList为空停止队... 查看详情

python项目实战之网络爬虫详解(代码片段)

文章目录一、概述二、原理三、爬虫分类1、传统爬虫2、聚焦爬虫3、通用网络爬虫(全网爬虫)四、网页抓取策略1、宽度优先搜索:2、深度优先搜索:3、最佳优先搜索:4、反向链接数策略:5、PartialPageRa... 查看详情

qt6网络抓包工具项目实战导航目录

...a;CMake代码管理工具:git导航😏【Qt6网络抓包工具项目实战】总导航目录(建议收藏书签~~~)✌️part1😏【Qt6网络抓包工具项目实战】1.1Qt6.2.2环境搭建(免费)😏【Qt6网络抓包工具项目实战】1.2Qt6项目工程创... 查看详情

flutter实战之go_router路由组件入门指南(代码片段)

...什么go_router是什么?用官方的话说ADeclarativeRoutingPackageforFlutter,也即是Flutter声明性的路由组件。其项目地址点此进入github源码:下面直接进入主题看看该路由组件 查看详情

flutter实战之go_router路由组件入门指南(代码片段)

...什么go_router是什么?用官方的话说ADeclarativeRoutingPackageforFlutter,也即是Flutter声明性的路由组件。其项目地址点此进入github源码:下面直接进入主题看看该路由组件 查看详情

flutter实战之go_router路由组件入门指南(代码片段)

...什么go_router是什么?用官方的话说ADeclarativeRoutingPackageforFlutter,也即是Flutter声明性的路由组件。其项目地址点此进入github源码:下面直接进入主题看看该路由组件 查看详情

flutter实战之flutterplugin的应用一步步构建fluttertoast(代码片段)

通过本篇博文你可以了解到FlutterPlugin的使用方法以及FlutterPlugin在FlutterToast的应用。FlutterPlugin使用指南及FlutterToast原理剖析1、FlutterPlugin是什么?1.1FlutterPlugin的用法和项目结构2、FlutterToast原理剖析。2.1ToastNoContext:不带Context的To... 查看详情

flutter实战之flutterplugin的应用一步步构建fluttertoast(代码片段)

通过本篇博文你可以了解到FlutterPlugin的使用方法以及FlutterPlugin在FlutterToast的应用。FlutterPlugin使用指南及FlutterToast原理剖析1、FlutterPlugin是什么?1.1FlutterPlugin的用法和项目结构2、FlutterToast原理剖析。2.1ToastNoContext:不带Context的To... 查看详情

flutter实战之flutter应用生命周期applifecyclestate浅析(代码片段)

通过本篇博文你可以了解到1、FlutterAPP生命周期涉及到哪几种状态?2、如何监听Flutter应用的状态变化?1、FlutterAPP生命周期涉及到哪几种状态?FlutterAPP的生命周期有四种状态,在AppLifecycleState这个枚举类里有定义:resumed:APP进入... 查看详情

flutter实战之flutter应用生命周期applifecyclestate浅析(代码片段)

通过本篇博文你可以了解到1、FlutterAPP生命周期涉及到哪几种状态?2、如何监听Flutter应用的状态变化?1、FlutterAPP生命周期涉及到哪几种状态?FlutterAPP的生命周期有四种状态,在AppLifecycleState这个枚举类里有定义:resumed:APP进入... 查看详情

flutter之flutter-redux框架源码解析(代码片段)

参考资料:Flutter之实战InheritedWidget详解Flutter之Redux入门Flutter之Redux原理解析阅读本片博文之前,假设读者读了开头三篇文章。通过Flutter之Redux原理解析一篇博文中我们知道Redux的原理,有点类似于网络请求的Request-Response模式,Mi... 查看详情

flutter上线项目实战——防止录屏(代码片段)

1.Setupflutter_forbidshot:0.0.12.UsageIOSAPIGetthecurrentrecordingscreenstate(获取到当前是否在录屏)boolisCapture=awaitFlutterForbidshot.iosIsCaptured;Screenrecordingstatuschangeswillcallback(录屏状态变化会回调)Strea 查看详情

flutter微信项目实战01基本框架搭建(代码片段)

1.写在前面在上篇文章中介绍了Flutter中的Button组件,学了这么多基础组件了,该是实战验证一下学习成果了,那么今天就来个实战项目,搭建一下微信的框架吧![基础组件合集]【Flutter】基础组件【01】Text【Fl... 查看详情

最强android项目集成flutter实战分享!不看看?(代码片段)

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。今天和大家... 查看详情