CSP安全的ES6模板文字

Question

是否有模板引擎将以ES6模板文字(例如"string ${var}")的样式解析模板而不违反脚本评估的内容安全策略(CSP)限制？

在对剧本评价CSP限制阻止eval,new Function,setTimeout(string)和setInterval(string).

有许多模板引擎,可以提供或进行修改,以提供类似ES6风格模板文字,如John Resig的的MicroTemplates,lodash _.template和DoT.js.但是所有人似乎都违反了CSP new Function.

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

在这种情况下,性能不是问题,并且预编译模板不是一种选择.其他人讨论了预编译.

作为附加限制,内容是文本 - 而不是HTML.我不认为面向DOM的模板引擎如Knockout或PURE不会有效地工作.

我的第一个想法是从mustache.js开始并从那里修改它(即改变mustache.tags = ['${', '}']或DIY解决方案,但我会感谢任何有关该主题的想法,因为似乎缺乏关于CSP和模板的讨论.

Answer 1

如果您需要的只是键值替换，您可以使用一个简单的函数，例如我在下面提供的 templateReplace。不涉及评估，仅涉及正则表达式。

如果您需要包含“不受限制的 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>