Question

I’ve just found out about the contenteditable attribute and I was thinking about practical uses for it.

I think it would be awesome for quick updates to a page, but there are some concerns such as:

• Security: You obviously don’t want anyone to update your pages so allowing the editing of content should be fairly strictly controlled
• Making the content of the page editable after login. Wouldn’t this require altering the entire page’s markup? Not a problem per se but quite a big job I should imagine
• Saving the new content. Theoretically this could be done through ajax with a json to save the new page markup in a field in a database, could it not? Also, how do you actually confirm to the website that “I’m done changing this, you can save it now”

I love this idea of quickly editing the page’s content right where you’re going to see it. I’m pretty excited about implementing such a thing on my website, but I could use a bit of guidance before attempting it.

Can anyone address the above listed issues as well as anything I haven’t considered that might be pertinent?

Thanks for your time!

Answer 1

• Security Yes, you don’t want just anyone to update your page, but that’s not anything to do with contenteditable itself. People can change the content of any page on the internet right now using the browser’s development tools but, other than faking funny screenshots, it’s not much use to them if the server doesn’t accept updates. The more important issue here is protecting against things like cross-site scripting attacks by making sure the content the user adds to the page is ‘safe’ (this, for example, is why blogs typically disallow most HTML tags in comments).
• Making content editable after login Simply add the contenteditable attribute in the server side logic after the user has logged in. Alternatively, add it with JavaScript when the user clicks an ‘Edit’ button. I wouldn’t expect it to change the whole page’s markup because for this approach to be sensible the pages would already be getting generated at the server side anyway from a template being filled with content stored in a database. If you’re talking about making a static site editable then, yes, you’d have a lot of work to do, but you’d have that work to do however you planned on letting people edit the pages.
• Saving the new content Yes, do it with Ajax. JSON is not really necessary, it’s the HTML content you want to send back, right? Send it back as HTML, just bear in mind the above comment about cross-site scripting and do security checks on the server side (never trust user input). How you confirm the user is done editing is up to you, in the same way that you’re going to have to add programming logic to send the changes back with Ajax and process those changes on the server, you’re going to have to add logic which shows editing tools (buttons for bold, italic etc.) when necessary – add a button to perform the update at the same time.