Javascript Injection

[Ricardo-san]

*I will only cover form editing in this tutorial. Cookie editing is only useful for the more sophisticated attacks; I'll discuss that later.*

I. Introduction
Javascript Injection is the execution of various commands via your browser. Javascript commands are executed like so:

javascript:alert('Hello, World');

Inputting this line of code in your address box should result in a pop-up box saying "Hello, World".
Multiple commands can be run at once:

javascript:alert('First Command'); alert('Second Command');

II. Editing Forms
Editing forms via Javascript is useful for several reasons. For example, sometimes a website will check the referrer URL to downloading a page to your computer and editing is not an option. Firefox plugins such as Tamper Data and Firebug can do much the same, but there are greater possibilities using Javascript.
Let's say a website had the following HTML form:

<form action="http://www.example.com/changepassword.php" method="post">
<input type="hidden" name="to" value="admin@website.com">

Say this was the first form on the page. Using JS Injection, execute the following code to check the value:

javascript:alert(document.forms[0].to.value)

Forms are counted top to bottom starting from 0.
Using the void function, we are able to edit this value:

javascript:void(document.forms[0].to.value="myemail@kevin.com")

Note that any self-respecting developer would not leave this vulnerability, but who knows...
I'll end this tutorial with one more example (taken from a real online text-based MMORPG).

