前言: 是否接口对接的时候找不到文档?是否看到有趣的网站数据想抓取却无从下手?其实作为开发人员,无论前端还是后端,抓包应该都是一项必须掌握的技能,了解请求发起到结束的过程,熟悉接口对接应该注意的问题,出现问题的时候不乱丢锅!
抓包所需工具:
- Charles (版本随意,软件收费,请支持正版)
- Chrome浏览器
- Android设备一台
- iOS设备一台(没有也不影响,具体操作都是类似的)
- Windows/MacOS/Linux
- 注: 本文基于Windows10,Charles4.0.2，如果发现按照教程步骤配置后依旧无法抓包，请重启Charles和电脑，或者尝试重新安装Charles再走一次流程.
</br> - 注2:由于Charles使用的是正向代理模式,开启抓包后会导致部分网站无法访问,同时开启Charles后会导致Shadowsocks的代理失效,需重启Shadowsocks代理.
1、安装Charles
- 没什么好说的,一直下一步直到结束安装.打开Charles
1 - 1、电脑安装证书
安装证书
i导入证书
选择证书存放地点
确定后关闭对话框
1 - 2、(如果是Windows用户请注意该步骤,Mac用户可忽略)打开控制面板-系统和安全-防火墙
- 由于本文是基于Windows10,但是Windows10会因为防火墙设置导致出现无法抓取Https的情况,所以需要进行如下配置
图1-1
1 - 3、选择入站规则
图1-2
1 - 4、将Charles开头的规则都设置为允许
图1-3
2、打开Charles,选择Proxy-ProxtSettings
图2-1
2 - 1、设置端口号,默认为8888,可以根据需要进行修改,勾选Enable transport HTTP proxying(该操作可以让Charles抓取Http数据)
图2-2
3、选择Proxy -> SSL Proxying Settings
图3-1
3 - 1、新增一个监听端口和主机地址（因为我们要捕获所有的Https请求，所以Hosts填*，也因为Https的默认端口号为443.所以Port也填写443），点OK关闭弹窗，
图3-2
至此,我们已经可以对浏览器进行抓包分析,那么如何操作呢?
4、打开浏览器，输入https://500px.com/editors (不要急着按回车,先把Charles打开,同时工具栏的第二个按钮红灯亮着,证明正在进行http请求的拦截,这是按下回车,等待网站加载完成,加载完成后可以点击红色按钮关闭拦截,就不会一直有数据干扰分析)
(PS:这里以500px的网站为例,因为数据比较多,而且都是以json的形式交互,比较好分析)
图4-1
4 - 1、卧槽?打开之后一堆地址,我怎么知道哪个是我需要的?
图4-2
4 - 2、别着急,观察请求的地址,会发现其实只有几个与我们的需要的有关.（老司机一看就知道api.500px.com就是我们最终要的数据接口了,因为我们关心的是数据，而不是网页，所以我们的目标就非常明确，这里不展开讲如何找到我们需要的接口地址,自己实践几次就知道了）
图4-3
4 -1 、展开https://api.500px.com 的标签,可以看到详细的请求信息,可以看到发起的是GET请求,同时数据格式为application/json,那么我们需要的数据在哪里呢?
图4-4
4 - 2 、将右边的tab切换到Contents,同时底部的tab切换到JSON或者JSON Text,就会看到我们请求地址后的数据,之后就可以分析请求的地址和请求的参数,不打开网页就能调取接口干坏事了
图4-5
4 - 3、那么如何干坏事呢？选中刚刚有数据的地址，点击工具栏的笔形状的按钮，就会根据选中的请求地址，创建一个新的请求任务。
图4-6
图4-7
4 - 4、我们修改一下rpp和page的值，记得点击拦截的按钮重新拦截请求，修改好和打开拦截后，点击 excute 按钮,稍等片刻
图4-8
4 - 5、我们编辑请求重新得到的数据就出来了，是不是感觉自己棒棒哒？其实Charles还有很多实用的功能，就需要各位在使用中继续发现了（例如mock Api，将网易新闻的数据拦截后重新发送，让客户端看到的数据不一样，又如拦截登录请求，添加自己想要的信息干点坏事？）
图4-9
说完浏览器，该轮到我们的手机了，其实原理是一样的，只不过我们需要为手机添加一个远程的代理，让手机的所有请求都先通过Charles进行拦截捕获，
5 - 1、给Android手机或者iOS设备安装安全认证证书,保证设备与电脑连接的是同一个网络.(如同一个Wifi,或者电脑开热点给手机连接),
图5-1
图5-2
5 - 2、注意图中的 192.168.1992.232:9797 这个地址，打开手机的Wifi连接界面，找到连接中的Wifi（必须和电脑在同一个局域网中），选择高级设置，将代理服务器选择手动输入，填入刚刚Charles弹窗的地址和端口号（每个人的地址可能都会因为路由器的网关设置导致不一样，具体参数请根据弹窗显示正确填写），保存
Android设置
iOS设置
5 - 3输入后稍等几秒Charles应该会有一个弹窗,注意选择Allow
5 - 4、打开手机浏览器,输入chls.pro/ssl,回车(每个浏览器的反应会不一样,Android的Chrome浏览器会直接下载证书,然后提示安装,Android中的证书名随意输入,建议输入为Charles,iPhone用safari打开会直接弹出安装描述文件),安装后会有相应的成功提示,Android弹出一个Toast,iOS会提示描述文件已验证
Android安装证书
iOS安装证书
iOS已验证
5 - 5、这个时候就可以愉快的玩耍啦，打开了京东App，开启Charles的拦截，轻而易举的就知道了京东的主机地址和接口参数。教程到此就结束了，如果有问题欢迎留言
京东部分商品信息
网友评论