blocks|key|245377|text|不幸的是，我不认为你可以在chrome+extension...at中使用underscore.js的_.template()，至少在新的manifest.json版本2中是这样。同样的道理也适用于尝试使用jQuery+Template+plugin。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|245378|来自Google+Chrome扩展的Content+Security+Policy页面的|245379|：|blockquote|245380|245381|没有任何机制可以放松对执行内联JavaScript的限制。特别是，设置包含unsafe-inline的脚本策略将不起作用。这是故意的。|245382|我将介绍其他模板引擎，希望它们不会使用新函数对象。|style|BOLD|245383|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jquery.tmpl/|1|http://code.google.com/chrome/extensions/contentSecurityPolicy.html#H2-3^0|2V|M|0|0|I|N|1|0|0|0|0|J|3|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|1A|8|@$A|1B|B|1C|N|O]]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]]]

Unfortunately I don't think you can use underscore.js's _.template() from within a chrome extension...at least with the new manifest.json version 2. The same holds true for trying to use the <a href="http://api.jquery.com/jquery.tmpl/">jQuery Template plugin</a>.

<blockquote>
 From the Google Chrome Extension's <a href="http://code.google.com/chrome/extensions/contentSecurityPolicy.html#H2-3">Content Security Policy</a> page:
 
 <blockquote>
 There is no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes unsafe-inline will have no effect. This is intentional.
 </blockquote>
</blockquote>

I am going to look at other templating engines that will hopefully not use the new Function object.

blocks|key|245363|text|非常感谢Chromium+list的贡献者，他们指出，要以下划线的方式创建Function对象，需要content_security_policy的manifest.json选项包含“不安全的求值”。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|245364|例如，您的manifest.json可以是|245365|{
++"manifest_version":+2,
++...
++"content_security_policy":+"script-src+'self'+'unsafe-eval'",
++...
}|code-block|syntax|javascript|245366|然后，下划线行为将起作用，因为此策略允许它。有关格式的更多信息，请参阅此选项here的Chrome文档。|245367|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.chrome.com/extensions/contentSecurityPolicy^0|11|8|1E|N|22|D|0|5|D|0|0|12|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Many thanks to the Chromium list contributor who pointed out that to create a <code>Function</code> object in the way underscore is doing it requires the <code>manifest.json</code> option for <code>content_security_policy</code> to include 'unsafe-eval'.

As an example, your <code>manifest.json</code> could be

<pre class="lang-json prettyprint-override"><code>{
 "manifest_version": 2,
 ...
 "content_security_policy": "script-src 'self' 'unsafe-eval'",
 ...
}
</code></pre>

and then the underscore behavior would work because this policy allows it. For more information on the format see the Chrome documentation on this option <a href="https://developer.chrome.com/extensions/contentSecurityPolicy" rel="nofollow">here</a>.

blocks|key|3128920|text|我使用Underscore.js是因为我想在我的Chrome扩展中使用Backbone.js，我刚刚把模板引擎改成了Mustache+~如果你有同样的原因，你也可以使用Underscore.js作为主干，只是不要使用_.template()函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3128921|entityMap^0|3|D|Z|B|1M|8|30|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

I use <code>Underscore.js</code> because I want <code>Backbone.js</code> for my Chrome extension, I just changed the Template engine to <code>Mustache</code> ~ if you have the same reason, you can also use Underscore.js for Backbone, just do not use <code>_.template()</code> function.

