1. 从“看”到“改”Charles抓包工具的进阶玩法如果你已经会用Charles抓取网络请求看着一串串HTTP/HTTPS请求和响应在眼前流过那么恭喜你你已经迈入了网络调试和问题排查的门槛。但Charles的魅力远不止于此它真正的“魔法”在于“拦截”与“修改”。想象一下你不再是一个被动的观察者而是一个可以介入对话的导演——你可以随时喊“卡”修改演员客户端或服务器的台词请求/响应数据然后观察剧情应用行为会如何发展。这不仅仅是调试更是功能测试、安全测试、性能分析和逆向学习的利器。今天我们就来深入聊聊如何用Charles实现精准拦截和内容修改把这款工具从“望远镜”变成“手术刀”。2. 核心原理Charles如何成为中间人在动手之前理解Charles的工作原理至关重要这能帮你避开很多坑。Charles本质上是一个“中间人代理”Man-in-the-Middle Proxy。当你的设备电脑或手机配置Charles为代理后所有的网络流量特定应用的都会先经过Charles再由Charles转发给目标服务器反之亦然。关键点在于HTTPS的解密普通的HTTP流量是明文的Charles可以直接查看。但HTTPS流量是加密的为了能查看和修改其内容Charles需要扮演一个“受信任的中间人”。这个过程分为几步安装Charles根证书你在设备上安装的Charles根证书相当于你给了Charles一个“万能钥匙”允许它为自己签发针对任何域名的“假”证书。SSL代理当客户端如浏览器发起一个到https://example.com的请求时请求先到Charles。证书欺骗Charles会动态生成一个证书其签发者是你的Charles根证书但证书的主体是example.com。Charles将这个证书发给客户端。客户端信任由于你的设备信任了Charles根证书因此它也信任这张“假”的example.com证书。客户端会基于这张证书与Charles建立加密连接。Charles与服务器通信与此同时Charles再以真实客户端的身份与真实的example.com服务器建立另一个HTTPS连接。解密与中转至此Charles拥有了两端客户端-Charles Charles-服务器的加密密钥。它可以解密从客户端收到的数据查看或修改后再用与服务器的加密通道发送出去反之亦然。注意正因为这个机制Charles在调试某些严格进行证书绑定Certificate Pinning的应用时可能会失败因为这类应用只信任它预设的特定证书不信任系统根证书库里的Charles证书。这是安全特性并非Charles的bug。理解了这一点你就明白为什么抓HTTPS包必须先装证书也就能理解后续操作中一些奇怪问题的根源。3. 环境准备与基础配置搭建你的调试舞台工欲善其事必先利其器。在开始拦截修改之前确保你的Charles处于最佳工作状态。3.1 Charles的安装与基础代理设置首先从Charles官网下载对应你操作系统Windows/macOS的版本。安装过程很简单一路下一步即可。安装完成后启动Charles会请求为你创建系统代理设置同意即可。这样你的电脑浏览器流量默认就会经过Charles。验证代理是否生效打开Charles然后用浏览器访问任意HTTP网站如http://httpbin.org/get。你应该能在Charles左侧的“Structure”或“Sequence”视图中看到捕获到的请求。如果看到的是乱码或SSL代理错误说明HTTPS抓包还没配置好。3.2 安装根证书获取“信任”这是抓取和修改HTTPS流量的前提。电脑端安装在Charles中点击菜单栏的Help-SSL Proxying-Install Charles Root Certificate。这会将证书安装到系统的钥匙串或证书存储区。安装后务必手动信任该证书。以macOS为例打开“钥匙串访问”找到“登录”或“系统”钥匙串中的“Charles Proxy CA…”证书双击打开在“信任”部分将“使用此证书时”设置为“始终信任”。手机端安装以iOS为例确保手机和电脑在同一Wi-Fi网络。在Charles中点击Help-SSL Proxying-Install Charles Root Certificate on a Mobile Device or Remote Browser会弹出提示告诉你手机需要配置的代理服务器地址通常是电脑的IP和8888端口以及一个网址chls.pro/ssl。在手机的Wi-Fi设置中配置HTTP代理为手动填入电脑IP和端口8888。然后用手机Safari浏览器访问chls.pro/ssl会弹出描述文件安装提示安装即可。安装后还需要到手机的设置-通用-关于本机-证书信任设置中找到并完全信任Charles的根证书。3.3 启用SSL代理指定要解密的域名安装了证书只是让系统信任Charles你还需要告诉Charles对哪些域名进行SSL代理即解密。在Charles中右键点击你想要抓取的HTTPS请求的域名选择Enable SSL Proxying。或者更通用的方法是点击菜单Proxy-SSL Proxying Settings...在弹出窗口的“SSL Proxying”标签页点击“Add”在“Host”里可以填写具体的域名如*.example.com或者直接填*和端口443来代理所有HTTPS流量初期调试可以这样但后期建议细化避免流量杂乱。完成以上三步你的Charles就已经具备了拦截和查看绝大多数HTTP/HTTPS请求的能力。接下来才是重头戏。4. 精准拦截Breakpoint功能详解Breakpoint断点是Charles实现请求/响应修改的核心功能。它允许你在指定的请求发出前或响应返回前暂停网络交互让你有机会查看和编辑数据。4.1 如何设置一个断点简单设置在Charles左侧的请求列表Structure视图中找到你想要拦截的特定请求URL右键点击选择Breakpoints。这样这个请求的请求和响应都会被拦截。高级设置通过Proxy-Breakpoint Settings...进行更精细的控制。在这里你可以添加/编辑断点规则可以基于主机名Host、路径Path、方法Method甚至请求头内容来设置匹配规则。例如你可以设置拦截所有POST方法到/api/user/login的请求。选择拦截阶段可以只拦截“请求”Request只拦截“响应”Response或者两者都拦截。4.2 拦截与编辑实战修改登录请求假设我们想测试一个登录接口在不同密码下的行为。设置断点在Breakpoint Settings中添加一条规则主机填你的API域名路径填/login方法选POST并勾选“Request”。触发请求在App或网页中执行登录操作。请求被拦截Charles的界面会弹出一个新窗口标题是“Breakpoint - Edit Request”。此时整个网络请求被暂停。编辑请求编辑JSON Body如果请求体是JSON格式切换到“Text”或“JSON Text”视图取决于Charles版本你可以直接修改JSON字符串。例如将{username: test, password: 123456}中的密码改为wrongpassword。编辑表单参数如果请求是application/x-www-form-urlencoded格式可以在“Form”标签页直接修改键值对。编辑请求头在“Headers”标签页你可以添加、删除或修改任何请求头。这在测试鉴权逻辑如修改Token、模拟不同设备或浏览器时非常有用。执行修改编辑完成后点击窗口底部的“Execute”按钮。Charles会将你修改后的请求发送给服务器。拦截响应可选如果你也勾选了拦截“Response”那么在服务器返回响应后Charles会再次弹出“Breakpoint - Edit Response”窗口。你可以在这里修改服务器返回的数据比如将登录成功的{code: 200, token: abc}改为登录失败的{code: 401, msg: 密码错误}然后点击“Execute”将修改后的响应返回给客户端。这样你就能在客户端看到修改后的效果。4.3 Breakpoint使用的注意事项与心得性能影响断点会阻塞网络请求直到你点击“Execute”或“Abort”。在调试页面加载或连续操作时频繁的断点会让人感觉应用“卡死”。记得调试完成后及时在请求上右键取消Breakpoints或在Breakpoint Settings中禁用/删除规则。“Abort”按钮的作用如果你点击“Abort”Charles会终止这个请求模拟一个网络请求失败的场景。这对测试客户端的网络错误处理逻辑很有帮助。结合Sequence视图在拦截和修改时结合“Sequence”时序视图可以更清楚地看到请求/响应的顺序和依赖关系尤其适合调试一连串的API调用。小心修改二进制数据对于非文本格式如图片、文件流的请求/响应体Breakpoint的编辑功能有限直接修改可能破坏数据格式。Breakpoint功能强大但属于“手动挡”需要你主动触发请求并手动编辑。接下来要介绍的两个功能则更像是“自动挡”或“脚本”可以实现更自动化的修改。5. 自动化修改Map Local与Rewrite当你需要对某些请求进行固定的、重复的修改时每次都设断点太麻烦。Charles提供了Map Local和Rewrite两种自动化工具。5.1 Map Local将线上请求映射到本地文件这个功能允许你将某个特定的网络请求重定向到你本地电脑上的一个文件。服务器根本不会收到这个请求客户端拿到的是你本地文件的内容。典型场景替换线上资源将正在开发的本地新版JS/CSS文件映射到生产环境的URL上进行测试。Mock API接口后端接口还没开发完前端需要联调。你可以让某个API请求直接返回你事先写好的JSON文件。测试异常数据创建一个包含错误数据结构的JSON文件测试前端容错能力。配置步骤准备好你的本地文件如mock_data.json。在Charles中选中目标请求右键选择Map Local...。在弹出的设置窗口中Charles会自动填充匹配的协议、主机和路径。你只需要点击“Choose...”选择本地的文件路径。勾选“Enable Map Local”并确认。之后所有匹配该规则的请求都会直接返回你本地文件的内容。在Charles的请求列表中这些请求的响应状态码旁会有一个房子图标。Map Local的坑与解决方案 你提供的热词中提到了“charles maplocal 报cors”这是一个非常常见的问题。当你将一个API请求Map Local到一个本地文件时这个请求的“源”Origin可能还是原来的网页域名而“返回资源”的路径是file://协议这违反了浏览器的同源策略CORS导致请求失败。解决办法在Map Local设置中修改响应头在Map Local的设置窗口有一个“Advanced…”选项。点击后你可以添加或覆盖响应头。最有效的就是添加CORS头Access-Control-Allow-Origin: *或指定具体域名。这样浏览器就会允许这次跨域请求。使用Charles的Rewrite功能添加CORS头见下一节这是一个更全局的解决方案。关闭浏览器的CORS安全检查仅限开发环境这是一种暴力的临时方案例如在启动Chrome时加上--disable-web-security参数但不推荐因为它会降低浏览器的安全性。5.2 Rewrite强大的请求响应重写引擎Rewrite是Charles中最灵活、最强大的功能之一。它允许你基于规则自动地查找并替换请求或响应中的任何部分——包括URL、头部、状态码、正文内容。与Breakpoint和Map Local的区别Breakpoint手动、一次性、可交互式编辑。Map Local自动、整体替换为本地文件。Rewrite自动、基于规则的部分查找替换无需准备完整文件。配置Rewrite规则 点击Tools-Rewrite打开设置窗口。你需要创建一个“Rewrite Set”并启用它然后在里面添加具体的规则。一个规则包含几个关键部分Location规则应用的范围。你可以按“Host”、“Path”、“URL”等来匹配请求。Type你要修改什么是请求Request还是响应Response是修改头部Header、主体Body还是URLMatch匹配条件。一个正则表达式用于定位你要修改的具体文本。例如匹配JSON中的某个字段值。Replace替换内容。你要将它替换成什么。实战案例1修改响应体中的某个字段值假设一个用户信息接口返回{name: Alice, vip: false}你想测试前端在vip为true时的UI表现。在Rewrite设置中添加一个新规则。Location匹配该API的URL。Type选择Response Body。Match填写正则表达式vip:\s*false注意转义和空格。Replace填写vip: true。保存并启用规则。之后所有匹配的请求其响应体中的vip字段都会被自动改为true无需手动干预。实战案例2为所有响应添加CORS头解决Map Local的CORS问题添加规则Location可以设置得宽泛一些如匹配所有主机*。Type选择Response Headers。在“Add”标签页设置Header名为Access-Control-Allow-Origin值为*。这样所有经过Charles的响应都会带上这个头完美解决本地映射时的跨域问题。Rewrite使用心得正则表达式是关键Rewrite的威力很大程度上取决于你写正则表达式的能力。Charles支持标准的正则语法对于修改JSON、HTML片段非常有效。规则顺序规则按顺序执行后面的规则可能基于前面规则修改后的结果继续操作。调试规则复杂的规则可能出错。建议先在“Match”框里用简单的文本测试确保能匹配到目标再逐步完善为正则。可以打开Charles的“Viewer”窗口查看经过Rewrite处理前后的原始数据对比。6. 高级场景与疑难排坑掌握了基本操作后我们来看看一些更复杂的场景和常见问题的解决方法。6.1 处理乱码charles乱码你提供的热词中有“charles乱码”这通常出现在响应体显示为乱码时原因和解决方案如下字符集不匹配服务器返回的响应头Content-Type可能没有指定字符集如charsetutf-8或者指定了错误的字符集。Charles在解码时使用了错误的编码。解决在Charles中可以尝试手动指定编码。在请求的“Response”标签页右键点击文本区域选择“Text Encoding”然后尝试不同的编码如UTF-8、GBK、GB2312等看哪个能正确显示。响应被压缩服务器返回了Gzip或Deflate压缩的内容但Charles没有自动解压显示。解决确保Charles的Proxy-Enable GZIP Compression选项是勾选的这并不影响抓包只是控制Charles是否在转发时压缩。对于查看Charles通常会自动解压。如果还是乱码可以尝试在请求上右键选择“Response Body” - “Save Response…”将原始内容保存到文件然后用支持二进制查看的编辑器打开看看文件头是否有1F 8BGzip标志。二进制内容如果响应本来就是图片、视频、加密数据流等二进制内容在文本视图下显示自然是乱码。这是正常的你应该切换到“Hex”或“Image”视图查看。6.2 手机抓包的特殊问题证书已安装但仍不受信任热词中提到“charles抓包已下载证书但是不受信任”。在iOS上即使安装了描述文件也必须在设置-通用-关于本机-证书信任设置里面对Charles的根证书启用完全信任。在Android高版本7.0上系统不再信任用户安装的CA证书除非将证书安装到系统证书区这通常需要Root权限。对于非Root手机可以尝试让App信任用户证书如果App支持或者使用像VirtualXposed这样的沙盒环境。App无法联网配置代理后有些App尤其是金融类、强安全要求的会检测到系统代理并拒绝发送请求。这类App通常使用了证书绑定或代理检测。对于开发调试可以尝试使用调试版本或者让开发同学临时关闭这些检测。鸿蒙手机抓包基本流程与Android类似。关键在于正确安装Charles证书。可以在手机浏览器访问chls.pro/ssl下载然后在系统设置中搜索“证书”或“凭据存储”进行安装和信任。6.3 弱网测试charles弱网测试Charles的弱网模拟功能非常实用可以在Proxy-Throttle Settings...中开启。带宽Bandwidth限制上行/下行速度模拟2G/3G/4G网络。利用率Utilisation可以理解为带宽的稳定性百分比越低越不稳定。往返时间Round-trip time增加网络延迟。MTU和可靠性可以模拟数据包丢失和损坏。使用心得弱网测试最好配合断点或Rewrite使用。例如模拟一个慢速网络然后在某个关键请求上设置断点并长时间不执行可以测试客户端的请求超时、加载状态、重试机制是否健全。6.4 组织与过滤会话当会话很多时找到目标请求变得困难。善用Focus和Filter功能。Focus聚焦在Structure视图中右键点击某个主机或路径选择“Focus”。之后视图将只显示与聚焦项相关的会话其他会话会被隐藏但并未删除。这对于专注于调试某个特定域名或API组非常有用。Filter过滤在顶部过滤栏输入关键词可以实时过滤出包含该关键词的请求URL、头部等。可以使用星号*通配符。从被动抓包查看到主动拦截修改Charles提供的这套工具链极大地扩展了开发、测试和运维人员的能力边界。无论是前端开发者Mock数据、测试工程师构造异常场景、安全人员分析流量还是运维人员排查线上问题熟练运用Breakpoint、Map Local和Rewrite都能让你事半功倍。记住所有的修改都只在你的调试环境中生效不会影响线上真实用户。放心地去尝试、去“破坏”、去验证你的想法这正是本地调试环境存在的最大意义。最后一个小建议复杂的Rewrite规则和Map Local映射记得通过Tools-Import/Export Settings功能进行导出备份换电脑或重装时能快速恢复你的调试环境。