I want to display html provided by a user in a page. My page is almost entirely dynamic (JS code), and I was wondering if there’s an easy way to sanitize it?
Like, maybe I could remove all the <script> and <iframe> tags and unbind all the events contained in the string (or remove any html attribute starting by ‘on’) in order to not have any javascript code from the string possibly executed?
Can the users possibly insert javascript with a css ‘content’ property in a style attribute?
The jquery $(...).text(...) function doesn’t help me, since I want to preserve any html mark-up or css styling.
If there’s no easy solution i’m ready to live with a whitelist of html tags (table span div img a b u i strong…), but i’d rather not have to white-list the attributes too.
The more foolproof way to show user content safely is to embed it in an iframe who’s origin is a different domain than your host web page. This is what jsFiddle does. The main page is served from jsfiddle.net, but the user scripts are served from fiddle.jshell.net. This lets the user content do what it would normally do, but the browser’s cross-origin protection keeps the user content from messing with the host page or domain or cookies, etc….
Trying to strip all possible places that scripts could be in the content is a risky proposition which you will probably forever be chasing new attack vectors. I’d personally much rather let the browser be in that business and put the user content on a different domain. Plus, allowing the user content to have it’s normal JS will also let it work as desired.