不使用eval/new Function的JavaScript模板库

Question

使用 manifest_version: 2 的 Google Chrome 扩展程序被限制不能使用 eval 或 new Function。我查过的所有 JavaScript 模板库（如 mustachejs、underscorejs、jQuery template、hoganjs 等）均使用了 new Function。有没有一些相对成熟且得到支持的模板库不使用这两种方法呢？

有关安全限制的信息。

- abraham

Answer 1

最近mustachejs添加了new Function，使用标签0.4.2的版本没有它。API略有不同，使用Mustache.to_html代替Mustache.render，可能会降低一些性能。

我提出了一个问题，希望在未来的版本中删除new Function。

- abraham

---

解决方案是使用[Handlebarsjs]（http://handlebarsjs.com/）预编译你的Mustache模板。请参见下面我的答案。 - Matthew

Answer 2

看起来Pure并没有使用eval或new Function。

- Jacob Mattison

---

谢谢提供链接。我喜欢Pure的外观，但它的方法与更常见的模板库非常不同。我会去看看，但如果不进行大量重写，它并不是一个解决方案。 - abraham

Answer 3

这里的答案已经过时了，所以我来更新一下。

自9月份起，谷歌改变了他们的政策并允许在manifest 2扩展中使用unsafe-eval。请参见此主题和此页面。

因此，如果您的扩展启用了unsafe-eval，则可以使用使用eval()、 new Function()等函数的库。

- Buu

---

注意：该选项不适用于Chrome应用程序（打包的应用程序），仅适用于扩展程序。 - Marc Rochkind

问题是关于扩展的。 - Buu

没错。有时候谷歌为扩展添加的功能也适用于Chrome应用程序，看到你的回答后我去检查了一下。然后我添加了这个额外的信息。 - Marc Rochkind

Answer 4

这真的取决于您所说的“模板库”的含义。如果您只需要字符串插值，则不需要使用eval或new Function，但当您开始需要嵌套循环结构时，事情会变得更加复杂。

几个月前，我编写了一个String.prototype.tmpl.js脚本，在我不介意覆盖String.prototype的地方，我已经在一些地方使用了它。作为静态函数，您可以使用： _tmpl.js:

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

一个示例模板：

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

基础的tmpl脚本当然可以修改以利用文档碎片来实际构建DOM元素，但就目前而言，我不确定它是否算作“模板库”。

- zzzzBov

Answer 5

Closure Templates是一个模板库，它不使用eval。模板会提前编译成JavaScript，因此在您的应用中包含的是一个普通的.js文件，不会遇到CSP问题。 了解更多

- Mihai Parparita

Answer 6

Distal模板不使用eval。

- Kernel James

---

谢谢你分享这个链接！ - Marc Rochkind

Answer 7

解决这个问题的最佳方案是在部署扩展之前预编译您的模板。handlebarsjs和eco都提供了预编译功能。我实际上写了一篇博客文章，更深入地探讨了这个问题。

- Matthew

---

博客文章不存在（404）。 - Cyzanfar

Answer 8

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

不确定是何时添加的，但现在你可以在Chrome中进行Firefox样式的沙盒操作。我正在移植我的Firefox扩展程序，所以我需要这个功能（因为我没有evalInSandbox :P）

- Jeremy Daniel Gregorio

Answer 9

我最近遇到了同样的问题。更新清单版本后，我的扩展停止工作。我尝试了 Mustache 但它无法呈现数组索引和对象属性名称的索引。因此，我不得不创建自己的简单而有效的模板库 Ashe，它免费且没有 eval 和 new Function。希望它能帮助某人。

- dfsq

Answer 10

我刚刚尝试了 Shopify 的 Liquid，没有触发 CSP 错误。

顺便说一下，Handlebars 现在会出现 CSP 错误。

其他的我还没有试过。

- Kat Lim Ruiz