首页/文章/react native

Mac 使用Charles进行手机https抓包

2024-08-22
17036 分钟
...

前言

  • 还不知道怎么用手机连内网地址进行测试?

  • 还不知道怎么用Charles抓手机HTTPS的包?

  • 希望下面会对你有些帮助。

操作指南

操作环境:

  • 电脑系统:Mac OS
  • 手机系统:iOS 12及以上/Android
  • Charles版本:V4.5.6

第一步:安装Charles证书到Mac

1.启动Charles,选择Help-->SSL Proxying→Install Charles Root Certificate

image.png

2、此时会启动“钥匙串访问”APP,并找到刚开安装好的证书,证书名字:Charles Proxy CA,找不到的可以搜索框搜下。

image.png

3、选中该证书,点击显示简介。

image.png

4、更改证书信任权限。更改为始终信任,并关闭窗口输入密码保存。

image.png

5、移动复制该证书到“系统”里面。此时电脑端的证书就配置完毕了!

image.png

6、设置HTTPS端口抓包,点击Charles-->Proxy-->SSL Proxying Settings,出现如下弹窗,点击"Enable SSL Proxying",点击“Add”

image.png

7、按照图中输入,点击保存。至此,电脑端配置已全部完成!

image.png

第二步:安装Charles证书到手机

前提:

​ 1、首先查看电脑IP地址,点击Charles-->Help→Local IP Address

image.png

2、手机必须和电脑在同一个Wi-Fi下。

iPhone证书安装:

1、iPhone,Wi-Fi设置代理。步骤:设置→WIFI -->点击Wi-Fi旁边的i

IMG_4102.PNG

2、划到底部,点击配置代理

IMG_4103.PNG

3、配置代理,IP就是你电脑的IP,端口输入8888,点击存储

IMG_4104.PNG

4、然后打开Safari浏览器,访问:chls.pro/ssl,此时电脑上连接提示,点击allow允许。

image.png

5、此时手机会提示下载描述文件,点击允许

IMG_4105.PNG

6、保存后,点击 设置-->通用→描述文件,安装刚下载好的文件

IMG_4107.PNG

7、安装完成后,点击 设置-->通用→关于本机,下拉到底部,点击证书 信任设置,把刚信任开关打开。

IMG_4109.PNG

8、大功告成,此时你就可以愉快的抓HTTPS的包了。以及访问公司内网。

Android证书安装:

以小米手机为例。

1、设置Wi-Fi代理。设置→WI-FI→代理设置,IP就是你电脑的IP,端口输入8888,保存

image.png

2、使用Chrome浏览器访问"chls.pro/ssl"(注意:一定要使用Chrome浏览器,安卓国产浏览器会将证书视为下载文件,不能直接安装),此时电脑上连接提示,点击allow允许。

4、下载证书并安装(需要提前设置好手机锁屏密码),见下图,输入名称,点击确认就可以了。

5、大功告成!此时你就可以愉快的抓HTTPS的包了。以及访问公司内网。

备注:

有的手机app是不允许抓包的,具体实现原理大概两种:

1、app框架可以检测代理,如果你是用代理端口访问,则拒绝连接。

2、手机内置HTTPS证书做了双端校验。具体原理感兴趣可以Google下

------------------------------------------------------------------------

安卓手机安装charles证书(华为手机)

1、charles

2、手机设置代理

3、证书下载,charles保存到电脑上

4、下载的证书格式改成crt

5、电脑的证书发送到手机qq上

6、打开手机qq,安装证书

charles证书过期,删除证书后,点击install charles证书,未弹出安装证书信息

Charles

问题:charles证书过期,删除证书后,点击install charles证书,未弹出安装证书信息

解决方案:

先reset一下,再同上图操作安装即可

 

————————————————

原文链接:https://blog.csdn.net/lqy729416873/article/details/121574919

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
react native2024-09-10
使用Expo开发App解决消息推送问题(iOS,Android)
在上篇文章中,我们基于expo搭建了App的基础框架。在现代移动应用中,消息推送功能是提升用户体验的重要组成部分。本文将指导你如何在Expo环境中实现消息推送的功能,包含iOS与Android,以帮助你的用户及时接收到重要信息。 什么是Expo? Expo是一个开源平台,可帮助开发者轻松构建和部署React Native应用。它提供了许多工具和服务,简化了应用开发流程,尤其是在处理消息推送方面。 准备工作 在开始之前,确保你已经完成如下...
学习
react native2024-08-22
MacOS下抓取APP的数据包
已于 2024 05 31 16:56:15 修改 于 2024 05 31 16:32:42 首次发布 版权声明:本文为博主原创文章,遵循 版权协议,转载请附上原文出处链接和本声明。 1\. 准备工具 Charles:一款网络抓包工具,它支持HTTP和 的监控。您可以使用Charles来查看应用程序发送和接收的所有数据。 :Proxifier是一个代理软件,方便给没有设置代理的APP设置代理。 Charles 可以直接在 下载安装,可...
学习
react native2024-08-19
React Native 版本升级从0.72到0.75
前言 从2023年6月22日React Native官方发布0.72.0至今,一年多的时间React Native官方已经陆续发布了0.73、0.74、0.75三个版本,故决定对公司项目做版本升级,以获得更好的性能和稳定性。 我们先看下这三个版本,带来了哪些新功能、新特性: React Native 0.73 新的调试器 :增加了新的调试器,弃用旧版flipper调试工具,让调试过程更加高效顺畅。 稳定的符号链接支持: 简化您的开发工作...
学习
react native2024-07-09
Universal Persisted Storage for React Native Expo + Next.js SSR — Herdi Tr.
The world of web development is marked by constant innovation, and developers are always on the lookout for tools and libraries that can simplify their workflows and make cross platform development more efficient. In thi...
学习
react native2024-05-08
用expo开发react native实在是太爽了
expo出来已经有一段时间了,发现相关的文章还是比较少的。如果你在开发react native,那么我推荐你赶快使用expo来开发把! 一、零配置开发,降低开发者的心智负担。如果你之前开发过react native,那么你肯定会遇到要配置java,sdk等一大堆东西,并且版本还要对应上,否则开发不了。甚至说新手也会被这些东西劝退。使用expo后,无需配置这些开发环境,像开发web一样流畅的开发react native。 二、实时真机调试...
学习
AI2026-09-01
Deep Agents 01:何为 Agent Harness,以及如何开始
1、本篇任务:完成一份多步骤、带证据的技术调研 普通客服 Agent 的问题短、工具少、输出即时。技术调研或编码任务会持续很久,产生计划、搜索结果、文件和中间结论。Deep Agents 在 LangChain/LangGraph 之上预装规划、虚拟文件系统、上下文压缩和子 Agent,适合这类开放任务。 本课让 Agent 比较两种向量数据库,并交付一份可验证报告。 2、什么时候需要 Deep Agent 满足以下两项以上再考虑:任务...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录