Fiddler extensions — context menu actions
In a previous article, I wrote about Fiddler and how we can write extensions for it using C#. In this article, I want to show another part of Fiddler that we can improve using an extension: the context menu.
Here is a quick recap:
In today’s world, everything is online and connected to the web — HTTP is king. Most of our development depends on sending or receiving HTTP requests, which means we need a tool to help us interact with HTTP requests. This is when Fiddler comes into play. While Fiddler is very feature-rich, it cannot cover every foreseeable use case out of the box, so we use extensions to add custom functionality for our specific needs.
Before we begin, I would recommend that you will read the previous article and maybe clone the example code for it, as this article will be based on that example.
Building an extension
Before we dive into the technical details, let’s talk about the scenario that we need an extension for:
Let's assume that we’re an API-first company, and we’ve just released a new endpoint to do something awesome. Out of the blue, a customer calls and complains that the API call returns an error, and we need to figure out why. For us to see what the customer is doing we ask them to use Fiddler when making the call and then send us a recording of the network traffic so we can see the call. When we get the recording, we realize that while having the recording is nice, having an executable code to recreate it would be nicer. That would give us a way to change some parameters and see what happens or add this call as a test to make sure that this issue will not reappear in the future.
To do this we need a way to convert a HTTP request to C# code.
Writing a Fiddler extension can be broken into 3 parts:
- Create an extension library and interface with Fiddler.
- Write your custom code.
- Inject the extension to Fiddler.
Steps 1 and 3 are covered in the previous article, so we will not repeat them here and will only cover the custom code part.
Write your custom code
If you followed the instructions in the previous article or cloned the git repo, you should have a class library project with a reference to Fiddler.exe and a reference to System.Windows.Forms and a file that implements IAutoTamper. In my git repo this is FiddlerPrimer.cs.
Add CodeCreatorForm
First, we need a form to display the code that is created from a single request.
To add a new UI form we need to right-click the project in the solution explorer and click on Add, then New Item. In the new items dialog select the Forms (Windows Forms) option and enter the name CodeCreatorForm.cs. To finish click on the Add button.
Now open the form in the design mode and add a button and a rich text box.
Rename the button to btnCopyToClipBoard, and set the text to Copy to Clipboard. Then double click on the button from the designer to create an on-click event method.
Rename the rich text box to rtbCode and set Multiline to True. It’s advisable to increase its size.
The code above is the code part of the form.
The form constructor is straightforward: we get a Session (a single HTTP request) from outside and if it is not NULL we pass it to a private method to handle it.
btnCopyToClipBoard_Click is the method that handles the click event on the “copy to clipboard” button. It takes the text from the rich text box and copies it to the clipboard.
CapitalizeFirstLetter is a private method that does just that (“get” to “Get”).
CreateRequest is the method that converts the request to C# code.
It creates an empty string and adds C# code as text while embedding data from the session.
For example, this code:
Will give us the following C# code:
(Keep in mind that C# code is just text until it is compiled)
The rest of the CreateRequest method adds the request headers, query string, and body params to the request, then creates an instance of HttpClient and uses it to send the request.
Create code for a single request
To open this form for a single request we need to add an action that does this on the Fiddler context menu. This is done in the file that implements the IAutoTamper (FiddlerPrimer.cs in this example).
Add the following code to the bottom of the file.
This code will add an action that works on a single session to a menu (Fiddler allows us to select one or more sessions).
Now go to the OnLoad method and add the following code to the bottom of the method:
This code will create a new menu item named “Code Creator”, and add an inner menu item to it named “C#”. The action that opens the codeCreatorForm will be bound to the “C#” menu item. The reason we use an internal menu item for “C#” is in case we’ll need to create code in other languages in the future. With this approach, we can add additional items similar to the C# one we created here.
Finally, we can add the new menu item codeCreatorMenu to Fiddler’s main context menu and set the index to 0 so it will be on top.
If you used the existing git repo you are all done. If you’re starting a new project, you need to inject the extension to Fiddler, read the Inject the Extension to Fiddler part of the previous article to see how this is done.
Now you only need to rebuild the extension to copy the DLL files to Fiddler, and the next time that you run Fiddler you will see a new option in the context button.
Clicking on the “C#” button will open the codeCreatorForm and create the session as code.
Clicking on the Copy to Clipboard button will copy the code to the clipboard, and then you can paste it to C# IDE and run the code.
If you need an action that can work on several sessions at once, you can use the following code to add a menu item that works on an array of sessions and create a form or method that gets an array of sessions.
You can also use this:
This code will allow you to select several sessions and see if all have the Authorization header.
You can get the code for this example here: https://github.com/payoneer/FiddlerExtensionPrimer/tree/feature/context-menu
Conclusion
This scenario shows how versatile and extensible Fiddler can be. We can add hooks to most of its UI elements and execute a lot of use-case specific custom code to help us with any scenario that we may need.
Fiddler extensions have many other useful applications. You can draw inspiration from some of the interesting extensions found here: https://www.fiddlerbook.com/Fiddler2/extensions.asp
