抓包神器：Charles

于 2025-02-27 16:24:02 发布
阅读量1.3k 收藏 9
点赞数 8
文章标签： 计算机网络 安全 网络 前端 https
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Karka_/article/details/145907349
版权

抓包神器：Charles

Charles 是在 PC 端常用的网络封包截取工具，在做开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。除了调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。

Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析，也就是抓包啦。

Charles 主要的功能包括：

  • 截取 Http 和 Https 网络封包。
  • 支持重发网络请求，方便后端调试。
  • 支持修改网络请求参数。
  • 支持网络请求的截获并动态修改。
  • 支持模拟慢速网络。

同类型的工具还有 大名鼎鼎的 Fidder：telerik.com/fiddler

***1.***使用背景

在与公司 App 端 同事调试接口时，有的时候可能会出现一些非常莫名其妙的问题。有的时候可能难以定位这个问题到底是属于前端展示 Bug ，还是说接口数据异常。

通常这个时候，可能后端就需要去服务端日志然后结合日志数据进行排查。但是限于工具 网络等等复杂的情况，这样的方式其实真的蛮低效的。

这个时候就需要这样的一个工具，可以实时的看运行 App 的接口返回情况。结合前端 视图 展示，能在很短的时间内找到问题出现的原因。这样就可以快速的修复问题了。

2. 下载

官网下载地址：

www.charlesproxy.com/download/

Charles 是收费软件，可以免费试用 30 天。试用期过后，未付费的用户仍然可以继续使用，但是每次使用时间不能超过 30 分钟，并且启动时将会有 10 秒种的延时。因此，该付费方案对广大用户还是相当友好的，即使你长期不付费，也能使用完整的软件功能。

3. Charles 配置

当 Charles 安装好之后，这个时候就可以抓取 Http 的包了，但是我们为 App 提供的接口 一般都是 Https 的。所以我们需要安装证书。

安装证书

Help -> SSL Proxying ->Install Charles Root Certificate

图片

证书安装好之后，还需要信任一下。就可以了

Https 抓取配置

图片

图片

iPhone 抓包配置

这里为什么是 iPhone 抓包配置，主要是因为 Android 抓包配置太麻烦了。然后 iPhone 就只需要简单的安装证书就可以了。

图片

如上图，点击 Install Charles Root Certificate on a Mobile Device Or Remote Browser

图片

点击之后的提示框中 192.168.1.106:8888 为手机将要设置网络代理的地址。chls.pro/ssl 为手机下载证书地址。

确认手机和电脑在同一个网络下，访问 chls.pro/ssl 下载并安装证书。而后信任证书。

安装证书

图片

信任证书

设置 - 通用 - 关于本机 - 证书信任设置 - 勾选安装的证书

图片

手机配置代理

在将 WIFI 的代理配置成 192.168.1.106. 这样就可以顺利抓取到 手机的 Https 的包了。

图片

完成 上诉设置后，iPhone 就可以抓包了。

4. Chrome 抓包配置

Chrome 抓包配置和手机差不多，也是需要安装插件，然后配置代理。

配置代理，在 设置 - 高级 - 代理配置中。配置为 Charles 代理。接下来介绍主要功能：

Repeat

将已执行过的请求重复执行。

应用场景，服务器压力测试。

Compose

临时修改一些请求的参数，点击 Execute 就可以已修改后的请求发送。

图片

Rewrite

Rewrite 功能功能适合对某一类网络请求进行一些正则替换，以达到修改结果的目的

图片

Map Remote Config

地址从定向，将访问 A 服务器的请求代理到访问 B 服务器。

图片

Map Local Config

将指定请求的 响应 替换为 本地文件

图片

5. 实战一

接下来对蔚来 理想的 App，对其消息系统进行抓包分析。得到比较适合我们自己的消息系统设计。

理想 ONE

图片

理想的消息系统设计师一种集中式的设计，将所有的消息集中管理，评论、赞、通知、私信、车辆。

在消息中心拉去通知类消息

图片

对接口进行抓包如下。

https://api-app.lixiang.com/mms-api/v1-0/message?status=3&pageNumber=0&appId=chj_app_m01&channelType=1&pageSize=20&category=notice

接口设计上 通过 category 来区分是哪个渠道上的消息，现在我们请求的是通知 类型的消息，所以 category 为 notice。

