How to modify a request in Fiddler

fiddlerhttp-posthttp-post-varspost

I'm looking for a simple way to intercept a web request and modify the contents of the request (mainly POSTs) using Fiddler.

This is to test server-side validation.

I have to use Fiddler, however I haven't found a good simple way to do so.

There have been several documented ways to write scripts to intercept traffic and change headers, but I would like to do it without writing a script – this tool needs to be used by the testers and writing/modifying scripts all the time by different testers may be annoying.

Example:

Simple POST with 2 parameters:

field1=foo, 
field2=bar

I would like to intercept the request, modify the value of field2 to be something like bañ (note the ñ, in my case is invalid and that is what I want to test).

Best Answer

Ok, posting the answer that I put together from piecing it together from the following youtube video:

Tampering Client Requests and Server Responses with Fiddler

Start fiddler (I'm using Fiddler 4)
You will notice that it intercepts all traffic through all browsers and other applications
Set a filter - this will enable you to view only the data you are interested in
1. On the right hand side, click on the filters tab
2. Check 'Use Filters'
3. On Hosts, use 'Show only the following Hosts'
4. In the text box below that, put the host you are testing for. In our case for the test environment, put the following: testing.internalsite.com;
5. In the section called 'Breakpoints', check 'Break request on POST'
Intercept the request
1. In your browser, navigate to the page which you are testing. In our case, it is the welcome page where we will be doing our testing of the server-side validation: https://testing.internalsite.com/yourapp/welcome.do
2. Clear all the existing logged requests by hitting the 'X' in the tool ribbon and choosing 'Remove all'.
3. In your browser, put the data into the form you are interested in testing and hit submit. This is valid data (passes client side validation) which you will be changing with fiddler.
4. In Fiddler, you will see the request with the red icon. Click on the request to load the details on the right side.
5. On the Inspectors tab, followed by the WebForms tab, you can modify the parameters of the form which was submitted. Change the data as appropriate for the test.
6. Hit the 'Run to completion' button
Validate that your response is correct - usually some sort of error message if you are testing the server-side validations

Related Solutions

What’s the difference between a POST and a PUT HTTP REQUEST

HTTP PUT:

PUT puts a file or resource at a specific URI, and exactly at that URI. If there's already a file or resource at that URI, PUT replaces that file or resource. If there is no file or resource there, PUT creates one. PUT is idempotent, but paradoxically PUT responses are not cacheable.

HTTP 1.1 RFC location for PUT

HTTP POST:

POST sends data to a specific URI and expects the resource at that URI to handle the request. The web server at this point can determine what to do with the data in the context of the specified resource. The POST method is not idempotent, however POST responses are cacheable so long as the server sets the appropriate Cache-Control and Expires headers.

The official HTTP RFC specifies POST to be:

Annotation of existing resources;
Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles;
Providing a block of data, such as the result of submitting a form, to a data-handling process;
Extending a database through an append operation.

HTTP 1.1 RFC location for POST

Difference between POST and PUT:

The RFC itself explains the core difference:

The fundamental difference between the POST and PUT requests is reflected in the different meaning of the Request-URI. The URI in a POST request identifies the resource that will handle the enclosed entity. That resource might be a data-accepting process, a gateway to some other protocol, or a separate entity that accepts annotations. In contrast, the URI in a PUT request identifies the entity enclosed with the request -- the user agent knows what URI is intended and the server MUST NOT attempt to apply the request to some other resource. If the server desires that the request be applied to a different URI, it MUST send a 301 (Moved Permanently) response; the user agent MAY then make its own decision regarding whether or not to redirect the request.

Additionally, and a bit more concisely, RFC 7231 Section 4.3.4 PUT states (emphasis added),

4.3.4. PUT

The PUT method requests that the state of the target resource be created or replaced with the state defined by the representation enclosed in the request message payload.

Using the right method, unrelated aside:

One benefit of REST ROA vs SOAP is that when using HTTP REST ROA, it encourages the proper usage of the HTTP verbs/methods. So for example you would only use PUT when you want to create a resource at that exact location. And you would never use GET to create or modify a resource.

JavaScript post request like a form submit

Dynamically create `<input>`s in a form and submit it

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Example:

post('/contact/', {name: 'Johnny Bravo'});

EDIT: Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot. So I added the hasOwnProperty check to fix any inadvertent bugs.

Best Answer

Related Solutions

What’s the difference between a POST and a PUT HTTP REQUEST

JavaScript post request like a form submit

Dynamically create <input>s in a form and submit it

Related Topic

Dynamically create `<input>`s in a form and submit it