Fiddler advanced usage

_ Yang Hanbo 2021-05-03 20:51:36
fiddler advanced usage


Fiddler Advanced usage

1. It is easy to use

Fiddler As a basis for http Protocol capture tool , Has been widely used in the industry . A lot of tests or front ends are in use Fiddler when , It is only used to view the request information between the front end and the server . Including me as a Fiddler Heavy users of , In addition to simple packet analysis , At most, it's just used Composer function , To build a POST perhaps GET request . in general , In general use Fildder Generally, the following functions are used

  1. Caught analysis
  2. By configuring agents , Grasp the mobile request information
  3. Use Composer Quickly test the back-end interface

However, powerful and easy to expand Fiddler It's much more than this simple usage .

2. Advanced usage -- Jumble handling

In front end development , Call an interface on the back end . The interface can be accessed normally , It's just that Chinese is garbled .

 The statement

You can see from the left side of the picture that , Whether it's a browser , Or in developer tools . What the back end returns , Is the code . And the content of the garbled code is different . From the right side of the picture , General Chinese garbled phenomenon description can know

  • The reason of browser garbled is With GBK Read by encoding UTF8 Encoded Chinese
  • The developer tools are garbled. The reason is With IOS8859-1 Read by UTF8 Encoded Chinese

However, my back-end interface code just , Only the response content is set and the encoding method is UTF8, But it didn't tell the browser . From the display results , The browser follows the system's default encoding guess is GBK, And the developer tool's default encoding guess is IOS8859-1. Why guess , because , current chrome browser , I really can't find a place to set the encoding , If you have a friend who knows , Please leave a message .

 //author:herbert official account : The courtyard is not small 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", " No user information found ");
response.setCharacterEncoding("utf8");// Normal settings should be settings Content-type
response.getWriter().print(ret.toJSONString());
return;
}
.....
}
 Copy code 

Because the back-end code doesn't add , But it must be solved immediately . This is the time Fildder That comes in handy .

2.1 Fiddler The breakpoint

stay Fiddler The lower left corner , There's a line of black input boxes . Officially called QuickExec. You can enter some commands here . For example, we are now going to modify the response content , You need orders bpafter

bpafer

Here we type bpafter weixin-server/weixinbind enter . Then you will see this sentence in the status bar ,RsponseURI breakpoint for weixin-server/weixinbind It means that the startup is successful . Here we are in the browser , Revisit this link , Back to Fildder You'll see an interface like this

bpafterdebug

In the response tab , We choose raw Tab , stay Date Next, we add the following request header Content-Type: text/html;charset=utf-8 Then click on the green Run to Completion Button , Back to browser . At this time, the random code is no longer there

rightCharset

2.2 Fiddler The rules

Smart and careful must have found , Use bpater You need to add it manually for each request header Information . Can it be automatically added through the program ? The answer is yes . stay Fiddler The menu , choice Rules->Customize Rules..., eject Fiddler Script editor for . In the script OnBeforeResponse Add the following code to the method

 //author:herbert official account : The courtyard is not small 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")  
}
...
 Copy code 

Exit after saving , Then you can see it in the status bar CustomRules.js was loaded at Time It means that our current modified script has taken effect . Go back to the browser and visit again

rightCharsetByScript

3. Advanced usage -- Cross domain processing

Building a cross domain environment , We're here 80 Under port , add to index.html file . The contents of the document are as follows

<!--author:herbert official account : The courtyard is not small 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>
 Copy code 

You can know from the code that , I visited a 8080 Port of GET request . If the back end of the interface does not return the cross domain allowed flag , We will not be able to request data . We will see the following error message in the browser

cros

At this time , Without changing the code at the back end , We go through fiddler Cross domain requests can also be implemented . stay Fiddler The menu , choice Rules->Customize Rules..., eject Fiddler Script editor for . In the script OnBeforeResponse Add the following code to the method

 //author:herbert official account : The courtyard is not small 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","*");
}
 Copy code 

Save after exit , Refresh the page and you will find that the data request has been successful .

corsSuccess

4. Advanced usage -- Response replacement

Modify online content , This function has a lot of room to imagine , There are many things to do . To illustrate his strength , We're still up there index.html explain . But now we need to build a new one index2.html page , The details are as follows

