Javascript CSP安全ES6模板文本

是否有一个模板引擎可以在不违反内容安全策略（CSP）对脚本求值的限制的情况下以（例如，

“string${var}”

）的样式解析模板

阻止

eval

，

新功能

，

设置超时（字符串）

和

设置间隔（字符串）

有许多模板引擎可以提供或被修改以提供类似ES6样式的模板文本，例如John Resig、lodash_u2;.template和。然而，使用

新函数

似乎违反了CSP

如果

var

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

---

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

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

---

我的第一个想法是从那里开始并修改它（即更改

mustache.tags=['${'，'}']

或a，但如果您能对这个主题有任何想法，我将不胜感激，因为关于CSP和模板的讨论似乎非常少。

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

如果您需要包含“unflicied javascript”，包含类似于

${[1,2,3].join（'，'）}

的内容，那么正如您所承认的，您显然需要一个违反CSP策略的解决方案

var templateReplace=函数（html、数据、keyTemplate）{
如果（！keyTemplate | | typeof keyTemplate！='string'| | keyTemplate.indexOf（'key'）===-1）{
keyTemplate='{key}}'；
}
return（Object.keys（data）| |[]）.reduce（function（html，key）{
var val=（数据[键]！==未定义）？数据[键]：“”；
返回html.replace（新的RegExp（keyTemplate.replace（'key'，key），'gi'），val）；
}，html）；
};
//演示1，使用{{key}}语法
（功能（）{
var li=[{text:'one'}，{text:'two'}，{text:'two'}].map（函数（d）{
返回templateReplace（“
项：{{text}}
”，d）；
});
document.querySelector（“#result1”）.innerHTML=li.join（“\n”）
}())
//演示2，使用${key}语法
（功能（）{
var helloWorld=templateReplace（'${hello}${world}'，{hello:'hello'，world:'world！''，\\${key}'）；
document.querySelector（“#result2”）.innerHTML=helloWorld；
}（））

demo 1-{{key}语法
演示2-${key}语法

库正是这样做的。版本6支持设置自定义打开和关闭标记（

${

和

}

，而不是

{{

和

}}

），这使得它更像是模板文本的一个替代品。

“在这种情况下，性能不是一个问题。”--string.replace为回调？回调可以像

return vars[key]；

一样简单。我想值得一提的是ES6模板是CSP安全的（但请注意，它们确实会将站点暴露在脚本中）。你说的“如果

var

可以是不受限制的Javascript，那么方便是什么意思？”？