Underscore.js _.template causes error from Chrome extension

Question

If I use underscore.js's _.template() from inside a Google Chrome extension I get the following error in the console:

Uncaught Error: Code generation from strings disallowed for this context

Is there any way to get past this error?

Answer 1

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 jQuery Template plugin.

From the Google Chrome Extension's Content Security Policy page:

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.

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

Answer 2

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

As an example, your manifest.json could be

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

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

Answer 3

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

Answer 4

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

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

Answer 5

Manifest v2 limitations, as said above, forbid to use Eval, new Function, and inline scripts - even when playing with the Content Security Policy: there's no way to relax this security policy 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 google jstemplate should in this case be usable.

There's, though, the option to do Eval and new Function inside a sandboxed iframe, for instance with the following lines in the manifest:

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

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 github eval in iframe on how to circumvent the problem by communicating with a sandboxed iframe, as well as a short analytics tutorial

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

Answer 6

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

The clean way:

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

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

The dirty way:

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

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

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

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.