Is the HTML5 property contenteditable secure?

Question

All the answers to this question are old. I can't find anything from 2016+ on SO. Is HTML5's contenteditable=true property secure? I don't see it used much. What do I have to secure to use it?

Edit: Since the old answers, it looks like it is widely accepted now, http://caniuse.com/#search=contenteditable

Edit: When I say secure, I mean how do I make sure what the person types into it is secure? What kind of problems should I be looking for? XSS? Something else?

Edit: I am sending the edited content to the server. Is there anything any different about the HTML5 property that I wouldn't do to any input element already?

Answer 1

Its totally secure. The contenteditable attribute is an enumerated attribute whose keywords are the empty string, true, and false. The empty string and the true keyword map to the true state. The false keyword maps to the false state. In addition, there is a third state, the inherit state, which is the missing value default (and the invalid value default).

contenteditable="" or contenteditable="true"

Indicates that the element is editable.

contenteditable="false"

Indicates that the element is not editable.

contenteditable="inherit"

Indicates that the element is editable if its immediate parent element is editable. This is the default value.

When you add contenteditable to an element, the browser will make that element editable. In addition, any children of that element will also become editable unless the child elements are explicitly contenteditable="false".

Answer 2

I think by "secure" you meant if it could be possible for users to accidentally trigger an XSS or something similar by copying content from Word or some other webpage or chat application.

Well, it depends:

You can use the sandbox="allow-same-origin" attribute on a contenteditable iframe which will stop all javascript from executing inside the iframe.

To prevent loading of external resources you could supply a CSP which restricts resources to your domain or disallows external resources entirely.

But keep in mind: a CSP in the iframe will also restrict the parent site in some browsers if the iframe is in the same origin as the parent. Same-origin is needed to be able to access the iframe's edited contents.

You could however use an iframe put in a different origin and resticted by a CSP that contains an contenteditable iframe that is sandboxed as described above. The first iframe (containing the sandboxed one) could use javascript and message passing to communicate with your top level page/origin.

As far as I know you don't need to do special thing server side. Everything you can do with contenteditable can be done with a plain textarea, too. Use HTML Purifier or some similar filter that is based on a whitelist.