html() vs innerHTML jquery/javascript & XSS attacks

by

Contrary to what is being said in the accepted answer, jQuery.html() and the many jQuery functions which accept HTML strings as arguments are more prone to DOM-based XSS injection than innerHTML, as noticed by the OP.

jQuery.html() extracts the <script> tags, updates the DOM and evaluates the code embedded in the script tags.

As a result, XSS can happen without user interaction even after the DOM is loaded when using jQuery.html().

This is very easy to demonstrate.

This will call alert():

$('.xss').html('<script>alert("XSS");</script\>');

http://jsfiddle.net/2TpHC/

While this will not:

var d = document.getElementById('xss');
d.innerHTML = '<script\>alert("XSS");</script\>';

http://jsfiddle.net/Tjspu/

Unfortunately, there are many other code paths (sinks) which lead to calling eval() in jQuery. The security conscious will probably avoid jQuery altogether, as far as possible.

Note that I do not claim that using innerHTML is an effective defense against XSS. It is not. Passing unescaped data to innerHTML is not safe, as pointed out by @daghan. One should always properly escape data when generating HTML.

More Related Contents:

  1. Java script on focus instead of onclick
  2. How do you get the cursor position in a textarea?
  3. Disable spaces in Input, AND allow back arrow?
  4. How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]
  5. How to force browser to show image 3 inches wide?
  6. HTML Form Submit pass array to PHP [closed]
  7. Stop form refreshing page on submit
  8. How can I select an element by name with jQuery?
  9. jQuery disable/enable submit button
  10. TypeError: p.easing[this.easing] is not a function
  11. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  12. How to get the containing form of an input?
  13. JavaScript – head, body or jQuery?
  14. How to reset the bootstrap modal when it gets closed and open it fresh again?
  15. How do I use jQuery’s form.serialize but exclude empty fields
  16. Simulate drop file event
  17. Jquery .show() not revealing a div with visibility of hidden
  18. How to detect a click inside of an iframe (cross-domain)? Aka prevent click fraud
  19. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  20. How to change only text node in element [duplicate]
  21. How do you limit options selected in a html select box?
  22. get parent.location.url – iframe – from child to parent
  23. How can I get access to a Highcharts chart through a DOM-Container?
  24. make readonly/disable tinymce textarea
  25. Chrome Extension “Refused to load the script because it violates the following Content Security Policy directive”
  26. Placeholder for contenteditable div
  27. Center an Image vertically and horizontally using CSS
  28. Change background on button click, using CSS only? [duplicate]
  29. Set value to currency in
  30. How to replace the entire html webpage with ajax response?

Leave a Comment