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


使用Google Chrome扩展程序 manifest_version: 2 限制使用 eval 要么 new Function。我检查的所有JavaScript模板库(mustachejs,underscorejs,jQuery模板,hoganjs等)都使用 new Function。有没有相当成熟和支持不使用?

有关安全限制的信息


9999
2018-05-24 20:24


起源



答案:


事实证明,mustachejs补充道 new Function 最近和使用 标签0.4.2 没有它。它的API略有不同 Mustache.to_html 代替 Mustache.render 并且可能会有一些性能降低。

一世 开了一个问题 可能得到 new Function 在将来的版本中删除。


5
2018-05-24 21:15



解决方案是使用 handlebarsjs 预编译你的胡子模板。请参阅下面的答案。 - Matthew


答案:


事实证明,mustachejs补充道 new Function 最近和使用 标签0.4.2 没有它。它的API略有不同 Mustache.to_html 代替 Mustache.render 并且可能会有一些性能降低。

一世 开了一个问题 可能得到 new Function 在将来的版本中删除。


5
2018-05-24 21:15



解决方案是使用 handlebarsjs 预编译你的胡子模板。请参阅下面的答案。 - Matthew


它似乎没有  使用其中之一 eval 要么 new Function


3
2018-05-24 20:30



谢谢你的链接。我喜欢Pure的外观但是方法与更常见的模板库非常不同。我会检查它,但它不是一个没有相当重的重写的解决方案。 - abraham


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


2
2018-05-25 01:00





末节 模板不使用eval。


2
2017-07-11 05:33



谢谢你的链接! - Marc Rochkind


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

自9月以来,谷歌改变了他们的政策并允许 unsafe-eval 在清单2扩展中。看到 这个帖子 和 这一页

所以图书馆使用 eval()new Function() 如果,可以使用等 unsafe-eval 已启用您的扩展程序。


2
2017-11-11 20:55



注意:Chrome Apps(打包应用)不允许使用该选项,仅适用于扩展程序。 - Marc Rochkind
问题是关于扩展。 - Buu Nguyen
对。有时谷歌为扩展程序添加的功能也适用于Chrome应用程序,并且,看到您的回答,我去检查。然后我添加了这些附加信息。 - Marc Rochkind


解决此问题的最佳方法是在部署扩展程序之前预先编译模板。都 handlebarsjs 和 生态 提供预编译作为功能。我其实写了一个 博客文章 进一步深入。


1
2017-07-18 23:22





这实际上取决于“模板库”的含义。如果你只想要字符串插值,就没有必要了 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元素,但是我不确定它是否算作“模板库”。


1
2017-11-11 21:16





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

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

并在你想要的图书馆里寻找/替换,但这是作弊,对吧?


0
2018-05-28 04:32





我最近遇到了同样的问题。更新清单版本后,我的分机停止工作。我尝试过Mustache但它无法呈现数组的索引和对象属性的名称。所以我必须创建自己的简单但有效的模板库 阿什 这是免费的 eval 和 new Function。希望它会帮助某人。


0
2017-07-14 20:42





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

不确定它何时添加,但您现在可以在Chrome中使用Firefox样式的沙盒。我正在移植我的Firefox扩展,所以我需要这个(因为我没有evalInSandbox:P)


0
2018-04-02 02:10