【详细教程】抓包神器：Charles

逛逛 GitHub 除了推荐一些优质、有趣的 GitHub 项目，也会发一些好玩有用的软件，比如历史发布的：

这篇是抓包工具 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 秒种的延时。因此，该付费方案对广大用户还是相当友好的，即使你长期不付费，也能使用完整的软件功能。

但是，我选择破解，我用 Charles 是来提升排查问题的时间的。结果你给我搞这些东西我就受不了了。主要还是破解比较容易。哈哈哈哈

破解方式可以关注微信公众号逛逛GitHub，回复 1208 获取。选择当前自己的版本下载一个 Jar 包就可以了。

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 应用的一篇教程，前端和后端的工程师肯定会用到这个工具，大家可以转发、点个在看，以后肯定能用到。

投稿作者：胡川港

知乎主页：www.zhihu.com/people/hu-chuan-gang-58

GitHub主页：https://github.com/xiaoxiunique

推荐阅读
0. 逛逛GitHub交流群限时加入
1. 地铁大数据客流分析系统
2. 2020 年 GitHub 年度总结出炉！
3. 程序员找工作黑名单
4. 这个 AI 开源项目要火！