Save custom content from hacking layout?

Question

I have a website that wraps some kind of user-generated content, and I want to be able to separate layout for layout and layout from user-created content, so ug content cannot break site layout.

User content is trusted because it comes from a well-known group of users on my network, but nevertheless only a small subset of html tags is allowed (p, ul / ol / li, em, strong and a couple more). However, user-generated content is not guaranteed to be well-formed, and we have had some cases of distorted user-generated content that violates the site’s layout.

We work with our users so that the content is well-formed, but in the meantime I'm trying to find a good way to separate the content from the layout. I searched for namespaces but couldn't find good CSS support documentation for nested namespaces.

Anyone have any good ideas?

EDIT

I saw some really good suggestions here, but I should probably clarify that I have absolutely no control over the input mechanism that users use. They inject content into one system, and my page uses this system API to extract content from it. This system uses TinyMCE, but, as I said, we still get incorrect content.

Answer 1

• It may be overkill, but HTML Tidy can help if you can use it.

• Use WYSIWYG as TinyMCE or CKEditor , which has built-in cleaning methods.

Robert Koritnik’s suggestion to use markdowns seems brilliant, especially considering that you only allow a few harmless formatting tags.

I don’t think you can do something that you can do with CSS to stop layouts due to open HTML tags, so I will probably forget this idea.

Answer 2

Why not use markdowns

If your users are literate in HTML or people who can understand the concept of markdown syntax, I suggest you go ahead with that. Stackoverflow does a great job of this. I can not imagine how a regular editor on Stackoverflow. Markdown editors are much simpler and faster to use and provide ample formatting options for most situations. If you need special additional functions, you can always add them, but first you need to use the capabilities of the boxes.

Live view for self check

But be sure to include a real-time view of what users are writing. Self-esteem does wonders, so they correct their mistakes before publishing data.

Answer 3

Instead of parsing the result or forcing the user to use a structured format, simply display the contents in an iframe:

<iframe id="user_html"></iframe> <script> document.getElementById("user_html").src = "data:text/html;charset=utf-8," + escape(content); </script> 

Answer 4

I have created custom CMS systems exclusively for several years and have always had great happiness with a combination of quality WYSIWYG, strong front-side validation and relentless internal-level validation.

I always gravitate towards CKEditor, because it is the only interface editor that can handle Microsoft Word front-end output ... which should be in my books. Of course, others have a paste from a text solution, but luck is in getting users to use it. I actually had a client that overloaded the db insert thanks to Microsoft Word, which was not cleared in Tiny. HTML tidy is a great solution to clean things up before checking on the back.

CK has built-in templates and classes, so I used them to help my users format without going overboard. In the background, I checked that they did not try any funny business with CSS, but this never bothered this group of users. Give them enough (safe) functions and they will never want to go rogue.