As described in another article, you can use Client side html injection techniques basically for two reasons:
- cheat on your friends
- send variables
In this example we will send some vars to a php page predisposed in order to show all POST vars, then we will apply this technique to the ebay homepage to apply a filter to the search form.
So, first of all let’s create a php page that shows all posts, code follows
<?php print_r($_POST); ?>
Let’s save this as echo.php in your webserver or in your local pc testing environment. Create another file, html one this time let’s call it form.html and paste in the following code:
<html> <head> </head> <body> <h1>Client side HTML injection playground</h1> <h2>Use this page as described in the tutorial</h2> <hr /> <form action="echo.php" method="POST"> <input type="text" name="text_one" /> <input type="submit" value="Send" /> </form> </body> </html>
Upload or copy these two new files in a convenient location within your webserver documents, and type the complete address URL of form.html like “http://yoursite.com/test/form.html”; You should see something like this:
Just give it a try to test if it works as expected or if there are common syntax errors, or something else is not working) . So type “hello” in the text field and just click “Send” and see what happens, if all works as expected you will see the value of the submitted form text field. like this:
Now, we need Mozilla Firefox AND Firebug installed. If you haven’t done yet, use these link to get there quickly: Firefox (opens in a new window) Firebug (opens in a new window) Fine, now go back to the form page and rightclick on the textfield and select “Check Element with Firebug” from the context menu (or similar i have an italian version now). Then Firebug will open up and it will add some panels to the bottom part of your browsers, highlighting the element on wich your mouse point where on when you rightclicked. The following image shows the window at this point, check it.
Now you have to right click on the selected and highlghted element and select “Edit HTML” from the context menu like the following image:
A sort of small text editor will appear in place of the html panel and it will contain the code of the element you selected, like this:
Here we will add a short HTML tag code in order to add a variable to the original form (suppose you don’t have control over the html of the form page). This tag could be for example:
just type it righ after the original content of the mini text editor within firebug, like follows
You will see changes in the page as you write the code, so go straight to the end, don’t worry if it doesn’t look as expected until you finish typing.
You should see your new injected var printed together with the original one, like follows
This is a clientside html injection.
Now let’s apply it in the real world, this short footage will show you how to use it, for example, with ebay search form without leaving the homepage, gaining time.
Incoming search terms:
- psquiza o feihebuger (10)