APP 抓包和微信小程序抓包-Charles 的精简使用教程

APP 抓包和微信小程序抓包-Charles 的精简使用教程APP抓包和微信小程序抓包-Charles的精简使用教程目标教程一、安装Charles二、Charles简介(1)Charles欢迎页面(2)基础功能按钮(3)抓包内容显示方式(4)过滤抓包内容三、手机配置Charles代理四、解决配置Charles代理之后手机无法上网的问题五、手机APP抓包(1)对“花生地铁”APP进行抓包。六、微信小程序抓包(1)安装SSL…

大家好,又见面了,我是你们的朋友全栈君。

2021-09-25 更新

  • 博主近期也有APP抓包的需求,不过换了一个工具 Fiddler Everywhere。新工具可能 颜值 (这里纯粹是讲UI更炫酷)更高一些

2019-07-10 更新

  • 部分机型依然成功。最近有很多小伙伴反馈 HTTPS 不能进行抓包了,于是博主再进行了一次测试:
    • 三星手机(系统版本 Android 8.1),抓包成功(图略)
    • 小米6 (系统版本 miui 10.3 稳定版)抓包失败:Client SSL handshake failed(博主怀疑是系统问题,但暂未找到解决方案,有解决方案的小伙伴欢迎留言)
    • oppo 抓包失败,和小米 6 有类似的错误提示信息(博主怀疑是系统问题,但暂未找到解决方案,有解决方案的小伙伴欢迎留言)
    • 苹果手机 IOS 12(记得要在 通用-关于本机-证书信任设置 中开启证书)抓包成功。苹果手机抓包截图:
      • 在这里插入图片描述
      • 在这里插入图片描述

目标

  • 抓取移动端项目的前端页面和后台的交互数据,对请求信息和响应内容进行分析。
    • 普通手机 APP 的前端页面和后台一般是通过 HTTP 请求进行交互。
    • 微信小程序的前端页面和后台一般是通过 HTTPS 请求进行交互。

教程

一、安装 Charles

官方网站下载最新的安装包,然后点击运行,在弹出的安装向导中,根据提示进行操作即可顺利完成安装。过程很简单,所以这里进行不详细介绍。当前最新的版本是 charles-proxy-4.2.7-win64.msi 。

二、Charles 简介

(1)Charles 欢迎页面

  • 运行 Charles 之后,默认打开的欢迎页如下图所示:在这里插入图片描述

(2)基础功能按钮

需要关注两个按钮:清空抓包内容按钮和抓包开关按钮:在这里插入图片描述

(3)抓包内容显示方式

  • Sequence 形式。可以看到全部请求,默认以数据请求的顺序来显示,最新的请求显示在最下面。如下图所示:在这里插入图片描述
  • Structure 形式。可以很清晰的看到请求的数据结构,请求信息根据域名划分。具体如下图所示:在这里插入图片描述

(4)过滤抓包内容

  • 通过 filter 框 进行过滤(推荐使用)。不管是Sequence 还是 Structure 显示方式,都可以通过下方的 filter 框进行过滤:在这里插入图片描述
    在这里插入图片描述
  • 通过 Recording Settings 设置过滤条件。具体如下图:在这里插入图片描述

三、手机配置 Charles 代理

  • 需要手机和运行 Charles 的电脑在同一个局域网内。
  • 启动 Charles,点击 Proxy-Proxy Settings,查看代理端口:在这里插入图片描述
  • 在命令提示符窗口,执行 ipconfig ,查看电脑的IP:在这里插入图片描述
  • 在手机连接的 WLAN 中,设置代理信息。从前两步中,可以看到Charles 的代理端口为 8888,电脑IP为 192.168.1.101。在这里插入图片描述

四、解决配置 Charles 代理之后手机无法上网的问题

如果代理配置完成之后,出现手机无法上网的情况。在这里插入图片描述
需要检查下面几个地方:

  • 检查防火窗。我用的是 win 10 。在这里插入图片描述
  • 检查 Charles 黑白名单。如果没有特别需要可以关闭黑白名单功能。在这里插入图片描述在这里插入图片描述

五、手机 APP 抓包

(1)对 “花生地铁” APP 进行抓包。

  • 打开 花生地铁 APP(广州的朋友应该都用过吧):
    在这里插入图片描述
  • 查看抓包内容:
    在这里插入图片描述

六、微信小程序抓包

(1)安装 SSL 证书

由于微信小程序的前端页面和后台交互,基本上都是基于 HTTPS ,所以需要先安装 SSL 证书。在这里插入图片描述

1、Charles 上安装 SSL 证书

  • 通过 Help->SSL Proxying->Install Charles Root Certificate 打开证书安装窗口:
  • 在这里插入图片描述
  • 根据安装向导的提示,全部采用默认的选项,最后完成安装:在这里插入图片描述

