I'm testing xss attacks on my own code. The example beneath is a simple box where an user can type whatever he wants. After pressing test! button, JS will show the input string into two divs.This is an example I made to explain better my question:
<html>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script type=text/javascript>
function testIt(){
var input = document.getElementById('input-test').value;
var testHtml = document.getElementById('test-html');
var testInnerHTML = document.getElementById('test-innerHTML');
$(testHtml).html(input);
testInnerHTML.innerHTML = input;
}
</script>
<head>this is a test</head>
<body>
<input id=input-test type=text name=foo />
<input type=button onClick=testIt(); value=test!/>
<div id=test-html>
</div>
<div id=test-innerHTML>
</div>
</body>
if you try to copy it into a .html file and run it, it will work fine, but if you try to input <script>alert('xss')</script>, only one alert box will be thrown: the one inside `test-html' div (with html() function).
I really can't understand why this is happening, and also, inspecting the code with firebug gives me this result (after injecting the script)
<body>
this is a test
<input id=input-test type=text name=foo>
<input type=button value=test! onclick=testIt();>
<div id=test-html> </div>
<div id=test-innerHTML>
<script>
alert('xss')
</script>
</div>
</body>
as you can see test-html div is empty, and test-innerhtml div contans the script. Can someone tell me why? Is because html() is more secure against scripts injection or something similar?
Thanks in advance, best regards.