接口的响应参数如下

{
    "success": true,
    "code": 0,
    "msg": "SUCCESS",
    "data": {
        "pageSize": 20,
        "pageNumber": 0,
        "numberOfElements": 1,
        "totalPages": 1,
        "totalElements": 1,
        "elements": [{
            "requestId": "rC21P1A80H2DJJQIGR00",
            "messageId": "C21P1A80H2DJJQIGR0000000",
            "appId": "chj_app_m01",
            "recipient": "3250332467430584322",
            "sender": null,
            "title": "理想社区用户公约（试行）",
            "summary": "亲爱的理想用户，为了维护社群的真实，友好的氛围，我们制定了理想的社群规范。",
            "contentId": null,
            "action": "{\"accountId\":0,\"avatar\":\"\",\"comment\":\"\",\"commentId\":0,\"commentType\":1,\"createTime\":1598072448536,\"level\":1,\"messageType\":\"notice\",\"nickName\":\"\",\"productId\":754,\"surfacePlot\":\"https://p.ampmake.com/lixiangzhizao_app/pc_push_system/787334842102195.jpg\",\"type\":1}",
            "tag": ["[Ljava.lang.String;@474616fd"],
            "category": "notice",
            "status": 1,
            "encryption": null,
            "sendOn": 1598072449000,
            "receiveOn": 0,
            "createdOn": 1598072448000,
            "updatedOn": 1599009229000
        }]
    }
}

我们将返回值和界面放在一起对比一下:

图片

对比之后，界面元素的各个字段就比较清晰了。action 对象中，用来控制 查看详情 按钮，具体根据不同的 category 来控制不同的行为，因为现在的通知消息为一篇 文章，所以 点击 查看详情，就是拉去对应文章的信息，action 中 productId 就是指向的文章的主键 Id

图片

点击跳转至 详情页，上方展示了 【详情页页面】 【接口 URL 地址】 【接口详情】。可以看到对应的 productId 就是 754.

消息分类

评论 comment

图片

点赞 favour

图片

通知 notice

车辆 vehicle

蔚来 NIO

图片

蔚来的消息入口是放在 IM 中的一个会话，和理想的设计不太一样，消息点击进入之后 分为 互动 和 通知，对互动消息列表的抓包结果如下。

图片

在抓包时发现，在每次请求消息列表 这个接口的时候，还会附带一个 history_read 的一个接口

/api/1/message/history_read?app_id=10002&app_ver=4.4.0&device_id=2c0d36fa578c45c6819e0567399b8704&lang=zh-cn&region=cn&timestamp=1599026946&sign=4be15ff9fa6e02e2fe5b24bb06c74a03

猜测应该是控制当前用户已经读取过当前时间之前的消息。下次进入系统就不会再提示了。

图片

在对比 通知里面的消息结构。基本的消息结构就比较明确了。

图片

上图是在 蔚来 发表了一条 说说 之后，获取得到了 11 个点赞，28个评论后，第一次登陆时的在主界面 调用 history_info 接口，拉去消息列表。可以看到在 notification 分类下有 1 条未读消息，在 social_events 分类下有 28 条未读消息。

在 data.msg 数组中，每个类型下都有一条消息。结合界面可以发现，这一条消息就是用来在界面最外面展示的。

图片

图片

第一张图是 点赞 消息对应的 消息结构，第二张图是 评论 对应的消息接口。

基本可以确定 蔚来 NIO 的消息结构里面主要包括

  • read 是否已读。
  • data 内容信息，博客信息和点赞评论信息。
  • description 消息描述，这个字段应该是用于 消息推送 的时候的内容。
  • title 在 App 消息列表中呈现的标题。
  • scenario 场景，当前场景为关注，点赞、收藏，都在这里面。
  • like 点赞，comment 收藏
  • category 类别，应该用来区分 互动类通知 和 系统类通知。
  • msg_id 消息ID，因为这样的操作可能会触发消息推送，所以每条需要添加 唯一 ID。
  • ink_value 需要跳转到对应的地址 nio:// 这种形式 应该是 客户端的一种方式。

6. 实战二

社区帖子添加标签是一个很常用的功能，大部分的社区 App 都有实现，诸如 微博，豆瓣，Oppo社区，理想，蔚来。真正在进入此需求之前，最好了解下相关平台的产品。

