JavaScript template library that doesn't use e

问题:

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.

回答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.

回答2:

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

回答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.

回答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.

回答5:

Distal template doesn't use eval.

回答6:

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.

回答7:

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

回答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?

回答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.

回答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)