本文主要介绍Fiddler工具常用的基本的抓包功能、修改请求参数、修改响应数据、重定向替换本地文件、重定向解决跨域、模拟请求等功能。
Fiddler基础知识
Fiddler是强大的抓包工具,可以将网络传输发送与接收的数据包进行截获、重发、编辑等操作,也可以用来检测流量。它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改。
代理就是在客户端和服务器之间设置一道关卡,客户端先将请求数据发送出去后,代理服务器会将数据包进行拦截,代理服务器再冒充客户端发送数据到服务器;同理,服务器将响应数据返回,代理服务器也会将数据拦截,再返回给客户端。
Fiddler可以抓取支持http代理的任意程序的数据包,如果要抓取https会话,要先安装证书。如下图步骤:
基本的抓包功能
PC端浏览器走的请求会直接被抓取,这里说明移动端的数据抓包设置。
1. 首先保证电脑与手机连接在同一个WiFi网络中(即构建局域网),并且保证二者在同一个ip网段内。
2. 打开电脑上的Fiddler,分别选中菜单栏`Tools - Options - Connections`,在该tab下的`Fiddler listens on port`填入 6666 端口,并将`Allow remote computers to connect`选中打钩,该步骤允许远程设备使用本机联网。
3. 重启Fiddler并在右上角Online中的找到无线局域网内分配到本机的ip,记住该ip。
4. 掏出手机连接同一wifi,对该wifi设置代理,代理ip就是上面记住的ip,端口就是上面写的6666。
完成以上步骤之后,手机上访问任一网页产生http请求的接口、数据都将被Fiddler拦截,如果没有拦截到可能IP设置有误,或没处同一局域网下,或开启Fiddler上允许远程接入6666端口访问网络。
如图所示的区域为数据包列表,要分析这些数据包,首先要了解各字段的含义。
#:顺序号,按照抓包的顺序从1递增
Result:HTTP状态码
Protocol:请求使用的协议,如HTTP/HTTPS/FTP等
HOST:请求地址的主机名或域名
URL:请求资源的位置
Body:请求大小
Caching:请求的缓存过期时间或者缓存控制值
Content-Type:请求响应的类型
Process:发送此请求的进程ID
Comments:备注
Custom:自定义值
每个Fiddler抓取到的数据包都会在该列表中展示,点击具体的一条数据包可以在右侧菜单点击Insepector查看详细内容。主要分为请求(即客户端发出的数据)和响应(服务器返回的数据)两部分。
修改请求参数
开发时可以通过拦截修改入参的方式调试接口,并且验证接口的安全性能。前端一切皆可修改,前端一切皆不安全。
1. 单击Fiddler底部控制台下第三个tab按钮,对,就是那个白色看不清的button,单击一次切换到拦截请求功能,再次单击切换到拦截响应功能,再次单击关闭拦截。也可以通过选中菜单`Rules - Automatic Breakpoints - Before Requests/After Responses/Disabled`,3种状态分别对应上面三种按钮点击。还可通过控制台输入`bpu + 拦截的url地址`针对性的对该url进行拦截,其他的url可以正常访问,消除断点直接在控制台输入bpu。
2. `ctrl+X`清空请求记录,之后调用需要拦截的请求,Fiddler将会闪烁提示,选中该条拦截记录,切换到Inspectors标签下的请求参数区域即可修改入参,修改完之后点击下边绿色按钮`Run to Completion`完成请求。
3. 查询数据库或调用相关接口,保存成功的参数结果将与浏览器直接发送的参数不同。
修改响应数据
开发联调接口时可能后台返回的数据为空或者结构想变动,前端可以通过修改响应数据进行按需调整,方便快捷有效。
1. 第一步与上面修改请求参数一致,只是切换的状态为拦截响应功能。查看返回结果切换到Textview栏,这便是接口返回的数据信息,现在你可以尝试把它改成你想要的结果。
2. `ctrl+X`清空请求记录,之后调用需要拦截的请求,Fiddler将会闪烁提示,选中该条拦截记录,切换到Inspectors标签下的响应参数区域即可修改响应参数,修改完之后点击下边绿色按钮`Run to Completion`完成响应。注意,这里其实也可以选择本地文件替换响应体内容,与下面介绍的重定向替换本地文件类似。
3. 浏览器打开F12查看请求响应body体已经替换为修改之后的内容。
重定向替换本地文件
开发测试环境下一切功能正常,但上线之后就出问题了,这时候如何定位bug问题,比较方便的方式就是找到可能出现问题的脚本或样式文件进行修改或替换。当然,直接通过谷歌浏览器的sources模块也可找到源文件进行修改,但只允许修改js、css等文件。
1. `ctrl+X`清空请求记录,之后调用需要重定向的请求。
2. 切换至AutoResponder标签页,将上面的请求记录拖至该标签页区域内,并分别打钩`Enable rules`及`Unmatched requests passthrough`,表示遵循默认规则,且如果请求与规则匹配不上,继续完成该请求过程。
3. AutoResponder标签页的区域中选中该条请求,在下边的Rule Editor选择需要替换的文件,可以选将线上的文件保存到本地做修改后替换,也可以直接重定向到新的url路径,点击save保存,再次调用请求即生效。
重定向解决跨域
该功能与重定向替换本地文件类似,只是自动响应的时候不是替换新文件,而且重新定向到新的路径,相当于代理转发,且可以通过正则匹配需要代理转发的请求,功能与nginx类似。
模拟请求(即接口测试)
右侧切换至Composer标签,选择需要的请求方式及url,选择http协议版本,分别填入请求头部信息与请求参数,或者选择上传文件流,之后点击发送即可模拟一次请求。该功能与postman一样。
Tips:
在使用Fiddler 提交post表单的时候, 要加上code:Content-Type: application/x-www-form-urlencoded 意思为: 窗体数据被编码为名称/值对, 就是一个key=>value
还有另外几种有:
multipart/form-data: 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分
text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符
form的enctype属性为编码方式,通常我们接触的有两种 : application/x-www-form-urlencoded和multipart/form-data,默认为application /x-www-form-urlencoded。
为get提交时,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串append到url后面,用?分割,加载这个新的url。
为post提交时,浏览器把form数据封装到http body中,然后发送到server。 如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上 Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件 name)等信息,并加上分割符(boundary)。