胖虎的工具箱-编程导航 胖虎的工具箱-编程导航

抓包神器：Charles

1年前 (2023) 程序员胖胖胖虎阿
165 0 0

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

抓包神器：Charles

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

Https 抓取配置

抓包神器：Charles
抓包神器：Charles

iPhone 抓包配置

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

抓包神器：Charles

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

抓包神器：Charles

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

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

安装证书

抓包神器：Charles

信任证书

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

抓包神器：Charles

手机配置代理

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

抓包神器：Charles

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

4. Chrome 抓包配置

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

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

Repeat

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

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

Compose

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

抓包神器：Charles

Rewrite

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

抓包神器：Charles

Map Remote Config

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

抓包神器：Charles

Map Local Config

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

抓包神器：Charles

5. 实战一

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

理想 ONE

抓包神器：Charles

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

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

抓包神器：Charles

对接口进行抓包如下。

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
        }]
    }
}

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

抓包神器：Charles

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

抓包神器：Charles

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

消息分类

评论 comment

抓包神器：Charles

点赞 favour

抓包神器：Charles

通知 notice

车辆 vehicle

蔚来 NIO

抓包神器：Charles
蔚来的消息入口是放在 IM 中的一个会话，和理想的设计不太一样，消息点击进入之后 分为 互动 和 通知，对互动消息列表的抓包结果如下。
抓包神器：Charles
在抓包时发现，在每次请求消息列表 这个接口的时候，还会附带一个 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
猜测应该是控制当前用户已经读取过当前时间之前的消息。下次进入系统就不会再提示了。
抓包神器：Charles
在对比 通知里面的消息结构。基本的消息结构就比较明确了。
抓包神器：Charles
上图是在 蔚来 发表了一条 说说 之后，获取得到了 11 个点赞，28个评论后，第一次登陆时的在主界面 调用 history_info 接口，拉去消息列表。可以看到在 notification 分类下有 1 条未读消息，在 social_events 分类下有 28 条未读消息。
在 data.msg 数组中，每个类型下都有一条消息。结合界面可以发现，这一条消息就是用来在界面最外面展示的。
抓包神器：Charles
抓包神器：Charles
第一张图是 点赞 消息对应的 消息结构，第二张图是 评论 对应的消息接口。
基本可以确定 蔚来 NIO 的消息结构里面主要包括
  • read 是否已读。
  • data 内容信息，博客信息和点赞评论信息。
  • description 消息描述，这个字段应该是用于 消息推送 的时候的内容。
  • title 在 App 消息列表中呈现的标题。
  • scenario 场景，当前场景为关注，点赞、收藏，都在这里面。
  • like 点赞，comment 收藏
  • category 类别，应该用来区分 互动类通知 和 系统类通知。
  • msg_id 消息ID，因为这样的操作可能会触发消息推送，所以每条需要添加 唯一 ID。

  • ink_value 需要跳转到对应的地址 nio:// 这种形式 应该是 客户端的一种方式。

6. 
实战二
社区帖子添加标签是一个很常用的功能，大部分的社区 App 都有实现，诸如 微博，豆瓣，Oppo社区，理想，蔚来。真正在进入此需求之前，最好了解下相关平台的产品。
抓包神器：Charles
抓包神器：Charles
以上分别是 豆瓣、蔚来、Oppo社区、理想汽车 的 Tag 展示方案。
  • Tag 可以支持一个或者多个
开始抓包 分析接口
抓包神器：Charles
后面所贴出的 返回结果针对 Topic 部分JSON， 其他部分省略。

豆瓣

抓包神器：Charles
豆瓣列表 展示

    
    
    

 
     
     
     {
    "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": ""
}
核心信息：类型、跳转地址、名称、文字背景色、文字颜色、文字背景图片、图标，描述，文章发布数

蔚来

抓包神器：Charles
帖子列表

    
    
    

 
     
     
     {
    "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 数量，参与人数。

理想

抓包神器：Charles
帖子列表 （右）

    
    
    

 
     
     
     {
    "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 社区

抓包神器：Charles
帖子列表

    
    
    

 
     
     
     [{
    "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
可以看出大致的都差不多可能需要关注的几个点
  • 话题有热门非热门的区分
  • 话题具备类型
好了，这篇是抓包工具 Charles 应用的一篇教程，前端和后端的工程师肯定会用到这个工具，大家可以转发、点个在看，以后肯定能用到。
投稿作者：胡川港
知乎主页：www.zhihu.com/people/hu-chuan-gang-58

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

抓包神器：Charles


   
   
   

 
    
    
    

  
     
     
     

   
      
      
      Java后端交流群已成立
  
     
     
     

 
    
    
    


   
   
   


   
   
   

 
    
    
    

  
     
     
     

   
      
      
      公众号运营至今，离不开小伙伴们的支持。为了给小伙伴们提供一个互相交流的平台，特地开通了官方交流群。扫描下方二维码备注 进群 或者关注公众号 Java后端 后获取进群通道。
  
     
     
     

  
     
     
     
抓包神器：Charles

 
    
    
    


   
   
   

    
    
    

 
     
     
     

  
      
      
      

   
       
       
       

    
        
        
        
     
         
         
         

      
          
          
          推
      
          
          
          荐
      
          
          
          阅
      
          
          
          读 
     
         
         
         

     
         
         
         

      
          
          
          1. 张一鸣活捉上班摸鱼员工遭怒怼
     
         
         
         

     
         
         
         

      
          
          
          2. Spring MVC 过时了吗？
     
         
         
         

     
         
         
         

      
          
          
          3. 2W 字详解设计模式
     
         
         
         

     
         
         
         

      
          
          
          4. 连夜撸了一个简易聊天室
     
         
         
         

     
         
         
         

      
          
          
          5. 推荐一款 Java 对象映射神器
     
         
         
         

     
         
         
         

      
          
          
          抓包神器：Charles

本文分享自微信公众号 - Java后端（web_resource）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

版权声明：程序员胖胖胖虎阿 发表于 2023年9月3日 上午8:00。
转载请注明：抓包神器：Charles | 胖虎的工具箱-编程导航

相关文章

2W 字详解设计模式
程序员胖胖胖虎阿
280
Apache Doris 助力网易严选打造精细化运营 DMP 标签系统
程序员胖胖胖虎阿
191
Spring Boot + Vue 前后端分离，两种文件上传方式总结！
程序员胖胖胖虎阿
314
IDEA专业版永久激活码(IDEA2022.1破解图文教程,绝对有效)
程序员胖胖胖虎阿
314
windows/mac idea最新版破解图文教程(idea的2019破解码每日更新)
程序员胖胖胖虎阿
162
Java 开发必看的 5个 Github 开源项目
程序员胖胖胖虎阿
447

暂无评论

暂无评论...
致力于称为最好的程序员导航网站

友链申请 免责声明 关于我们

Copyright © 2022  胖虎的工具箱-编程导航   陇ICP备2022001249号