Making JQuery templates safe against HTML injection

JQuery templates make it very easy for web app developers to compose HTML to keep their user interface up-to-date, but they make it very hard to do so in a way that is safe against XSS.

E.g. the JQuery template

<a href="{$url}">{$text}</a>

means create a link whose target is the result of url and whose body contains the result of text. JQuery does a lot better than most templating languages; message is assumed to be plain text and automatically encoded so that the page can't be XSSed that way. But it does nothing about url. If an attacker can make url be javascript:alert(1337) they can execute code with the full privileges of the containing page. This is a serious hole as URLs abound in web applications.

So right now, JQuery templates are easy to learn, but they have to be used cautiously. They would be even easier to use if template authors (and the poor maintainers) didn't have to worry about the provenance of data values, and could promiscuously inject into URLs, CSS, and inline JavaScript.

I've been cooking up a way to fix templating languages like JQuery. You can play around with Secure JQuery templates in the playground, or read up on the design which also includes an analysis of the performance of this system as applied to another templating language.