图片

图片

以上分别是 豆瓣、蔚来、Oppo社区、理想汽车 的 Tag 展示方案。

  • Tag 可以支持一个或者多个

开始抓包 分析接口

图片

后面所贴出的 返回结果针对 Topic 部分JSON， 其他部分省略。

豆瓣

图片

豆瓣列表 展示

{
    "topic_label_bg_color":"#F7F7F7",
    "topic_label_bg_img":"",
    "name":"读书时写的有趣批注",
    "topic_icon_large":"",
    "url":"https://www.douban.com/gallery/topic/164512/",
    "uri":"douban://douban.com/gallery/topic/164512",
    "topic_icon":"",
    "topic_label_hashtag_color":"#5DC66F",
    "topic_label_text_color":"#39A94C",
    "type":"gallery_topic",
    "id":"164512"
}

豆瓣主题详情

{
    "subscription_count": 1267,
    "creator": null,
    "is_subscribed": false,
    "invite_type": "",
    "screenshot_title": "分享海报",
    "screenshot_url": "douban://partial.douban.com/screenshot/gallery/topic/164512/_content",
    "guests": [],
    "card_subtitle": "88篇内容・164.1万次浏览",
    "screenshot_type": "rexxar",
    "id": "164512",
    "is_closed": false,
    "focused_subject": null,
    "topic_label_bg_color": "#F7F7F7",
    "topic_label_bg_img": "",
    "has_create_button": true,
    "group": null,
    "topic_tabs": [],
    "post_count": 88,
    "name": "读书时写的有趣批注",
    "label": "",
    "topic_label_hashtag_color": "#5DC66F",
    "ad_monitor_urls": [],
    "is_ad": false,
    "unpublic_reason": "",
    "participant_count": 92,
    "tags": [],
    "subject_card": null,
    "cover_url": "",
    "introduction": "今天重翻了我从前看的书，对于自己写的批注感到好笑，虽然很多是无厘头的碎碎念，但也很有趣不是么？让我看看你们写的吧，一起分享这快乐！",
    "content_type": 6,
    "is_public": true,
    "topic_label_text_color": "#39A94C",
    "sharing_url": "https://www.douban.com/doubanapp/dispatch?uri=/gallery/topic/164512/",
    "wechat_timeline_share": "url",
    "topic_icon_large": "",
    "click_track_urls": [],
    "uri": "douban://douban.com/gallery/topic/164512",
    "create_button_text": "",
    "topic_icon": "",
    "mask_color": "",
    "mask_type": ""
}

核心信息：类型、跳转地址、名称、文字背景色、文字颜色、文字背景图片、图标，描述，文章发布数

蔚来

图片

帖子列表

{
    "name": "EC6提车季",
    "topic_id": "20872"
}

帖子详情

{
    "topic_id": 20872,
    "topic_name": "EC6提车季",
    "img_url": "https://cdn-app.nio.com/user/2020/9/24/419faa45-35eb-412b-86c1-d4a3cfd33a36.jpeg",
    "summary": "2020年12月31日前(含)参与话题互动，分享你的提车作业或用车体验，每月抽选10位用户各获得500积分奖励",
    "create_user_id": "660135565",
    "create_type": 1,
    "sort_id": 77,
    "ugc_count": 256,
    "attend_user_count": 12640,
    "new_hot_tag": 0,
    "create_time": 1600962984,
    "update_time": 1600997614,
}

蔚来的 Tag 显示逻辑是，在文章列表页 只是显示比较简单的 Topic 名称和 ID，只是作为展示使用。当进入 Topic 专题页时 拉取当前 Topic 详细信息。

核心信息：名称，图片、描述、文章 UGC 数量，参与人数。

理想

图片

帖子列表 （右）

{
    "productId": 95830,
    "name": "有理想的假期",
    "browseNum": 0,
    "participantsNum": 0,
    "contentNum": 0,
    "type": 1,
    "topicMark": 1
}

帖子详情（左）