<!--author:herbert official account : The courtyard is not small Date:20210501 -->
<html lang="en">
<body>
<p id="content"></p>
</body>
<script>
window.onload = async function () {
alert(" Warning !!! Your code has been modified ")
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>
 Copy code 

This file just adds one more piece of code alert(" Warning !!! Your code has been modified "), Now let's implement access index.html When the page is , Actually returned index2.html The content of

Find... On the right AutoResponse label , Click add rule , As shown in the following figure

autoresponse

After preservation , Refresh just now index.html page , You'll see the following

autoresponsesuccess

Except for modification HTML Off page , You can also modify css js even to the extent that ajax request . So it's much more operational , For example, do some small damage to other people's websites . Especially those websites that fully believe in front-end data , Especially dangerous . Of course, in addition to response replacement , There are many other orders , If used *delay:1000 Implementation delay 1 Second response , Used to test the weak network environment

5. Fiddler4 Frequent pop-up agent changes

For a long time , Always use Fiddler2, Every time I open it, it prompts me to upgrade , Every time I refuse . But the last time I upgraded , The problem arises .

proxyChanged

A yellow prompt message appears in the process of catching bags The system proxy was changed. click to reeable capturing. As soon as this message appears , You can't have fun . Later, I learned from the official blog that there are at most two reasons for changing the proxy service

  • Firewall changes proxy
  • VPN Software change agent

So how to solve it ? Here are two ways to try

5.1 Re enable the agent

In the previous section , We used custom rules many times . Here we can also use custom rules to achieve . First, find the script main Method , Register an event in it

// author:herbert official account : The courtyard is not small Date:20210502
...
static function Main(){
FiddlerObject.log(" Register function DoReattach")
FiddlerApplication.oProxy.add_DetachedUnexpectedly(DoReattach);
var today: Date = new Date();
FiddlerObject.StatusText = " CustomRules.js was loaded at: " + today;
}
....
 Copy code 

Then add our registration method DoReattach

// author:herbert official account : The courtyard is not small Date:20210502
static function DoReattach(o: Object, ea: EventArgs){
FiddlerObject.log("DoReattach")
ScheduledTasks.ScheduleWork("reattach", 1000, innerReattach);
}
static function innerReattach(){
FiddlerObject.log("innerReattach")
FiddlerApplication.UI.actAttachProxy();
}
static function OnRetire(){
FiddlerObject.log(" Execute function OnRetire")
FiddlerApplication.oProxy.remove_DetachedUnexpectedly(DoReattach);
}
 Copy code 

This is mainly through the detection of agent abnormal shutdown , Start a mission , Restart the agent . It's equivalent to the program helping us complete the click operation

5.2 From the source

Careful and smart you , Maybe I found out again , Although the above method has solved the problem , But it's not perfect . Some requests will be lost . Because there's a delay here 1 Seconds to restart the agent . If there is a request in this period of time , I'm sure I can't get this bag . therefore , We need to start from the source

Turn off the firewall first , If you're sure it's closed , But the problem has not been solved . At this time, you have to check whether you have installed vpn The software . A lot of information on the Internet , Let's delete them vpn Software for , I don't agree with this way of killing the chicken for its eggs .

We just need to find vpn Related services , Then turn it off . I have to stress that Don't think vpn It's not running Ok, Actually Vpn After the software is installed , Will host services on the system , And start up . We use win+R Start the run window , Input service.msc enter , Enter service management . Sort by status , Put running services at the top . Then one by one to see if there is VPN Related text introduction . There's no search function here , More trouble . I found two on my computer vpn Related services

SangforCSClient

![Dell]](p9-juejin.byteimg.com/tos-cn-i-k3…)

these two items. vpn Tools , It happens to be all I used . Choose to stop these services , Back to Fildder Tools , There's no more yellow warning .

Here comes the egg . With a little knowledge

Find out which program modified the proxy , We can use ProcessMonitor Tools . For example, we need to know who modified our agent , You can add the following two filter implementations

author:herbert official account : The courtyard is not small Date:20210502
Operation is RegSetValue
Path is HKCU\Software\Microsoft\Windows\CurrentVersion\InternetSettings\ProxyEnable
Path is HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ProxyServer
 Copy code 

