Javascript Template Engines that work with Chrome's Content Security Policy

Question

The Chrome API\'s Manifest version 2 has removed the ability to do unsafe-eval. This means using the eval function or in general dynamically creating a function from text.

Answer 1

You should absolutely use precompilation as recommended by Mathew for medium and big templates. For extremely small templates we are using this:

var template = function(message, data) {
  if (typeof data === 'undefined') {
    return _.partial(template, message);
  } else {
    return message.replace(/\{\{([^}]+)}}/g, function(s, match) {
      var result = data;
      _.each(match.trim().split('.'), function(propertyName) {
        result = result[propertyName]
      });
      return _.escape(result);
    });
  }
};

var data = {
  foo: 'Hello',
  bar: { baz: 'world!' }
};

// print on-the-fly
template('{{foo}}, {{bar.baz}}' args); // -> 'Hello, world!'

// prepare template to invoke later
var pt = template('{{foo}}, {{bar.baz}}');
pt(args); // -> 'Hello, world!'

This implementation does not use eval, but it will require underscore.

Answer 2

The best solution to this problem is to pre-compile your templates before you deploy your extension. Both handlebarsjs and eco offer pre-compilation as a feature. I actually wrote a blog post that goes into more depth.