JavaScript template library that doesn't use eval/new Function

Question

Google Chrome extensions using manifest_version: 2 are restricted from using eval or new Function. All of the JavaScript templating libraries I checked (mustachejs, underscorejs, jQuery template, hoganjs, etc) use new Function. Are there any that are fairly mature and supported that don't use either?

Info about the security restrictions.

Answer 1

It turns out that mustachejs added new Function recently and using tag 0.4.2 doesn't have it. It the API is slightly different with Mustache.to_html instead of Mustache.render and there are likely some performance reduction.

I opened an issue to potentially get new Function removed in a future release.

Answer 2

It doesn't appear that Pure uses either eval or new Function.

Answer 3

The answers here are outdated so I post an update.

Since September, Google changed their policy and allowed unsafe-eval in manifest 2 extensions. See this thread and this page.

So libraries using eval(), new Function() etc. can be used if unsafe-eval is turned on for your extensions.

Answer 4

Closure Templates is a templating library that does not use eval. Templates are compiled to JavaScript ahead of time, so that what gets included in your app is a plain .js file that should not run into CSP issues.

Answer 5

Distal template doesn't use eval.

Answer 6

It really depends on what you mean by "template library". If you just want string interpolation, there's no need for eval or new Function, when you start needing embedded looping structures, things get more complicated.

A few months ago I wrote a String.prototype.tmpl.js script that I've used a couple times here and there in places where I don't mind overriding String.prototype. As a static function, you can use:

_tmpl.js:

function tmpl(tmpl, o) {
    return tmpl.replace(/<%=(?:"([^"]*)"|(.*?))%>/g, function (item, qparam, param) {
        return o[qparam] || o[param];
    });
}

_{An example template:}

<div id="bar"></div>
<script type="text/x-tmpl" id="foo">
    <h1><%=title%></h1>
    <p><%=body%></p>
</script>
<script>
    (function () {
        var foo,
            bar;
        foo = document.getElementById('foo');
        bar = document.getElementById('bar');
        bar.innerHTML = tmpl(foo.innerHTML, {
            title: 'foo bar baz',
            body: 'lorem ipsum dolor sit amet'
        });
    }());
</script>

The base tmpl script can of course be modified to take advantage of document fragments to actually build out DOM elements, but as-is I'm not sure whether it counts as a "template library".

Answer 7

The best solution to this problem is to pre-compile your templates before you deploy your extension. Both handlebarsjs and eco offer pre-compilation as a feature. I actually wrote a blog post that goes into more depth.

Answer 8

Maybe you can write a function eval1:

function eval1(blah) {
    var s = document.createElement("script");
    s.src = blah;
    document.head.appendChild(s);
    document.head.removeChild(s);
}

and do a find/replace in the library you want, but that'd be cheating, right?

Answer 9

I recently run into the same problem. After updating manifest version my extension stopped working. I tried Mustache but it unable to render index of the array and names of the object properties. So I had to create my own simple but effective templating library Ashe which is free of eval and new Function. Hope it will help someone.

Answer 10

https://developer.chrome.com/extensions/sandboxingEval

Not sure when it was added, but you can do Firefox style sandboxing in Chrome now. I'm porting my Firefox extension, so I need this (since I don't have evalInSandbox :P)