Adding Escaped HTML to DOM

Question

I am learning about XSS and am in the process of trying to understand why escaped HTML added to the DOM is triggering XSS vulnerability.

The application will draw a modal overlay for a form (bootstrap) and add in HTML (both escaped and unescaped) to that portion of the DOM document. It gets the data from a request to the server which auto-escapes any user input that has HTML in it. Below is the code that is causing the vulnerability.

$('.update_button').live('click',function(){ $('#name').modal() var id=$(this).attr('data-id'); $('#form_holder').hide() $('#form_holder_loading').show() $.ajax({ url:'/some/path/', data:'id='+id, dataType:'json', success:function(data){ // data is an HTML string with HTML entered by the user encoded // such that any HTML characters are replaced with their entity // e.g. '<' becomes '&lt;' $('#user_form_holder_loading').hide() $('#user_form_holder').empty().html(data.form) $('#user_form_holder').show() } }); }); 

Answer 1

jQuery's .html() is dangerous. It parses and evaluates content using eval(), which is frowned upon. html() actually finds <script>tags and executes them, on purpose! Normally when adding such tags as a string they fall into place silently as benign content w/o execution.

If you would use the construct elm.innerHTML=str; instead of $(elm).html(str), the "smart" content processing jQuery performs would be omitted and the resulting dom would be same, minus the vulnerabilities. You still need to escape event attributes, but html()'s glaring <script> vulnerability will be bypassed.

Of course, if you don't need html formatting, Arminius's answer about adding it as plain text is apt.

Answer 2

The way to safely print untrusted data in HTML is by replacing HTML-significant characters with character entities. (That is, you'd replace < with <, etc.) I suppose this is what you mean by "HTML escaping".

Now, if you filter untrusted HTML that way, you can't trigger XSS with jQuery's html() anymore. E.g., this will just print plain text without markup:

$('#element').html("<h1>XSS</h1>"); 

Also note that the recommended way to insert untrusted content with jQuery is text(), since you don't have to bother with your own filtering. This is safe:

$('#element').text("<h1>XSS</h1>"); 

See this JSFiddle for a demo.