Underscore.js _.template 导致 Chrome 扩展程序出错

Question

如果我使用 underscore.js 的 _.template() 我在控制台中收到以下错误：

未捕获错误：此上下文不允许从字符串生成代码

有什么方法可以解决此错误吗？

Answer 1

非常感谢 Chromium 列表贡献者指出，要以下划线的方式创建 Function 对象，需要 content_security_policymanifest.json 选项code> 包含“unsafe-eval”。

例如，您的 manifest.json 可能是

{
  "manifest_version": 2,
  ...
  "content_security_policy": "script-src 'self' 'unsafe-eval'",
  ...
}

，然后下划线行为将起作用，因为此策略允许它。有关该格式的详细信息，请参阅此处有关此选项的 Chrome 文档。

Answer 2

不幸的是，我认为你不能在 chrome 扩展中使用 underscore.js 的 _.template() ...至少对于新的 manifest.json 版本 2 来说是这样。尝试使用 jQuery 模板插件。

来自 Google Chrome 扩展程序的内容安全政策页面：

<块引用>

没有机制可以放松对执行内联 JavaScript 的限制。特别是，设置包含 unsafe-inline 的脚本策略将不会产生任何效果。这是故意的。

我将研究其他希望不使用 new Function 对象的模板引擎。

Answer 3

我使用 Underscore.js 因为我想要 Backbone.js 作为我的 Chrome 扩展，我刚刚将模板引擎更改为 Mustache ~ 如果您有同样的原因，你也可以使用 Underscore.js 作为 Backbone，只是不要使用 _.template() 函数。

Answer 4

如上所述，Manifest v2 限制禁止使用 Eval、新函数和内联脚本 - 即使在使用内容安全策略时也是如此：在 v2 扩展中无法放松此安全策略。

大多数模板库在某些时候都会使用 eval。
一种解决方案是重写您的扩展，以便所有逻辑都驻留在 JavaScript 中，而不是模板中的任何内容；在这种情况下，诸如 google jstemplate 之类的解决方案应该可用。

不过，可以选择在 沙盒 iframe，例如清单中包含以下几行：

"sandbox": {
    "pages": [
      "page1.html",
      "directory/page2.html"
    ]
},

沙盒页面将无法访问扩展程序或应用程序 API，或直接访问非沙盒页面（它可以通过 postMessage() 与它们通信）。您可以使用特定的 CSP 进一步限制沙箱权限

现在，Google Chrome 团队在 iframe 中的 github eval 了解如何通过与沙盒 iframe 通信来规避问题，以及 简短的分析教程

希望某些库会使用此机制来提供与标准模板的完全兼容性用法，但出于性能原因，我建议从模板中删除尽可能多的逻辑...

感谢 Google，阵容中有很多扩展重写:(

Answer 5

谷歌刚刚发布了一份新文件讨论这个问题的解决方案？

http://code.google.com/chrome/extensions/trunk/sandboxingEval.html

Answer 6

您可以使用 jQuery 的 $('') 构造编写自己的模板迷你引擎。

干净的方法：

function myElement(text) {
  var d = $('<div class="abc"/>');
  d.text(text);
  return d;
}

myElement('my text').appendTo(domParent);

肮脏的方法：

var yourTemplate = '<div>${somevar}</div>';

function instTemplate(tmpl, text) {
  return $(tmpl.replace(/\$\{somevar\}/g, text));
}

instTemplate(yourTemplate, 'your text').appendTo(domParent);

例如，如果您知道替换数据无害，那么使用脏方法重写简单的 jquery.tmpl 模板非常快。