不使用 eval/new 函数的 JavaScript 模板库

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

本文关键字：JavaScript 函数 new eval      更新时间：2023-09-26
使用

manifest_version: 2的Google Chrome扩展程序被限制使用eval或new Function。我检查的所有JavaScript模板库（mustachejs，underscorejs，jQuery template，hoganjs等）都使用new Function。有没有相当成熟和支持的也不使用？

有关安全限制的信息。

事实证明，胡子最近添加了new Function并使用标签 0.4.2 没有它。如果 API 与 Mustache.to_html 而不是 Mustache.render 略有不同，并且可能会降低一些性能。

我打开了一个问题，可能会在将来的版本中删除new Function。

Pure似乎既没有使用eval也没有使用new Function。

这里的答案已经过时了，所以我发布了更新。

自 9 月以来，Google 更改了政策，允许在清单 2 扩展中unsafe-eval。请参阅此线程和此页面。

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

闭包模板是一个不使用eval的模板库。模板会提前编译为 JavaScript，因此应用中包含的内容是不应遇到 CSP 问题的纯.js文件。

远端模板不使用 eval。

这实际上取决于您所说的"模板库"是什么意思。如果你只想要字符串插值，就不需要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 元素，但我不确定它是否算作"模板库"。

此问题的最佳解决方案是在部署扩展之前预编译模板。车把和eco都提供预编译作为一项功能。我实际上写了一篇更深入的博客文章。

也许你可以写一个函数 eval1：

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

并在您想要的库中查找/替换，但那是作弊，对吧？

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

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

不确定它是什么时候添加的，但您现在可以在 Chrome 中进行 Firefox 风格的沙盒处理。我正在移植我的 Firefox 扩展，所以我需要这个（因为我没有 evalInSandbox :P）

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

顺便说一下，车把现在给出了CSP错误。

我没有尝试过其他的。

相关文章：