As shown in the figure below

processMonitorFilter

After this screening , Back to the main interface , Observe the corresponding results

processMonitorList

From the results in the list we can see that , except Fiddler There are other programs modifying the registry ProxyEnable Corresponding value .

  • 20:27:50 This time period , I started it Fiddler The result is .ProxyEnable change 1->0->1,ProxyServer Maintain for 127.0.0.1:8888
  • 20:28:09 This time period , yes Fidder The yellow warning box appears ProxyEnable change 1->0->1->0,ProxyServer Maintain for 127.0.0.1:8888

therefore , Final ProxyEnable become 0 了 , You can't start the agent . Click on the last one ProxyEnable by 0 The data of , View details , Here's the picture

processMonitorDetail

I compare ProxyEnable by 1 The data of , Whether it's process id Or stack information , It's all the same . So I seriously doubt it , This is a Fiddler4 One of the BUG. Because of the same environment , function Fidder2 It's not going to be like that .

6. summary

Fiddler This software is based on plug-in development mode , It can expand a lot of functions . This tool is usually used by myself , Most of the time, it's just a request . This time I dug deep , It's mainly the development process chrome The Chinese requested by the developer tool is garbled . However, I have no authority to modify the back-end code . So it moved Fiddler The mind of the . I don't want to put anything this time demo 了 . I hope you can support me a lot , Writing is not easy to . If you think it's still interesting , You scan the QR code below , Official account [ The courtyard is not small ], This is where I recorded the technology , Always insist on originality , Persistence is accumulated by work . So not every day .

 official account

版权声明
本文为[_ Yang Hanbo]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503204933117N.html

  1. Analysis of MVC
  2. [middle stage] please stay and join me in the backstage
  3. Understanding front end garbage collection
  4. [continuous update] front end special style implementation
  5. Flutter product analysis and package reduction scheme
  6. XPath positioning
  7. 前端开发css中的flex布局的使用
  8. The use of flex layout in front end development CSS
  9. JQuery核心函数和静态方法
  10. JQuery core functions and static methods
  11. Node family - understanding of blocking and non blocking
  12. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  13. Vue source code analysis (2) initproxy initialization proxy
  14. What's TM called react diff
  15. Summary of common front end data structure
  16. Useeffect in hooks
  17. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  18. Front end notes: virtual Dom and diff of vue2. X
  19. The best code scanning plug-in of flutter
  20. The simplest plug-in for rights management of flutter
  21. 21. Object oriented foundation "problems and solutions of object traversal"
  22. Discussion on hot micro front end: Google AdWords is a real micro front end
  23. Usecallback and usememo for real performance optimization
  24. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  25. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  26. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  27. Transaction of spring's reactive / imperative relational database
  28. The implementation of hexagonal hexagonal reactjs Janos pasztor
  29. HTTP状态码:402 Payment Required需要付款 - mozilla
  30. HTTP status code: 402 payment required - Mozilla
  31. Factory mode, constructor mode and prototype mode
  32. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  33. Cocos Quick Start Guide
  34. Comparison of three default configurations of webpack5 modes
  35. A case study of the combination of flutter WebView and Vue
  36. CSS: BFC and IFC
  37. A common error report and solution in Vue combat
  38. JS: this point
  39. JS: prototype chain
  40. JavaScript series -- promise, generator, async and await
  41. JS: event flow
  42. Front end performance optimization: rearrangement and redrawing
  43. JS - deep and shallow copy
  44. JavaScript异步编程3——Promise的链式使用
  45. JavaScript asynchronous programming 3 -- chain use of promise
  46. Vue.js组件的使用
  47. The use of vue.js component
  48. How to judge whether a linked list has links
  49. Element UI custom theme configuration
  50. Text image parallax effect HTML + CSS + JS
  51. Spring的nohttp宣言:消灭http://
  52. Vue3 intermediate guide - composition API
  53. Analysis of URL
  54. These 10 widgets that every developer must know
  55. Spring's nohttp Manifesto: eliminate http://
  56. Learn more about JS prototypes
  57. Refer to await to JS to write an await error handling
  58. A short article will directly let you understand what the event loop mechanism is
  59. Vue3 uses mitt for component communication
  60. Characteristics and thinking of ES6 symbol