HTML inside contenteditable div

Question

I have a contentEditable div within which I need to allow the user to edit HTML.

Do I need to sanitize the HTML the user writes inside that div?

I mean when I retrieve the HTML from that div, it's already sanitized. For example, if I wrote something like <> inside the div, and then retrieved that back, I'd get <>.

Test it here: http://jsfiddle.net/mByWT/

My other question is: is this behavior a standard, and can I rely on it across all browsers?

EDIT

I can now conclude that this is a general pattern:

• element.innerHTML returns escaped HTML -- it escapes <, > amd & but not quotes
• element.innerText and element.textContent return the literal HTML without escaping

See this: http://jsfiddle.net/2CmjG/

Answer 1

I think that you answered yourself :). Fact that innerHTML of contenteditable div returns encoded HTML is a general pattern. Otherwise typing < or > or   or other HTML special entities would break this editor.

However, I'm pretty sure that there're edge cases for which browsers will produce different results and data created on e.g. IE won't be valid on Fx. But I've never observed anything critical. You also won't be able to encode data given by innerHTML, because that would be very tricky.

Answer 2

jQuery is build to be compatible with all browsers, if you used your code in all browsers, it would preform the same way.

You would want to sanitize your HTML, however, because characters like < and > can confuse javascript. You want to sanitize HTML even more so if it's going to a database, or something like that.