2、手机安装 SSL 证书

  • Charles 建议的安装方法。
    • 通过 Help->SSL Proxying->Install Charles Root Certificate On a mobile device ,可以看到以下提示:在这里插入图片描述
    • 根据提示,应该进行如下操作:
      • 手机配置 Charles 代理。上面已经介绍,这里不再赘述。
      • 在手机浏览上访问:http://chls.pro/ssl ,下载并安装证书。
      • 大致流程如下:在这里插入图片描述
        在这里插入图片描述
      • 遗憾的是,有些品牌的手机,比如小米手机,不支持通过 getssl.crt 安装证书。
      • 在这里插入图片描述
  • 其他方法。
    • 如果上面的方法不能成功安装证书,可以在电脑浏览器上访问 http://chls.pro/ssl,下载 charles-proxy-ssl-proxying-certificate.pem,并传手机上进行安装。在这里插入图片描述
    • 在手机中,把文件的后缀名改成 .crt:在这里插入图片描述
    • 点击 .crt 文件,进行证书安装:在这里插入图片描述
    • 安装完成之后,在系统安全-加密与凭据-信任的凭据中,可以看到刚刚安装的证书:
    • 在这里插入图片描述

(2)配置 Charles 的 SSL

  • 通过 Proxy-SSL Proxy Settings 打开窗口:在这里插入图片描述
  • 在弹出的窗口中,选择 Enable SSL Proxy,并设置要代理的域名。本示例是要对微信小程序“猫眼电影”抓包,所以配置了 api.maoyan.com 和 ad.maoyan.com。
  • 如果要匹配的域名比较多,配置麻烦,可以不填域名和端口内容,直接点击OK
    • 在这里插入图片描述
    • 在这里插入图片描述
  • (3)对微信小程序“猫眼电影”进行抓包

  • 在微信钱包-第三方服务中,打开“猫眼电影”。在这里插入图片描述
  • 查看 Charles 中的抓包情况:在这里插入图片描述

总结

一个精简的 Charles 教程到此结束。
如果有什么问题,希望可以给我留言。
最后祝大家工作顺利。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/130549.html原文链接:https://javaforall.net

(0)
上一篇 2022年6月14日 上午8:46
下一篇 2022年6月14日 上午8:46


相关推荐

  • C语言中的switch语句基本用法

    C语言中的switch语句基本用法switch 语句 实际生活中 需要做出很多选择 大家都知道做选择可以使用 if 语句 但是如果选择太多 if 语句使用起来就会很繁琐 这个时候就需要一个能将代码简化的语句 也就是我们今天的主角 switch 语句 switch 语句是一个多分支选择语句 并且可以支持嵌套 switch 语句的基本格式 switch 表达式 case 常量 1 语句 1case 常量 2 语句 2default 语句 nbreak switch 语句通过将表达式的值与常量值进行比对 如果相等则执行后面的

    2026年3月26日
    2
  • Hog特征、Haar特征

    Hog特征、Haar特征HOG http blog csdn net abcjennifer article details 转载 HOG 即 histogramofo 是用于目标检测的特征描述子 该技术将图像局部出现的方向梯度次数进行计数 该方法和边缘方向直方图 scale invariantfea 类似 不同的是 hog 的计算基于

    2026年3月16日
    3
  • 绘制UML各种图详解「建议收藏」

    绘制UML各种图详解「建议收藏」来源:http://blog.csdn.net/shift_wwx/article/details/79205187一、前言在软件开发过程中会经常整理文档,不是所有的信息都可以通过文字来表达,而换成图之后会更加的直观、有效,其中频繁使用的就是UML图。结合自己实践总结一下,希望对大家都能有所帮助。本文中的UML图都是用visio绘制,sourcecode展示是Ja…

    2022年8月13日
    8
  • python爬虫是干嘛的?python爬虫能做什么?

    python爬虫是干嘛的?python爬虫能做什么?python 爬虫可以用于收集数据 爬虫是一个爬虫程序 一个程序的运行速度是非常快的 而且不会因为重复的事情感到疲倦 接下来我们一起学习 python 爬虫是干嘛用的 python 爬虫究竟能做什么呢 python 爬虫是什么 python 爬虫是干嘛的呢 1 python 爬虫可以用来收集数据 2 Python 爬虫可以刷流量和秒杀 python 爬虫能做什么呢 1 收集数据 python 爬虫用来收集数据是最直接和常用的方法 可以使用 python 爬虫程序获得大量的数据 从而变得非常的简单和快速 绝大多数网站使用了模

    2026年3月20日
    2
  • svn—Eclipse中如何显示svn 信息「建议收藏」

    从svn下载的项目,导入Eclipse中,就是不显示出文件的文件的状态图标和后面的版本号。

    2022年2月24日
    121
  • django官方入门教程_DJango

    django官方入门教程_DJangoDjango入门教程Django是一个开放源代码的Web应用框架,由Python写成。采用了MTV的框架模式,即模型M,模板T和视图V。其最大特点自带一个后台管理系统,可以让只要少量代码就能实现后台管理,尤其适合内容管理网站(如博客,新闻,公司首页等信息类网站),适合中小型web网站。Django基本介绍Django安装HelloDjango开发工具

    2025年10月1日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号