Safely split html tags in javascript using whitelist

Question

I want to strip almost every html tag from a string in javascript, allowing just a few basic tags (& strip their attributes) to prevent Cross-Site-Scripting.

A lot of people say that this should not be done with javascript, because clients can have javascript disabled, as a result of which the filter is interrupted. However, my entire project depends on javascript, and no client with javascript disabled will ever see the output, plus I can not do this on the server side.

(1) Can it be assumed that in this case it can be done safely?

bobince recommends using the DOM (instead of RegEx) to filter out potentially unsafe input, I'm certainly not an XSS expert, but since its example depends on which line is inserted into the DOM before the filter does its job, I can imagine that it could be unsafe due to something like:

var unsecureString = '<img src=".." onload="alert(\'bad\')" />';
$('#alice').update(unsecureString);
filterNodes($('#alice'), {p:[],a:['href']}); // see link above

(2) Can I be sure that the bad event above will not fire?

(3) If not: how to avoid such problems, but still use the DOM?

Answer 1

look at google caja sanitizer.

https://code.google.com/p/google-caja/wiki/JsHtmlSanitizer