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.

Hoffman

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.

Hoffman

The solution to this is to use handlebarsjs to precompile your mustache templates. See my answer below. – Burgwell

Answer 2

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

Solidstate

Thanks for the link. I like the look of Pure but approach is very different from the more common template libraries. I'll be checking it out but it isn't really a solution without a pretty heavy rewrite. – Hoffman

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.

Moynihan

Note: That option isn't allowed for Chrome Apps (packaged apps), only for extensions. – Astri

The question is about extensions. – Moynihan

Right. Sometimes a feature added by Google for extensions is also there for Chrome Apps, and, seeing your answer, I went to check. I then added this additional information. – Astri

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.

Detector

Answer 5

Distal template doesn't use eval.

Commonwealth

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".

Shanon

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.

Burgwell

blog post no longer exists (404) – Kerbstone

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?

Sothena

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.

Unreconstructed

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)

Brock

Answer 11

I just tried Liquid from Shopify, which did not trigger the CSP error.

By the way, Handlebars is giving the CSP error now.

I haven't tried the others.

Abbasid