Introduction
Several native JavaScript functions or properties like .eval() and .innerHTML as well as several jQuery functions like .html() and .append() are considered as “unsafe”, but why? The reason is that they allow DOM manipulation using strings containing HTML code (e.g.”<b>This text is bold</b>“), which can lead to DOM Based Cross-Site Scripting vulnerabilities. To be more specific: The usage of such functions is not a problem as long as no user input is directly embedded in an “unsafe” way. jQuery can help us to safely manipulate the DOM without executing XSS in user defined inputs. But do not by mistake assume jQuery is safe per se, it only provides us some helper function to manipulate the DOM more safely.
The subsequent sections show the difference between safe and unsafe usage of JavaScript and jQuery functions in the following scenarios:
- Unsafe DOM manipulation using eval()
- Safe DOM manipulation using eval()
- Unsafe DOM manipulation using jQuery html()
- Safe DOM manipulation using jQuery html() and text()
Unsafe DOM manipulation using eval():
var txtField = "field1"; var txtUserInput = "'test@csnc.ch';alert(1);"; eval( "document.forms[0]." + txtField + ".value =" + txtUserInput );
The last double quote causes the user input to be treated as JavaScript. This results in the following JavaScript code being executed by eval():
document.forms[0].field1.value = 'test@csnc.ch';alert(1);
Therefore the user input is executed:
Safe DOM manipulation using eval():
var txtField = "field1"; var txtUserInput = "'test@csnc.ch';alert(1);"; eval( "document.forms[0]." + txtField + ".value = txtUserInput" );
The double quote at the end causes the user input NOT to be treated as JavaScript. This results in the following JavaScript code being executed by eval():
document.forms[0].field1.value = txtUserInput
Or in other words:
document.forms[0].field1.value = "'test@csnc.ch';alert(1);"
This results in the following HTML code:
<input type='text' id='field1' name='field1'
value="'test@csnc.ch';alert(1);" />
Therefore the user input is not executed:
However, this snippet shows again how small the difference is between safe and unsafe usage of eval():
"document.forms[0]." + txtField + ".value =" + txtUserInput "document.forms[0]." + txtField + ".value = txtUserInput"
Therefore it is recommended to completely ban this function from your JavaScript code.
Unsafe DOM manipulation using jQuery html():
var txtAlertMsg = "This is bold: ";
var txtUserInput = "test<script>alert(1)<\/script>";
$("#message").html(
txtAlertMsg +"<b>" + txtUserInput + "</b>"
);
Or in other words:
$("#message").html(
"This is bold: <b>test<script>alert(1)<\/script></b>"
);
This results in the following HTML code:
<div id='message'><b>test<script>alert(1)</script></b></div>
Therefore the user input is executed:
Safe DOM manipulation using jQuery html() and text():
var txtAlertMsg = "This is bold: ";
var txtUserInput = "test<script>alert(1)<\/script>";
$("#message").html(
txtAlertMsg +"<b><div id='userInput'></div></b>"
);
$("#userInput").text(
txtUserInput
);
Or in other words:
$("#userInput").text(
"test<script>alert(1)<\/script>"
);
This results in the following HTML code:
<div id='message'>This is bold: <b> <div id='userInput'>test<script>alert(1)</script></div> </b></div>
Therefore the user input is not executed:
Conclusion
- eval() is evil
- jQuery does not solve all your problems
- When using JavaScript or jQuery functions to manipulate your DOM you always need to know if your content may contain user input. If yes you must only use functions which encode HTML / JavaScript strings like jQuery text().
