Fiddler advanced use
1. Simple usage
Fiddler, as a packet capture tool based on HTTP protocol, has been widely used in the industry. Many tests or front ends using Fiddler simply look at requests between the front end and the server. As a heavy user of Fiddler, I can only use its Composer function to build a POST or GET request in addition to simple packet capture analysis. Generally speaking, the following functions are generally used for Fildder
- Caught analysis
- You can configure the proxy to capture the request information from the mobile terminal
- Use Composer to quickly test the back-end interface
But Fiddler’s powerful and easily extensible Fiddler goes far beyond this simple use.
2. Advanced usage — garble processing
In front-end development, an interface is invoked at the back end. The interface can be accessed normally, but Chinese characters are garbled.
As you can see from the left side of the figure, both in the browser and in developer tools. The content returned from the back end is garbled. And the contents of the garbled code are different. From the right side of the figure, the phenomenon description of general Chinese garbled characters can be seen
- The cause of garbled browser is presumed to be the GBK encoding mode to read UTF8 encoding Chinese
- Developer tool garbled cause is presumed to be read in the mode of ios8859-1 UTF8 encoding Chinese
However, my back-end interface code just happened to set the response content to UTF8 encoding, but didn’t tell the browser. From the display result, the browser follows the system’s default encoding guess is GBK, and the developer tool’s default encoding guess is ios8859-1. Why is the guess, because, now chrome browser, really can not find the setting of coding place, if you know a friend, but also trouble to leave a message to tell.
// 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"."User information not found");
response.setCharacterEncoding("utf8");// The normal setting is content-type
response.getWriter().print(ret.toJSONString());
return; }... }Copy the code
Because the back-end code is not added, but must be resolved immediately. This is where Fildder comes in handy.
2.1 Fiddler breakpoint
In the lower left corner of Fiddler, there is a line of black input boxes. It’s officially called QuickExec. Here you can type some commands. For example, if we want to modify the response now, we need the command bpafter
Here we type bpAfter weixin-server/weixinbind enter. RsponseURI breakpoint for Weixin-server /weixinbind is a successful startup. This is what we saw in the browser, revisit the link, and then go back to Fildder and see this screen
In the response TAB, we select the RAW TAB. Under Date we add the following request header: content-Type: text/ HTML; Charset = UTF-8 Then click the green Run to Completion button to return to the browser. The garbled code is gone
2.2 Fiddler rules
You must have noticed that using bpater requires manually adding header information for every request. Can be added automatically by program? The answer is yes. From the Fiddler menu, select Rules->Customize Rules… Pop up Fiddler’s script editor. Add the following code to the OnBeforeResponse method of the script
// 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")}...Copy the code
Customrules.js was loaded in the status bar, indicating that the script we are currently modifying has taken effect. Go back to the browser and revisit the address
3. Advanced usage — cross-domain processing
To build a cross-domain environment, we add the index.html file to the local port 80. The file contents are as follows
<! -- Author: Herbert
<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 the code
As you can see from the code, a GET request accesses port 8080. If the interface back end does not return the allow cross – domain flag, we will not be able to request data. We will see the following error message in the browser
At this point, fiddler can make cross-domain requests without changing the code at the back end. From the Fiddler menu, select Rules->Customize Rules… Pop up Fiddler’s script editor. Add the following code to the OnBeforeResponse method of the script
// 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"."*");
}
Copy the code
After you save and exit, refresh the page to see that the data was requested successfully.
4. Advanced usage — Response substitution
Modify online content, this function can imagine a lot of space, can do a lot of things. To illustrate its power, we’ll use the index.html description above. But now we need to create a new index2.html page that looks like this
<! -- Author: Herbert
<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 the code
This file simply adds a code alert(” Alert!! Your code has been modified “), now let’s implement what is actually returned in index2.html when we visit the index. HTML page
Find the AutoResponse TAB on the right and click Add Rule as shown below
Once saved, refresh the index.html page and you will see the following results
In addition to modifying HTML pages, you can also modify CSS, JS, and even Ajax requests. This operability on a lot of, such as to other people’s website to do a little damage what. Sites that put a lot of faith in front-end data are especially at risk. Of course, in addition to response replacement, there are many other commands, such as *delay:1000 to achieve a delay of 1 second response, used to test the weak network environment
5. Fiddler4 frequently pops up proxy changes
I’ve been using Fiddler2 for a long time, and every time I opened it, I was prompted to upgrade, and every time I refused. But the last time I got an upgrade, there was a problem.
The system proxy was changed. Click to reeable eable eable message appears during packet capture. As long as this information appears, it can not be happy to capture the package. I learned from the official blog that there may be two reasons for changing the proxy service at most
- Firewall change agent
- VPN software change agent
So what’s the solution? Here are two things to try
5.1 Enabling the Agent Again
In the previous article, we used custom rules several times. Here we can also implement custom rules. Start by going to the script’s main method and registering an event inside
// Author: Herbert Date:20210502.static function Main(){
FiddlerObject.log("Register function DoReattach")
FiddlerApplication.oProxy.add_DetachedUnexpectedly(DoReattach);
var today: Date = new Date(a); FiddlerObject.StatusText =" CustomRules.js was loaded at: "+ today; }...Copy the code
Then add our registered method, DoReattach
// Author: Herbert 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 the function OnRetire")
FiddlerApplication.oProxy.remove_DetachedUnexpectedly(DoReattach);
}
Copy the code
This is done by starting a task to restart the agent when it detects that the agent is abnormally shut down. It’s basically doing the click for us
5.2 Address it at source
Careful and intelligent, you may find that the above method although solved the problem, but not perfect. Some requests may be lost. There is a 1 second delay in restarting the agent. If a request comes in at this time, the packet will not be caught. So, we need to start at the source
It is preferred to turn off the firewall if it is determined that it has been turned off but the problem has not been resolved. At this time you have to check whether you have recently installed VPN software. A lot of information on the Internet is software that lets us delete VPN. I do not agree with this way of killing the goose that lays the golden egg.
In fact, we just need to find vpN-related services and turn them off. Here we have to emphasize that it is not Ok to think that VPN does not run. In fact, after VPN software is installed, it will reside in the system and start up. We use Win +R to start the run window, enter service. MSC and press Enter to enter service management. Sort by state so that the running services are listed first. Then see if there is a VPN related text introduction. There is no search function here, which is more troublesome. I found two VPN related services on my computer
! [Dell]] (p9-juejin.byteimg.com/tos-cn-i-k3…).
Both of these VPN tools happen to be the ones I’ve used. If you stop these services and go back to the Fildder tool, the yellow alert will no longer appear.
Here come the eggs. Bonus tip
To find out which program modified the agent, we can use the ProcessMonitor tool. For example, if we need to know who changed our agent, we can add the following two filter implementations
Author: Herbert Date:20210502 Operation is RegSetValue Path is HKCU\Software\Microsoft\Windows\CurrentVersion\InternetSettings\ProxyEnable Path is HKCU\Software\Microsoft\Windows\CurrentVersion\Internet Settings\ProxyServerCopy the code
As shown in the figure below
After this filtering, return to the main screen and observe the corresponding results
As you can see from the results in the list, there are other programs besides Fiddler that are modifying the values corresponding to the registry ProxyEnable.
- 20:27:50 is the time when I started Fiddler. ProxyEnable changed from 1->0->1,ProxyServer remained 127.0.0.1:8888
- 20:28:09 ProxyEnable changes 1->0->1->0,ProxyServer stays at 127.0.0.1:8888
So, eventually ProxyEnable becomes 0, and the agent cannot be started. Click the last data with ProxyEnable 0 to view the details, as shown in the figure below
The process ID and stack information are the same when I compare ProxyEnable to 1. So I seriously suspect that this is a BUG with Fiddler4. Because of the same environment, running Fidder2 does not produce the above situation.
6. Summary
Fiddler is based on a plug-in development model that allows it to extend many functions. This tool at ordinary times oneself often use, a lot of time just catch a package to send a request. This time deep dig, the main development process chrome developer tools request Chinese appeared garbled. However, the back-end code is not allowed to change. So Fiddler got his attention. I’m not going to do any demo this time. I still hope you can support me a lot. Writing is not easy. If you feel that there is some interest, you scan the two-dimensional code below, pay attention to the public number [xiaoyuan No small], here is the technical place I record, always adhere to the original, always adhere to the accumulation of work. So I don’t post every day.