{
    "success": true,
    "code": 0,
    "data": {
        "productId": 95830,
        "name": "有理想的假期",
        "type": 1,
        "description": "当国庆节遇上中秋节，就迎来了疫情之后的第一个黄金周长假，在家憋了大半年，这次长假你准备好今年的“报复性”旅行了吗？赶紧来分享你的自驾旅途，晒路线、晒美食、晒装备...关键是还有机会赢SWITCH游戏机！",
        "image": "https://p.ampmake.com/aisp/community/aisp/community/6ece59aa-7604-4f52-bcc3-2577f9a9f678.jpg",
        "imageRes": "1600*900",
        "browseNum": 650,
        "participantsNum": 164,
        "contentNum": 273,
        "router": "https://www.lixiang.com/community/detail/topic/95830.html",
        "createdAt": 1601012653000,
        "topicMark": 1
    },
    "msg": "成功"
}

在进入帖子详情时，会拉取 Tag 详细信息。随后获取当前 Tag 下的帖子。从返回结果 router 字段 可以看出 理想汽车 主题实现是通过 H5 进行实现的。

核心信息： H5，浏览数，发布数，内容，类型，描述，图片，图片大小

Oppo 社区

图片

帖子列表

[{
    "id": 970,
    "name": "抬头，看树！"
}]

帖子详情

{
    "id":941,
    "name":"我怎么这么好看",
    "weight":1029,
    "status":1,
    "related":0,
    "perm":1,
    "style":0,
    "type":"",
    "guide":"发出你的自拍吧！",
    "description":"发出你的自拍吧！",
    "small_img":"https://imgfs.oppo.cn/uploads/topic/2020/07/31/17315884601.jpg",
    "pc_img":"https://imgfs.oppo.cn/uploads/topic/2020/07/31/17320924401.jpg",
    "big_img":"https://imgfs.oppo.cn/uploads/topic/2020/07/31/17320396101.jpg",
    "insert_time":1596187981,
    "insert_by":15122500992,
    "compere_ids":"",
    "category_id":1,
    "category_name":"人像",
    "group_id":"",
    "related_topic":"",
    "reply":"1.2万",
    "follower":64,
    "thread":"1.3万",
    "read":"33.3万",
    "is_follow":0,
    "username":[

    ]
}

抓包发现，Oppo 社区 部分接口 采用的是 protobuf 协议。不太好抓。对应 的网页 是 Json 的形式

关键信息： H5，名称，图片，地址，类型，回复量，参与量，读取，状态。

话题选择页

图片

可以看出大致的都差不多可能需要关注的几个点

  • 话题有热门非热门的区分
  • 话题具备类型

好了，这篇是抓包工具 Charles 应用的一篇教程，前端和后端的工程师肯定会用到这个工具，大家可以转发、点个收藏，以后肯定能用到。

学习计划安排

👉网络安全重磅福利：入门&进阶全套282G学习资源包免费分享！

①网络安全学习路线
②上百份渗透测试电子书
③安全攻防357页笔记
④50份安全攻防面试指南
⑤安全红队渗透工具包
⑥HW护网行动经验总结
⑦100个漏洞实战案例
⑧安全大厂内部视频资源
⑨历年CTF夺旗赛题解析

