基于iOS的Charles抓包图片显示实践

发表于:2021-5-19 09:53  作者:十八像朵花   来源:CSDN

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: Charles 抓包工具

  在日常开发中,我们无法看到应用程序与服务器之间发送和接收的内容,没有这种可见性,我们在确定故障的确切位置时会非常困难且耗时。而Charles是一个运行在PC上的Web代理,我们将应用程序配置为通过Charles访问网络,便可以在Charles上记录并显示发送和接收的所有数据,进而可以大大提高调试程序的效率。
  从下图可以看出Charles的角色:
  Charles有以下几个常用功能:
  请求预览:通过分组或序列视图预览和过滤请求数据;
  请求抓包:抓取HTTP和HTTPS的请求数据和响应数据;
  请求断点:拦截指定的请求或响应,预览中间的数据;
  数据修改:修改请求数据和响应数据以配合数据测试
  请求重发:指定请求重复发送,以测试后端功能和性能;
  网速模拟:设置网速延迟,模拟手机上2G/3G/4G网络;
  由于Charles的功能很多,很难在文章中详尽介绍,所以作者以在项目中对Charles的使用为切入点,对最常用、最有用的几个功能进行介绍。
  一、安装Charles
  Charles是收费软件,有30天的免费试用期限,之后每使用30分钟会被强退一次,重启后可继续使用。从Charles官网可以获取Charles安装包。
  二、请求预览
  Charles启动后,就运行在抓包模式。由于Charles会自动配置PC浏览器的代理,所以,随意打开一个网页(只要有网络请求即可)即可预览到请求信息。
  PS:如果使用插件为浏览器设置了独立代理,请关闭插件或者设置成系统代理。
  Charles提供了Structure和Sequence两种预览模式。
  Structure以域名对请求进行分组,可以很方便地预览同一域名下的请求数据,也方便于日常开发中对某一服务接口的分析和处理。图示如下:
  Sequence以时间顺序显示请求信息,可以最直接的预览请求信息。在此模式下,可以使用Filter过滤请求,针对性分析。图示如下:
  在两种模式下,都可以通过切换标签(Overview、Request、Response等)预览不同类型的请求信息。在最常用的Request和Response标签下,还可以通过切换子标签(Headers、Cookies、Text等)预览对应标签详细内容。图示如下:
  三、请求抓包
  使用工具栏的白圆红点按钮(快捷键是“Command+R”)可以使Charles在抓包(Start Recording)和不抓包(Stop Recording)之间切换。使用此按钮,在需要调试时再打开抓包功能可以有效减少干扰信息,而快速抓取到需要调试的请求。
  对从手机(以iPhone示例)发出的请求进行抓包,需要保证iPhone和PC工作在同一局域网内。
  第1步:获取PC的IP地址
  在Charles菜单栏 -> Help -> Local IP Address中可以查看PC的IP地址。图示如下:
  也可以在Mac终端使用命令ifconfig en1查看PC的IP地址。
  第2步:配置iPhone代理
  在iPhone的 设置 -> 无线局域网 -> 局域网信息(i) -> 配置代理 -> 手动中配置代理,服务器输入框中填写PC的IP地址,端口输入框中填写Charles的代理端口(一般是8888)。图示如下:
  具体的端口可以从Charles菜单栏 -> Proxy -> Proxy Settings中查看。图示如下:
  iPhone代理配置完成后,Charles会弹出连接提示框,点击Allow之后即可使用Charles对从该iPhone发出的请求进行抓包了。图示如下:
  第3步:抓包HTTPS请求
  在配置iPhone代理完毕后,就可以通过Structure或者Sequence窗口预览HTTP请求的数据了。但由于HTTPS请求被加密过,预览请求时只能预览到乱码数据。要预览到HTTPS请求的数据明文,需要PC和iPhone安装证书授权。
  1)PC安装证书
  在Charles菜单栏 -> Help -> SSL Proxying -> Install Charles Root Certificate中可以为PC安装证书,证书可以在Mac的钥匙串中查看。图示如下:
  证书可以在Mac的钥匙串中查看,双击证书,将信任权限设定为始终信任。图示如下:
  2)iPhone安装证书
  在iPhone浏览器中访问 http://charlesproxy.com/getssl 可以下载证书并安装。此地址一般不会变化,可以在Charles 菜单栏 -> Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device or Remote Browser中查看最新的官方证书下载地址。图示如下:
  基于iOS的证书信任机制,在安装完成并信任证书后,需要到iPhone设置 -> 关于本机 -> 证书信任设置 中启用根证书。图示如下:
  这样,就可以使用Charles中抓包iPhone发出的HTTPS请求并预览明文数据了。
  抓包模拟器上的HTTPS请求需要点击Install Charles Root Certificate in iOS Simulators安装证书。
  3)启动抓包SSL权限
  在Charles菜单栏 -> Proxy -> SSL Proxying Settings中勾选Enable SSL Proxying,然后在Locations中添加需要抓包的Host和Port即可。图示如下:
  也可以在抓包界面,右键点击某条/组请求,在弹出的选项列表中点击Enable SSL Proxying启用权限。图示如下:
  四、请求断点
  在Charles的请求预览界面中,右键点击某条/组请求,在弹出的选项列表中有Breakpoints选项。图示如下:
  点击Breakpoints后即为该请求设定了断点。默认情况下,在该请求的Request / Response过程都会受断点控制,即在Request数据发送到的服务端之前会被暂停,在Response数据发送到客户端之前也会被暂停。可以从Charles菜单栏 -> Proxy -> Breakpoint Settings中编辑断点的参数。比如,只需要对Response过程加断点,可以将Request的勾选状态取消。图示如下:
  在断点状态下,可以预览和修改请求的中间数据,之后点解Execute按钮即可继续执行请求。
  五、数据修改
  Rewrite和Breakpoint Editing都可以起到修改请求数据的作用。
  1)Rewrite
  在Charles菜单栏 -> Tools -> Rewrite中可以开启Rewrite功能,点击Add按钮可以添加一条设置,并可以在右侧的Locations和Rules中分别添加要Rewrite的请求路径和Rewrite规则。图示如下:
  Rewrite适合应用于对请求的批量和长期修改,对请求数据影响较大(测试结束后经常忘记去掉规则)。所以,在一些轻量级的数据修改场景中,我经常结合Breakpoint功能修改数据。
  2)Breakpoint Editing
  结合断点功能,可以很好的实现临时修改请求的Request / Response数据的需求。为某条请求设置断点后,当该请求发生时,会自动跳到断点窗口。点开Edit Request / Response界面,可以看到中间信息,选择合适的数据格式(HTML、Json等)进行修改。修改完成后,点击Execute按钮即可在终端上看到修改后的的效果。图示如下:
  六、请求重发
  在Charles的请求预览界面中,右键点击某条/组请求,在弹出的选项列表中有Repeat和Advanced Repeat两个选项。图示如下:
  单击Repeat会重发该请求一次,常用于测试服务接口能否正常访问,客户端能否正常收到返回数据等。单击Advanced Repeat会弹出重发参数编辑页面,图示如下:
  在此编辑界面上,可以自定义Iterations(重发次数)、 Concurrency(并发数)和 Repeat(重发延时),常用于对服务接口进行压力测试
  七、网速模拟
  在Charles菜单栏 -> Proxy -> Throttle Settings中可以启用Throttling(节流)功能,并自定义Locations(受限服务接口)和Throttle Configuration(节流配置)。支持对Throttle preset(预置的数据传输方式)、Bandwidth(带宽) Utilisation(利用比率)、 Round-trip latency(往返延迟)、MTU(最大传输单元) Reliability(可靠性) Stability(稳定性)等参数进行编辑。其中,在Throttle preset支持模拟3G/4G网络环境。图示如下:
  使用Throttle功能,可以方便地排插因为若网而导致的bug,而这类bug在线上很容易出现,而且很难排查复现。

      本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理

评 论

论坛新帖



建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海信义律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2021, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道