抓包工具Fiddler的高级用法

2021-05-06|

1. 简单用法

Fiddler作为一个基于http协议的抓包工具,一直在业界有广泛使用。很多测试或者前端在使用Fiddler时,仅仅用于查看前端和服务端之间的请求信息。包括我作为一个Fiddler的重度使用者,除了简单抓包分析外,最多也只是使用它的Composer功能,用来构建一个POST或者GET请求。总的来说,一般使用Fildder一般是使用以下几个功能

  1. 抓包分析
  2. 通过配置代理,向移动端请求信息
  3. 使用Composer快速测试后端接口

然而功能强大且方便扩展的Fiddler远远不止这个简单的用法。

2. 高级用法--乱码处理

前端开发中,调用后端一个接口。接口能正常访问,就是中文出现乱码。

从图中左侧可以看到,不管是浏览器,还是在开发者工具中。后端返回的内容,都是乱码。并且乱码的内容还不同。从图中右侧,一般中文乱码的现象描述可以知道

  • 浏览器乱码原因推测是 以GBK的编码方式读取UTF8编码的中文
  • 开发者工具乱码原因推测是 以IOS8859-1的方式读取UTF8编码的中文

然而我后端接口代码刚好,只设置了响应内容是编码方式是UTF8,但并没有告诉浏览器。从显示结果来看,浏览器跟随系统默认编码猜测是GBK,而开发者工具默认编码猜测是IOS8859-1.为什么是猜测,因为,现在的chrome浏览器,实在找不到设置编码的地方,如果有知道的朋友,还麻烦留言告诉一下。

  //author:herbert 公众号:小院不小 Date:20210501 
 protected void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  String key = request.getParameter("key");
  String userName = request.getParameter("u");
  String password = request.getParameter("p");
  JSONObject user = findUserByNameAndPwd(userName, password);
  JSONObject ret = new JSONObject();
  if (user == null) {
   ret.put("errcode", 99);
   ret.put("errmsg", "未找到用户信息");
   response.setCharacterEncoding("utf8");// 正常设置应该是设置Content-type
   response.getWriter().print(ret.toJSONString());
   return;
  }
    .....
 }

由于后端代码没有加,但又必须马上解决。这个时候Fildder就派上用场了。

2.1 Fiddler断点

在Fiddler左下角,有一行黑色的输入框。官方称之为QuickExec.在这里可以输入一些命令。比如我们现在要修改响应内容,就需要命令 bpafter

在这里我们输入bpafter weixin-server/weixinbind 回车。然后会在状态栏看到这样一句话,RsponseURI breakpoint for weixin-server/weixinbind就表示启动成功了。这是我们在浏览器,重新访问这个链接,再回到Fildder会看到这样一个界面

在响应的页签中,我们选择raw页签,在Date下一样我们添加如下请求头Content-Type: text/html;charset=utf-8然后点击绿色的Run to Completion 按钮,回到浏览器。这时乱码就不在了

2.2 Fiddler规则

聪明细心地一定发现了,使用bpater针对每次请求都需要手动添加header信息。能不能通过程序自动添加呢?答案是肯定的。 在Fiddler菜单中,选择Rules->Customize Rules...,弹出Fiddler的脚本编辑器。在脚本的OnBeforeResponse方法中添加如下代码

 //author:herbert 公众号:小院不小 Date:20210501 
 ...
if (oSession.url.indexOf("weixinbind")>-1) {
oSession.oResponse.headers.Add("Customize","add by Script")  
oSession.oResponse.headers.Add("Content-Type","text/html;charset=utf-8")  
} 
 ...

保存后退出,然后在状态栏看到CustomRules.js was loaded at 时间就表示我们当前修改的脚本已经生效了。回到浏览器重新访问该地址

3. 高级用法--跨域处理

构建跨域环境,我们在本地80端口下,添加index.html文件。文件内容如下

<!--author:herbert 公众号:小院不小 Date:20210501 -->
<html lang="en">
<body>
   <p id="content"></p>
</body>

<script>
  window.onload = async function () {
     let resutData = await fetch("http://localhost:8080/weixin-server/weixinbind?u=1&p=2")
    let jsonData = await resutData.json();
    console.log(jsonData)
    document.querySelector("#content").textContent = JSON.stringify(jsonData)
  }
</script>
</html>

从代码中可以知道,访问了一个8080端口的GET请求。如果这个接口后端没有返回允许跨域标志,我们将请求不了数据。我们在浏览器会看到如下错误信息

这时,在后端不改代码的情况下,我们通过fiddler一样可以实现跨域请求。 在Fiddler菜单中,选择Rules->Customize Rules...,弹出Fiddler的脚本编辑器。在脚本的OnBeforeResponse方法中添加如下代码

 //author:herbert 公众号:小院不小 Date:20210501 
if(oSession.host== "localhost:8080"){
  oSession.oResponse.headers.Add("Customize","CROS add by Script");
  oSession.oResponse.headers.Add("Content-Type","application/json;charset=utf-8")  
  oSession.oResponse.headers.Add("Access-Control-Allow-Origin","*");
}

保存退出后,刷新页面你会发现数据已经请求成功了.

4. 高级用法--响应替换

修改线上内容,这个功能可想象的空间很大,可做的事情很多。为了说明他强大之处,我们依然上边的index.html说明。不过现在我们需要新建一个index2.html页面,具体内容如下

<!--author:herbert 公众号:小院不小 Date:20210501 -->
<html lang="en">
<body>
   <p id="content"></p>
</body>

<script>
  window.onload = async function () {
    alert("警告!!!您的代码被修改啦")
    let resutData = await fetch("http://localhost:8080/weixin-server/weixinbind?u=1&p=2")
    let jsonData = await resutData.json();
    console.log(jsonData)
    document.querySelector("#content").textContent = JSON.stringify(jsonData)
  }
</script>

</html>

这个文件仅仅是多加了一段代码alert("警告!!!您的代码被修改啦"),现在我们来实现访问index.html页面时,实际返回的index2.html的内容

在右侧找AutoResponse标签,点击添加规则,如下图设置

保存好以后,刷新刚才的index.html页面,你会看到如下结果

这里除了修改HTML页面外,还可以修改css js甚至ajax请求.这样可操作性就很多了,比如对别人的网站搞点小破坏啥的。特别是那些充分相信前端数据的网站,特别危险。 当然除了做响应替换外,还有其他很多命令,如用 *delay:1000实现延迟1秒响应,用于测试弱网环境

5. Fiddler4频繁弹出代理变化

在很长一段时间,一直使用Fiddler2,每次打开都提示我升级,每次我都拒绝了。可是最近一次我升级了,问题就


标签: 我们 Fiddler 请求 这个 乱码 使用 一个 代理 修改 html
出处: https://www.toutiao.com/a6958237633235403277/

推荐

文明发言,请先登录

文明上网理性发言,请遵守国家法律法规。

最新评论

©2003- 黑基网 黑名单存档手机版网站地图免责条款法律声明隐私保护