mac 抓包神器charles 5.01
07-26
mac 抓包神器charles 5.01
【干货】手把手教你如何使用Charles抓包
热门推荐
人生不怕起点低，就怕没追求
09-07 4万+
一、为什么使用charles 前几天因为需要通过抓包定位问题，打开了尘封已久的fiddler，结果打开软件后什么也干不了，别说手机抓包了，打开软件什么请求也抓不到。很多时候都是如此，如果一个方案不行，肯定要有替代方案的。于是，想到了charles来进行抓包，也就是换一个工具完成了想做的事。 二、下载地址 https://www.charlesproxy.com/ 三、web抓包 Charles Web抓包非常简单，启动Charles会自动与浏览器设置成代理，不需要进行过多的设置。 接下来我就就是通过浏览.
Charles抓包神器：软件测试中的得力助手
最新发布
qq_43305605的博客
08-20 494
Charles是一款跨平台的HTTP代理/HTTP监视器/反向代理应用，它允许一个开发者查看所有的HTTP和SSL/HTTPS通信在他们的电脑和互联网之间进行。通过使用Charles，你可以看到你的应用程序正在发送什么请求、接收到什么响应，并且可以检查加载失败的资源。
抓包工具 Charles
m0_51478572的博客
09-21 2万+
**抓包**（packet capture）就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作。也用来检测网络安全。抓包也经常被用来进行数据截取等。
charles抓包工具详细教程
small_cutey的博客
10-24 1万+
charles抓包工具详细教程
charles安卓手机抓包教程（超详细的避坑指南）
qq_45005145的博客
08-12 2万+
charles无法抓取手机https请求？charles证书过期或者手机无法下载证书？超详细的避坑指南，本人亲测有效
Charles抓包工具使用
weixin_73348410的博客
05-05 3640
Charles的安装与使用介绍
Charles的安装和使用教程（包含使用Charles进行抓包）
北冥同学的成长记录笔记
06-29 2万+
Charles 是 PC 端常用的网络封包截取工具, 也可以抓取移动端的网络请求。除了调试接口外，Charles 也可以用于分析第三方应用的请求。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议
抓包神器charles 可以手机的抓包
11-18
抓包神器charles 可以手机的抓包 连同一wifi可抓手机信息包 开发什么的 很好用 可以试试 挺不错的
抓包神器 Charles 3.9.2
10-09
抓包神器 Charles 3.9.2 最新
mac下抓包神器Charles
02-23
Charles其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的。该软件是用Java写的,能够在Windows,Mac,Linux上使用。开发iOS都在Mac系统上
抓包神器_Charles_mac_4.2_破解版_亲测有用_idoxu.zip
07-15
这是一款，Mac电脑下，必备的抓包...抓包神器_Charles_mac_4.2_破解版_亲测有用_idoxu 我是IDO老徐，经过亲测，可用 。且，我帮大家写了一个readme.txt文档，详细写明了如何安装、如何使用 。根据文档，安装破解即可。
手把手教你如何使用Charles抓包
m0_65111097的博客
03-13 4699
在我们的测试工作中，可能你会发先一个bug，开发会让你在操作一遍，他要查看日志经i选哪个定位分析，这时候，在客户端上进行操作一遍就会麻烦，这是直接用Charles 发送一遍重复的请求就可以了，并且，重新发送请求也可以帮助我们进行功能测试；通过上面的设置，虽然来自我们手机端的Http协议请求可以抓取到，但是HTTPS协议的包是不能抓取的，需要安装配置证书才可以，现在手机上大多数都已经切到https很少由http协议的了。
Charles 抓包使用教程
weixin_44267253的博客
02-27 6488
Charles 抓包使用教程
Charles如何抓包
weixin_42612405的博客
02-13 1318
Charles 是一个流行的 HTTP 调试代理软件，可以用于抓取网络请求的数据包。使用 Charles 抓包的步骤如下： 安装 Charles：可以从官方网站下载安装。 配置代理：将系统的代理设置为 Charles 的代理地址。 开始抓包：启动 Charles 并在要抓包的网络请求上打开抓包功能。 分析数据包：Charles 会自动记录所有的网络请求和响应数据包，可以通过界面上的工具来查...
全网最详细charles抓包工具详细教程，实战教程（细致）
大佬云集技术答疑交流群：743262921(进群暗号:222)
05-13 1万+
一、前言 二、在PC端抓https包 三、在PC端抓https包 四、在移动端抓http包 五、在移动端抓https包 一、前言 charles相当于一个插在服务器和客户端之间的“过滤器” 当客户端向服务器发起请求的时候，先到charles进行过滤，然后charles在把最终的数据发送给服务器 注意：此时charles发给服务器的数据，不一定是客户端请求的数据；charles在接到客户端的请求时可以自由的修改数据，甚至可以直接Block客户端发的请求 服务器接收请求后的返回数据，也会先到charles
『Charles数据抓包功攻略』| 如何使用Charles进行数据抓包与分析？
虫无涯的博客
12-05 4462
Charles是一个HTTP代理/ HTTP监视器/反向代理，能够查看其机器和Internet之间的所有HTTP和SSL / HTTPS流量。这包括请求，响应和HTTP标头（包含cookie和缓存信息）；在做移动开发时，为了调试与服务器端的网络通讯协议，可以使用Charles截取网络封包进行分析；Charles通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而来实现网络封包的截取和分析；Charles也可以用于分析第三方应用的通讯协议。配合Charles的SSL。
使用Charles进行网络抓包截取数据
qq_58452483的博客
06-28 2289
最近遇上一个需求，通过逆向网络抓包的方式去截取某个网站的数据，此时我想到了Charles。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值