Search code examples
htmlcontenteditable

HTML inside contenteditable div

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 &lt;&gt;.

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/

Solution

  • I think that you answered yourself :). Fact that innerHTML of contenteditable div returns encoded HTML is a general pattern. Otherwise typing < or > or &nbsp; 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.