I have written a micro-templating utility that uses innerHTML to inject html fragments in a Web page, based on user input (either plain text strings or html strings).

My main concern is the risk of malicious script injection. The script could be injected via a script tag, or in an inline event (img onload, div onmouseover for example).

Is there a way to sanitize the html string to prevent such injections? Also, are there other script injection methods I should be aware of?

I have written a micro-templating utility that uses innerHTML to inject html fragments in a Web page, based on user input (either plain text strings or html strings).

My main concern is the risk of malicious script injection. The script could be injected via a script tag, or in an inline event (img onload, div onmouseover for example).

Is there a way to sanitize the html string to prevent such injections? Also, are there other script injection methods I should be aware of?

• javascript
• innerhtml
• xss
• script-tag
• javascript-injection

• 2 No, removing script tags isn't enough if you want to prevent malicious users from doing malicious things. For example, <a href="http://yoursite" onclick="javascript:window.open('http://malicious.example')">An innocent looking link!</a> doesn't use a script tag at all and is just as nasty. – ajm Commented Jun 4, 2012 at 21:10
• I'm not in any position to represent myself as an expert, but using document.createTextNode() handles all these cases, and displays the tags literally, so they do not function. – Jerry Commented Jul 18, 2013 at 19:27
• @Jerry right, but the objective in my case is to have the safe html render as html. – Christophe Commented Jul 19, 2013 at 4:03

2 Answers 2

If you want to be safe, you'll sanitize your templates both on the client and the server. Don't write your own anti-XSS library as malicious users are bound to know an exploit that you haven't accounted for; there are just too many nuances and unless you're an XSS expert, you're bound to miss one.

On the client side, Google Caja has a pretty nice HTML sanitization utility that will perform robust sanitization on HTML strings, cleaning up malicious attributes or other areas where nasty users can do nasty things, like XSS attacks via injecting script tags. They also scrub attributes and all kinds of other XSS injection points (object and applet tags, for instance), so you can feel fairly safe.

While you should sanitize on the server to prevent malicious users from simply disabling javascript or overwriting Caja's sanitizer, you can use Caja to sanitize both input and output to try to catch as much as you can.

(Experimental feature ahead!)
To insert unsanitized HTML prefer the use of Element.setHTML()

^{(Source: MDN)}
The setHTML() method of the Element interface is used to parse and sanitize a string of HTML and then insert it into the DOM as a subtree of the element. It should be used instead of Element.innerHTML for inserting untrusted strings of HTML into an element.

document.querySelector("#test").setHTML(someUnsanitizedString);

PS: Compatibility notice: Available in Chromium browsers and still under flag for Firefox ^(2023.)