Mechanizmy szablonów Javascript, które działają z polityką bezpieczeństwa treści Chrome

Question

Manifest w wersji 2 Chrome API usunął możliwość wykonywania niebezpiecznej ewaluacji. Oznacza to użycie funkcji eval lub generalnie dynamiczne tworzenie funkcji z tekstu.

Wygląda na to, że większość, jeśli nie wszystkie, mają to zrobić. Używałem Jamla, ale spróbowałem kilku innych, takich jak backbone.js (który naprawdę używa mechanizmu szablonowego), bez powodzenia.

This comment on the Chromium project wydaje się wskazywać, że istnieje wiele bibliotek, które cierpią z tego powodu.

Uważam, że Angular.js ma bezpieczny tryb CSP, ale Angular.js jest naprawdę zbyt duży na to, czego potrzebujemy. Potrzebujemy tylko dość podstawowego silnika szablonowego i nie potrzebujemy modeli ani kontrolerów i takich. Czy ktoś wie o jakichkolwiek silnikach szablonowych zgodnych z CSP?

Answer 1

Najlepszym rozwiązaniem tego problemu jest wstępna kompilacja szablonów przed wdrożeniem rozszerzenia. Zarówno handlebarsjs i eco oferują wstępną kompilację jako funkcję. Tak naprawdę napisałem blog post, który idzie głębiej.

Answer 2

Powinieneś bezwzględnie używać prekompilacji zalecanej przez Mathew dla średnich i dużych szablonów. W przypadku bardzo małych szablonów używamy tego:

var template = function(message, data) { 
    if (typeof data === 'undefined') { 
    return _.partial(template, message); 
    } else { 
    return message.replace(/\{\{([^}]+)}}/g, function(s, match) { 
     var result = data; 
     _.each(match.trim().split('.'), function(propertyName) { 
     result = result[propertyName] 
     }); 
     return _.escape(result); 
    }); 
    } 
}; 

var data = { 
    foo: 'Hello', 
    bar: { baz: 'world!' } 
}; 

// print on-the-fly 
template('{{foo}}, {{bar.baz}}' args); // -> 'Hello, world!' 

// prepare template to invoke later 
var pt = template('{{foo}}, {{bar.baz}}'); 
pt(args); // -> 'Hello, world!' 

Ta implementacja nie używa eval, ale będzie wymagać podkreślenia.