CSP安全的ES6模板文字

Question

有没有一个模板引擎可以解析ES6 template literals (例如"string ${var}")风格的模板，而不会违反脚本求值的内容安全策略限制？

CSP restrictions on script evaluation可防止eval、new Function、setTimeout(string)和setInterval(string)。

有许多模板引擎可以提供或修改为提供类似于ES6样式的模板文字，例如John Resig的MicroTemplates、lodash _.template和DoT.js。然而，通过使用new Function，所有这些似乎都违反了CSP。

如果var可以是不受限制的Javascript，在某些方面会很方便，但由于明显的原因，这可能是不可能的。但是，我需要能够修改引擎，以格式化所需的输出。

在这种情况下，性能不是问题，预编译模板也不是一个选项。其他人也有discussed pre-compilation。

作为附加限制，内容是文本，而不是HTML。因此，我不认为面向DOM的模板引擎(如Knockout或PURE )不会有效地工作。

我的第一个想法是从mustache.js开始，并从那里修改它(例如，更改mustache.tags = ['${', '}']或DIY solution，但我将非常感谢大家对这个主题的任何想法，因为关于CSP和模板的讨论似乎相当缺乏。

Answer 1

如果您所需要的只是键值替换，那么您可以使用一个简单的函数，如下面提供的templateReplace。不涉及eval，只有正则表达式。

如果你需要包括'unrestriced javascript'，有像${[1,2,3].join(', ')}这样的内容，那么，正如你所承认的，你显然需要一个违反你的CSP策略的解决方案。

​

var templateReplace = function(html, data, keyTemplate) {
  if (!keyTemplate || typeof keyTemplate !== 'string' || keyTemplate.indexOf('key') === -1) {
    keyTemplate = '{{key}}';
  }
  return (Object.keys(data) || []).reduce(function(html, key) {
    var val = (data[key] !== undefined) ? data[key] : '';
    return html.replace(new RegExp(keyTemplate.replace('key', key), 'gi'), val);
  }, html);
};

// demo 1, using {{key}} syntax
(function() {
  var li = [{ text: 'one' }, { text: 'two' }, { text: 'three' }].map(function(d) {
    return templateReplace( '<li>Item: {{text}}</li>', d);
  });
  document.querySelector('#result1').innerHTML = li.join('\n')
}())

// demo 2, using ${key} syntax
(function() {
  var helloWorld = templateReplace('${hello} ${world}', { hello: 'Hello', world: 'World!' }, '\\${key}');
  document.querySelector('#result2').innerHTML = helloWorld;
}())

demo 1 - {{key}} syntax
<div id="result1"></div>

demo 2 - ${key} syntax
<div id="result2"></div>

​

Answer 2

Micromustache库就是这样做的。版本6支持设置自定义的打开和关闭标记(${和}，而不是{{和}})，这使得它更像是模板文字的临时替代品。