<script type="text/javascript" src="js/ajax-cas-slots.js"></script><center> 
<form name=slots onsubmit="rollem(); return false;"> 
<table border=0 cellpadding=3 cellspacing=1 width=300> 
<tr><th colspan=2> Welcome to the Slot Machine! </th></tr> 
<tr><th align=right> Gold: </th>    <td align=left><input type=box size=10 name=gold READONLY value=3975></td></tr> 
<tr><th align=right> Your bet: </th>    <td align=left><input type=box size=5 name=bet></td></tr> 
<tr><th><input type=submit value="Spin the slots"></th> 
<th><input type=button value="I am done for now" onclick="stopplay();"></th></tr> 
<!--<tr><th colspan=2> <input type=reset value="Start over"> </th></tr>--> 
<tr><td colspan=2><hr></td></tr> 
<tr><td colspan=2> 
<center> 
<table cellspacing=5 cellpadding=2 border=0><tr> 
<td><img src=images/casino/slot1.gif name=slot1></td> 
<td><img src=images/casino/slot2.gif name=slot2></td> 
<td><img src=images/casino/slot3.gif name=slot3></td> 
</tr></table> 
<input type=text readonly size=33 name=banner> 
</td></tr> 
<tr><td colspan=2><hr></td></tr> 
<tr><td colspan=2><center> 
<table width=100% border=0> 
<tr><th colspan=3><font size=+1>Payouts</th></tr> 
<tr><th> 3 of a kind </th>    <td align="center"> <img src=images/casino/slot1.gif> <img src=images/casino/slot1.gif> <img src=images/casino/slot1.gif> </td><th> 10x your bet </th></tr> 
<tr><th> A pair </th>    <td align="center"> <img src=images/casino/slot2.gif> <img src=images/casino/slot2.gif> <img src=images/casino/slot3.gif> </td><th> 2x your bet </th></tr> 
<tr><th> or </th>        <td align="center"> <img src=images/casino/slot0.gif> <img src=images/casino/slot4.gif> <img src=images/casino/slot4.gif> </td><th> 2x your bet </th></tr> 
<tr><th> or </th>        <td align="center"> <img src=images/casino/slot5.gif> <img src=images/casino/slot6.gif> <img src=images/casino/slot5.gif> </td><th> 2x your bet </th></tr> 
<tr><th> No match </th>    <td align="center"> <img src=images/casino/slot7.gif> <img src=images/casino/slot8.gif> <img src=images/casino/slot9.gif> </td><th> You lose </th></tr> 
</table> 
</td></tr> 
</table></center> 
</form> 
</center> 
<div id="emptybox"></div> 
<script> 
slotitem = new Array('0','1','2','3','4','5','6','7','8','9'); 
document.slots.bet.focus(); 
startgold=3975; 
document.slots.gold.value=startgold; 
function stopplay () { 
if (document.slots.gold.value < startgold)  
{alert("You lost "+ (startgold-document.slots.gold.value) +" gold pieces.   ");} 
else     {alert("You gained "+ (document.slots.gold.value-startgold) +" gold pieces.   ");} 
} 
function rollem () { 
if (document.slots.bet.value<1 || document.slots.bet.value == "" || document.slots.bet.value>10000) {alert("You cannot bet less that 1 or greater than 10,000.   "); return;} 
if (Math.floor(document.slots.gold.value) < Math.floor(document.slots.bet.value)) {alert("Your bet "+document.slots.bet.value+" is larger than your remaining gold "+document.slots.gold.value+".  "); return;} 
if (document.slots.bet.value>1) {document.slots.banner.value="Bet is "+document.slots.bet.value+" gold pieces";} 
else {document.slots.banner.value="Bet is "+document.slots.bet.value+" gold piece";} 
counter=0; 
spinem(); 
} 
function spinem() { 
turns1=10+Math.floor((Math.random() * 10)) 
for (a=0;a<turns1;a++) 
{document.slots.slot1.src="images/casino/slot"+slotitem[a % 9]+".gif"; } 
turns2=10+Math.floor((Math.random() * 10)) 
for (b=0;b<turns2;b++) 
{document.slots.slot2.src="images/casino/slot"+slotitem[b % 9]+".gif"; } 
turns3=10+Math.floor((Math.random() * 10)) 
for (c=0;c<turns3;c++) 
{document.slots.slot3.src="images/casino/slot"+slotitem[c % 9]+".gif"; } 
counter++; 
if (counter<25) {setTimeout("spinem(counter);",50);} else {checkmatch();} 
} 
function checkmatch()    {  
    if ((document.slots.slot1.src == document.slots.slot2.src) && (document.slots.slot1.src == document.slots.slot3.src)){ 
        document.slots.banner.value="3 of a kind - You won "+Math.floor(document.slots.bet.value*10)+" gold pieces"; 
        document.slots.gold.value=Math.floor(document.slots.gold.value)+Math.floor(document.slots.bet.value*10); 
        sendval('win',Math.floor(document.slots.bet.value*10));  
    } 
    else if ((document.slots.slot1.src == document.slots.slot2.src) || 
    (document.slots.slot1.src == document.slots.slot3.src) || 
    (document.slots.slot2.src == document.slots.slot3.src)){ 
        document.slots.banner.value="A pair - You won "+Math.floor(document.slots.bet.value*2)+" gold pieces"; 
        document.slots.gold.value = Math.floor(document.slots.bet.value*2) + Math.floor(document.slots.gold.value); 
        sendval('win',Math.floor(document.slots.bet.value*2)); 
    } 
    else { 
        document.slots.gold.value=document.slots.gold.value-document.slots.bet.value;  
        document.slots.banner.value="No match - You lost "+document.slots.bet.value+" gold pieces"; 
        sendval('lose',document.slots.bet.value); 
    } 
} 
</script>

Viewing this page from any browser will not allow you to change the value in the gold input field. However, with a simple bit of JS you can...

javascript:void(document.slots.gold.value = 9999999)

Bam.

III. The Solution
Validate all client data sent to the server. For the slot machine script above, simply changing the gold value to be stored on the server instead of the client browser would prevent that hack.
Hope you enjoyed this tut.

[John]

I tend to validate data on the client and server that way the user doesn't have to submit the forum to realize they did something wrong.

[Ricardo-san]

Yep, probably the best way to go. Javascript on the client side, PHP on the server side?

[Jordan]

Nice tutorial! +rep.

[Ricardo-san]

Thanks!

[alancomputer]

oh , that some funny you can do in IE or FF...hehe..nice thank

[amrosama]

nice tutorial
+rep

[BlaineSch]

Nice tutorial, could you not just use Firebug to edit the hidden values though?

[bill_]

Can javascript injection be done to a program that opens in a javascript window with the address bar hidden ?

[BlaineSch]

Well, depending on your browser you could probably unhide it. Or even try the "ctrl + l" which works on most browsers, I think you won't be able to see what your typing in FF though.