blocks|key|2914573|text|如上所述，禁止使用Eval、新函数和内联脚本-即使在使用内容安全策略:+v2扩展中的there's+no+way+to+relax+this+security+policy时，也禁止使用v2限制。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2914574|大多数模板库都会在某种程度上使用evals。一种解决方案是重写您的扩展，以便所有逻辑都驻留在javascript中，而不是模板中；在这种情况下，像google+jstemplate这样的解决方案应该是可用的。|2914575|但是，可以选择在sandboxed+iframe中执行Eval和新函数，例如，在清单中使用以下行：|2914576|"sandbox":+{
++++"pages":+[
++++++"page1.html",
++++++"directory/page2.html"
++++]
},|code-block|syntax|javascript|2914577|沙箱页面不能访问扩展或应用程序API，也不能直接访问非沙箱页面(它可以通过postMessage()与它们通信)。您可以使用特定的CSP进一步限制沙箱权限|2914578|现在，Google+Chrome团队在github+eval+in+iframe上提供了一个完整的示例，告诉您如何通过与沙盒iframe和short+analytics+tutorial进行通信来规避该问题|2914579|希望一些库可以使用这种机制来提供与标准模板使用的完全兼容，尽管出于性能原因，我建议从模板中删除尽可能多的逻辑……|2914580|感谢Google，在阵容中有很多扩展重写:(|2914581|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/chrome/extensions/contentSecurityPolicy.html#H2-3|1|http://code.google.com/p/google-jstemplate/|2|http://developer.chrome.com/trunk/apps/manifest.html#sandbox|3|https://github.com/GoogleChrome/chrome-app-samples/tree/master/eval-in-iframe|4|http://code.google.com/chrome/extensions/tut_analytics.html^0|16|18|0|0|21|H|1|0|8|G|2|0|0|0|J|L|3|1X|O|4|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|F|3|G|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|H|3|I|5|J|7|1M|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1N|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1O|8|@]|9|@$A|1P|B|1Q|1|1R]|$A|1S|B|1T|1|1U]]|C|$]]|$1|Q|3|R|5|6|7|1V|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|1W|8|@]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]|14|$5|X|Y|Z|C|$10|15]]|16|$5|X|Y|Z|C|$10|17]]|18|$5|X|Y|Z|C|$10|19]]]]

Manifest v2 limitations, as said above, forbid to use Eval, new Function, and inline scripts - even when playing with the Content Security Policy: <a href="http://code.google.com/chrome/extensions/contentSecurityPolicy.html#H2-3" rel="nofollow">there's no way to relax this security policy</a> in v2 extensions.

Most template libraries use, at some point or another, evals.
One solution is to rewrite your extensions so that all logic resides in a javascript, and nothing in a template; a solution such as <a href="http://code.google.com/p/google-jstemplate/" rel="nofollow">google jstemplate</a> should in this case be usable.

There's, though, the option to do Eval and new Function inside a <a href="http://developer.chrome.com/trunk/apps/manifest.html#sandbox" rel="nofollow">sandboxed iframe</a>, for instance with the following lines in the manifest:

<pre><code>"sandbox": {
 "pages": [
 "page1.html",
 "directory/page2.html"
 ]
},
</code></pre>

A sandboxed page will not have access to extension or app APIs, or direct access to non-sandboxed pages (it may communicate with them via postMessage()). You can further restrict the sandbox rights with a specific CSP

There's now a full example from the Google Chrome team on the <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/eval-in-iframe" rel="nofollow">github eval in iframe</a> on how to circumvent the problem by communicating with a sandboxed iframe, as well as a <a href="http://code.google.com/chrome/extensions/tut_analytics.html" rel="nofollow">short analytics tutorial</a>

Hopefully some library will show up using this mechanism to provide full compatibility with standard templates usage, though I'd advise removing as much logic from the templates as possible for performance reasons...

Thanks to Google, there's a lot of extension rewriting in the lineup :(

blocks|key|240510|text|谷歌刚刚发布了一份新的文件，讨论了这个问题的解决方案？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|240511|http://code.google.com/chrome/extensions/trunk/sandboxingEval.html|offset|length|240512|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1U|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

Google just released a new document discussing the solution for this problem ?

<a href="http://code.google.com/chrome/extensions/trunk/sandboxingEval.html" rel="nofollow">http://code.google.com/chrome/extensions/trunk/sandboxingEval.html</a>

blocks|key|2914661|text|您可以使用jQuery的$('<element+.../>')构造编写自己的模板迷你引擎。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2914662|干净的方式：|2914663|function+myElement(text)+{
++var+d+=+$('<div+class="abc"/>');
++d.text(text);
++return+d;
}

myElement('my+text').appendTo(domParent);|code-block|syntax|javascript|2914664|肮脏的方式：|2914665|var+yourTemplate+=+'<div>${somevar}</div>';

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

instTemplate(yourTemplate,+'your+text').appendTo(domParent);|2914666|例如，如果你知道替换数据是无害的，那么使用脏方法重写简单的jquery.tmpl模板是相当快的，等等。|2914667|entityMap^0|C|J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

You can write your own template mini-engine using jQuery's <code>$('&lt;element .../&gt;')</code> construction.

The clean way:

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

myElement('my text').appendTo(domParent);
</code></pre>

The dirty way:

<pre><code>var yourTemplate = '&lt;div&gt;${somevar}&lt;/div&gt;';

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

instTemplate(yourTemplate, 'your text').appendTo(domParent);
</code></pre>

E.g. it's pretty quick to rewrite simple jquery.tmpl templates using the dirty method, if you know that the replacement data is not harmful, etc.

If I use <a href="http://underscorejs.org/" rel="nofollow">underscore.js</a>'s <a href="http://underscorejs.org/#template" rel="nofollow">_.template()</a> from inside a Google Chrome extension I get the following error in the console:

<blockquote>
 Uncaught Error: Code generation from strings disallowed for this context
</blockquote>

Is there any way to get past this error?

Underscore.js _.template causes error from Chrome extension

jQuery

如果我在Google Chrome扩展中使用的，我会在控制台中得到以下错误：未捕获错误:此上下文不允许从字符串生成代码有什么方法可以克服这个错误吗？

问Underscore.js _.template导致Chrome扩展出错
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Underscore.js _.template导致Chrome扩展出错EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Underscore.js _.template导致Chrome扩展出错
EN