Encode HTML attributes when inserting HTML in the DOM

Question

I have questions on preventing XSS attacks.

1) Question:

I have an HTML template as Javascript string (trusted) and insert content coming from a server request (untrusted). I replace placeholders within that HTML template strings with that untrusted content and output it to the DOM using innerHTML/Text.

In particular I insert texts that I output in <div> and <p> tags that are already present in the template HTML string and form element values, i.e. texts in input tag's value attribute, select option and textarea tags.

Do I understand correctly that I can treat every inserted text mentioned above as HTML subcontext thus I only encode like so: encodeForJavascript( encodeForHTML( inserted_text ) ). Or do I have to encode the texts that I insert into value attributes of the input fields for the HTML Attribute subcontext?

After reading up on this issue on OWASP I am inclined to think that latter is only necessary in case I set the attribute with unstrusted content via Javascript like so: document.forms[ 0 ].elements[ 0 ].value = encodeForHTMLAttribute, is that correct?

2) Question:

What is the added value of server side encoding server responses that enter the client side via Ajax and get handled anyway (like in question 1). In addition, don't we risk problems when double encoding the content?

Thanks

Erlend · Accepted Answer · 2012-01-11 18:55:17Z

1

You need to encode for the context in question, so to data inserted into html context needs to be encoded for html, and data inserted into html attributes, should be html attribute encoded. This is addition to the javascript encoding you mentioned.

I would javascript encode for transfer and then encode for the correct context client side, where I know which context is the right one.

answered Jan 11, 2012 at 18:55

Erlend

4,40625 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Juergen Riemer Over a year ago

Hi Erlend, thanks for your reply, however, I am afraid it is still not clear to me if I am dealing with html context or with html attribute content. Let me try again, take this code: var html = "<p><input value='(untrusted_1)'/>(untrusted_2)</p>"; innerHTML = html; Am I dealing here with HTML context only or do have to deal (unstrusted_1) as being HTML Attribute context? After all I am inserting an HTML fragment not dealing with the attribute directly?

Erlend Over a year ago

When setting values from javascript by directly manipulating the DOM, you don't have to encode. So document.forms[0].elements[0].value = someValue and document.forms[0].elements[0].innerText = someValue can be treated the same way. You only have to make sure that someValue is escaped for the javascript context where it is defined. HTML-encoding and HTML-attribute encoding are there to allow the HTML parser to correctly build the DOM. So they are required in your example in your comment, as you are building HTML.

Juergen Riemer Over a year ago

Great thanks Erlend, so my initial assumption was incorrect. The proper way of doing it is like so:

var htmlAttribute = encodeForJS( encodeForHTMLAttribute( unstrusedInputValue ) ) var htmlText = encodeForJS( encodeForHTML( unstrusedTextValue ) ) var html = "<p><input value='"+ htmlAttribute+ "'/>"+ htmlText +"</p>"; node.innerHTML = html;

Collectives™ on Stack Overflow

Encode HTML attributes when inserting HTML in the DOM

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related