Библиотека шаблонов JavaScript, которая не использует функцию eval/new
Расширения Google Chrome с использованием manifest_version: 2
запрещено использовать eval
или же new Function
, Все проверенные мной библиотеки шаблонов JavaScript (mustachejs, underscorejs, шаблон jQuery, hoganjs и т. Д.) Используют new Function
, Есть ли достаточно зрелые и поддерживаемые, которые тоже не используют?
11 ответов
Оказывается, усы добавил new Function
в последнее время и использование тега 0.4.2 не имеет его. Это API немного отличается с Mustache.to_html
вместо Mustache.render
и есть вероятность некоторого снижения производительности.
Я открыл вопрос, чтобы потенциально получить new Function
удалено в будущем выпуске.
Не похоже, что Pure использует либо eval
или же new Function
,
Ответы здесь устарели, поэтому я выкладываю обновление.
С сентября Google изменил свою политику и разрешил unsafe-eval
в манифесте 2 расширения. Смотрите эту ветку и эту страницу.
Так что библиотеки используют eval()
, new Function()
и т. д. можно использовать, если unsafe-eval
включен для ваших расширений.
Это действительно зависит от того, что вы подразумеваете под "библиотекой шаблонов". Если вы просто хотите интерполяцию строк, нет необходимости eval
или же new Function
Когда вы начинаете нуждаться во встроенных структурах зацикливания, все становится сложнее.
Несколько месяцев назад я написал String.prototype.tmpl.js
Сценарий, который я использовал пару раз здесь и там, в местах, где я не против переопределения String.prototype
, В качестве статической функции вы можете использовать:
function tmpl(tmpl, o) {
return tmpl.replace(/<%=(?:"([^"]*)"|(.*?))%>/g, function (item, qparam, param) {
return o[qparam] || o[param];
});
}
Пример шаблона:<div id="bar"></div>
<script type="text/x-tmpl" id="foo">
<h1><%=title%></h1>
<p><%=body%></p>
</script>
<script>
(function () {
var foo,
bar;
foo = document.getElementById('foo');
bar = document.getElementById('bar');
bar.innerHTML = tmpl(foo.innerHTML, {
title: 'foo bar baz',
body: 'lorem ipsum dolor sit amet'
});
}());
</script>
База tmpl
Конечно, скрипт может быть изменен, чтобы использовать фрагменты документа для создания элементов DOM, но я не уверен, что он считается "библиотекой шаблонов".
Шаблоны закрытия - это библиотека шаблонов, которая не использует eval
, Шаблоны скомпилированы в JavaScript заранее, поэтому в ваше приложение включается простой файл.js, который не должен сталкиваться с проблемами CSP.
Лучшее решение этой проблемы - предварительно скомпилировать шаблоны перед развертыванием расширения. И http://handlebarsjs.com/, и eco предлагают предварительную компиляцию в качестве функции. Я на самом деле написал пост в блоге, который идет вглубь.
Может быть, вы можете написать функцию eval1:
function eval1(blah) {
var s = document.createElement("script");
s.src = blah;
document.head.appendChild(s);
document.head.removeChild(s);
}
и найти / заменить в библиотеке, которую вы хотите, но это будет обманом, верно?
Я недавно столкнулся с той же проблемой. После обновления версии манифеста мое расширение перестало работать. Я попробовал Усы, но он не смог отрисовать индекс массива и имена свойств объекта. Поэтому мне пришлось создать собственную простую, но эффективную библиотеку шаблонов Ashe, в которой нет eval
а также new Function
, Надеюсь, это кому-нибудь поможет.
https://developer.chrome.com/extensions/sandboxingEval
Не уверен, когда он был добавлен, но теперь вы можете делать песочницу в стиле Firefox в Chrome. Я портирую свое расширение Firefox, поэтому мне это нужно (поскольку у меня нет evalInSandbox:P)
Я только что попробовал Liquid от Shopify, который не вызвал ошибку CSP.
Кстати, Handlebars теперь выдает ошибку CSP.
Остальные я не пробовал.