🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
Charles 断点调试篡改数据的神操作
我们也可以通过Charles
来轻松篡改HTTP
请求的参数
或者返回
的参数信息进行开发测试
比如类似于一些支付接口,涉及用户登陆权限的接口参数, 我们都可以通过这种手段来达到测试效果的目的!
我们就用一个简单的本地后端请求来试试Charles
是如何篡改的数据!
例如
http://localhost.charlesproxy.com/test4/test.php
这里我用一个本地的后端地址来做测试, 然后准备一个test.php
文件,其中的代码如下
代码
if (isset($_GET['data'])) {
if ($_GET['data'] == 'userlist') {
//返回的数据数组
$data = [
array('user' => '张三','password'=>123,'age'=>'18','company'=>'重庆市科技公司'),
array('user' => '李四','password'=>'abcd','age'=>'22','company'=>'北京市科技公司'),
array('user' => '王五','password'=>'abcd123456','age'=>'56','company'=>'深圳市科技公司'),
];
//把数组为JSON格式
$modifiedResponse = json_encode($data, JSON_UNESCAPED_UNICODE);
//输出修改后的JSON数据
echo $modifiedResponse;
}
} else {
echo 'Error 没有接受到任何参数!';
exit();
}
我们如果直接请求这个地址那么必然会返回: Error 没有接受到任何参数!
这个字符串!
现在我们打开Charles
然后在刷新一下请求, 在请求列表中找到我们要篡改数据的请求链接地址, 然后鼠标右键
勾选Breakpoints(断点)
如图
这个时候我们会发现工具栏的六边形按钮
就会变为红色的了!
如图
我们还可以对断点
进行详细设置,选择菜单栏中的proxy-->Breakoint Setting
,
如图
在弹出的断点设置
对话框中双击
想打断点的请求URL地址
,进行断点编辑
如图
Edit Breakpoint(编辑断点对话框)
设置选项参数解释如下表:
名称 | 描述 |
---|---|
Scheme | 进行断点的方法, 例如: GET/POST |
Protocol | 网络协议,一般选择HTTP 和HTTPS |
Host | 域名 或者IP地址 |
Query | URL地址栏?号 后面拼接的查询参数 |
Request | 可以让发送请求 的时候执行断点,并修改请求内容, 之后再把请求 代理发送到服务器 |
Response | 可以让响应 的时候执行断点,并修改请求内容,之后再把响应 结果代理发送到客户端 |
如果修改请求Request
数据,就把Request
勾选上,修改响应Response
数据,就将Response
勾选上,通常情况下默认都勾选上即可!
此时我们就可以在移动端
或者PC端
重新进行发送请求或者回车(Enter)
, 不出意外的话Charles
会自动进行拦截
并跳转到请求数据
修改的界面!
注意:如果没有自动
跳转到数据修改界面
的情况下,我建议每次添加了断点
之后,重启一下Charles
,就可以了!
如图
这里我们需要指定一个data=userlist
的地址栏查询参数, 所以点击Add
添加就可以了
参数添加好了之后就点击Execute(执行)
如图
此时此刻就是Charles
帮我们携带了一个data=userlist
的地址栏参数给我发送的请求了!
然后你就会看到返回的结果, 而重点就是在这里,我们目前是打了点断
对吧,那么此时此刻请求的结果还没有完完全全的回到客户端
,还被Charles
卡在这里,所以我们可以进行响应数据
的编辑修改!
我们可以编辑HTTP响应头、响应数据
等等… 我们选择Edit Response(编辑响应)
这里我选择的是JSON Text
, 然后就可以随意修改你从后端拿到的数据!
如图
修改完成之后,再点击Execute(执行)
返回
如图
这个时候,你就会发现从后端服务器返回过来的数据是被篡改过的了!
如图
同时在客户端的浏览器上显示的数据,也是被Charles
篡改过的了!
如图
怎么样操作是不是很简单,整个过程的大致原理如下图:
如图
其实跟之前我们使用过的Fiddler
基本上很类似,但是我个人偏向于使用Charles
, 操作更加便捷!
注意:
这里的断点功能
将网络请求
拦截并修改过程中,整个网络请求
的计时并不会暂停,那么如果我们停留时间太,就可能导致客户端请求超时的问题!
小结
打断点的意义就在意方便我们做各种各样的测试,
如果请求
打断点,目的就是为了看是否可以绕过前端限制,将修改过的参数传给服务端, 根据后端响应
的情况来判断问题!
如果响应
打断点, 目的通常就是把篡改
的服务端数据返回到前端,看看前端是不是有异常情况发生!
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看
的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