HTML error. Tag not closed

Question

Lets imagine this scenario: In your web site you allow your user to post html (Of course you have to be aware to security issues). Your user posts:

<div> Main div <div> child div </div>.

Forgetting to close the Main div. When I serve the page containing the post with the bad html, I would be delivering a page that is all messed up.

Is there some way or an html tag to "encapsulate" or to isolate a portion of html in a page and let the user be responsible for his own ad? The idea is to implement an advertise system where the user is allowed to design his own ads.

This could also be useful to isolate errors when designing my own pages.

Thank you very much in advance.

Answer 1

Is there some way or an html tag to "encapsulate" or to isolate a portion of html in a page and let the user be responsible for his own ad?

You can use an iframe to do that.

Or: Browsers are very tolerant of broken HTML, you could use the browser to clean it up.

For example:

var str = "<div>This is broken HTML<div>missing end tags";
var e = document.createElement('div');
e.innerHTML = str; // Parse it
str = e.innerHTML; // Serialize it properly

Live Example | Source

When I run that with the string <div>This is broken HTML<div>missing end tags, I get back:

<div>This is broken HTML<div>missing end tags</div></div>

Some browsers may make the tags all caps.

Alternately, use a server-side solution like JSoup (with which you could also sanitize the input; very useful!). You haven't mentioned a server-side language; JSoup is compatible with any of the JVM-based languages, and I expect by now there are translations to other platforms...