Programmatic POST Requests with JavaScript: A Functional Form Emulator - Getting the form’s (X)HTML markup: defining the “getFormCode()” function
(Page 3 of 5 )
As was clarified when I explained the basic logic of the program, first the script requests the file that contains the targeted form page, and gets its (X)HTML code, in order to obtain the required form data and emulate a genuine form submission.
The function responsible for getting the form code is defined as “getFormCode()”, and its definition is listed below:
// function getFormCode
function getFormCode(){
// create <div> container
var fdiv=document.createElement('div');
// append <div> container into document tree
document.body.appendChild(fdiv);
// get page code
var html=objhttp.responseText;
// insert form code into document tree
fdiv.innerHTML=html.substring(html.search(/<form\b/),html.search(/<\/form>/));
// hide form from being displayed
fdiv.style.display='none';
}
As you can see, the function is strongly dependent upon the successful server’s response, since it uses the “responseText” property that belongs to the XmlHttpRequest object to read the form page content. Essentially, this task is carried out through a rather tricky technique, based on the following steps:
- The page content is read through the “responseText” property.
- The function searches across the page content and extracts the (X)HTML markup code enclosed within the <form>...</form> tags.
- Once the form code is obtained, it’s appended to the document tree where the script itself is executing.
- Finally, the whole form code is hidden from view by using the “display: none;” CSS declaration.
Certainly, all of these steps are performed specifically as a simple method for reading form data as an automated process. Of course, they could be performed manually, but the script is capable of behaving a bit “smarter” by carrying out automatically all of these operations.
Let's get back to the function’s code. The line below reads the form page content:
// get page code
var html=objhttp.responseText;
Then, the (X)HTML markup code enclosed within the <form>...</form> tags is appended to the document tree, as listed below:
// insert form code into document tree
fdiv.innerHTML=html.substring(html.search(/<form\b/),html.search(/<\/form>/));
Finally, the form’s (X)HTML markup is hidden from view, by applying the following CSS declaration:
// hide form from being displayed
fdiv.style.display='none';
Although the above snippet is fairly easy to understand, you're probably wondering why the script is auto appending the form code to its own file. The answer is very clear. Appending the form code to the file that is running the script is an easy way to get the form’s action attribute and its field names. The process is equivalent to manually reading the content of the form page, then selecting the code within the <form>…</form> tags and appending it to the page where the script is executing.
The program implements the above described functionality as an automated task, since most attackers (probably) won’t spend a long time manually hacking a rather unimportant website. Anyway, manually-executed attacks shouldn’t be discarded at all.
Now that the script is capable of reading the (X)HTML markup code that belongs to the targeted form, it’s rather easy to obtain the value for its action attribute along with the field names. Therefore, let’s move on to the next section, where I will define the functions tasked with these operations.
Next: Getting form data: defining the “getFormAction()” and “getFormVariables()” functions >>
More JavaScript Articles
More By Alejandro Gervasio
/ 14 
