CSP-safe ES6 template literals

Question

Есть ли механизм шаблонов, который будет анализировать шаблоны в стиле ES6 template literals (например, "string ${var}"), не нарушая ограничение по безопасности Content C Security для оценки скриптов?

CSP restrictions on script evaluation предотвратить eval, new Function, setTimeout(string) и setInterval(string).

Существует несколько шаблонных движков, которые могут предоставить или изменить, чтобы обеспечить что-то вроде шаблонов шаблонов в стиле ES6, таких как MicroTemplates от John Resig, lodash _.template и DoT.js. Однако все, похоже, нарушают CSP, используя new Function.

Это было бы в некотором смысле удобно, если var может быть неограниченным Javascript, но по видимым причинам это может быть невозможно. Однако мне нужно было бы модифицировать движок для форматирования вывода по желанию.

В сложившихся обстоятельствах производительность не вызывает беспокойства, и предварительная компиляция шаблонов не является вариантом. Другие имеют discussed pre-compilation.

В качестве дополнительного ограничения контент представляет собой текст, а не HTML. Я не думаю, что DOM-ориентированные шаблонные двигатели, такие как Knockout или PURE, не будут работать эффективно, в результате.

Моя первая мысль, чтобы начать с mustache.js и изменить его оттуда (то есть изменить mustache.tags = ['${', '}'] или DIY solution, но я был бы признателен за любые мысли по этой теме в целом, по-видимому, довольно недостаток обсуждения на ПСУ и шаблоны.

Answer 1

Если все, что вам нужно, это подмена значения ключа, вы можете сделать с простой функцией, как в templateReplace, что я обеспечиваю ниже. Нет Eval вовлеченного, только регулярные выражения.

Если вам необходимо включить ' unrestriced javascript ', есть контент, например ${[1,2,3].join(', ')}, тогда, как вы признали, вам, очевидно, понадобится решение, которое wil Я нарушаю вашу политику 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>