11

Chrome API的清單版本2已刪除了執行不安全評估的功能。這意味着使用eval函數或通常從文本動態創建函數。使用Chrome內容安全策略的Javascript模板引擎

它似乎像大多數,如果不是所有的Javascript模板引擎這樣做。我使用的是Jaml,但我嘗試了其他幾個像backbone.js(真的使用underscore.js的模板引擎),但沒有運氣。

This comment on the Chromium project似乎表明,有很多圖書館都受到這個困擾。

我認爲Angular.js具有CSP安全模式,但Angular.js對於我們所需要的實在太大了。我們只需要一個相當基本的模板引擎,不需要模型或控制器等。有誰知道任何CSP兼容性模板引擎嗎?

+1

重複? http://stackoverflow.com/questions/10744764/javascript-template-library-that-doest-use-eval-new-function – apsillers 2012-07-16 13:31:29

回答

7

此問題的最佳解決方案是在部署擴展之前預編譯模板。 handlebarsjseco都提供了預編譯功能。我實際上寫了一個更深入的blog post

+0

感謝這看起來非常有前途,只需要在審批之前多加考慮一下。 – 2012-07-20 04:48:34

+0

Google已重新允許清單2的不安全評估。請參閱http://stackoverflow.com/a/13335364/17815 – 2012-11-11 20:56:29

3

您應該絕對使用Mathew推薦的中大模板預編譯。對於極小的模板,我們使用的是:

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!' 

此實現不使用eval,但它需要下劃線。

+0

Underscore內部使用'Function'構造函數來編譯模板,該模板隱含了'eval'。請參閱https://github.com/jashkenas/underscore/blob/91632707/underscore.js#L1192-L1232 – 2013-12-12 13:39:07

+1

此實現不使用'_.template'方法,該方法具有'eval'依賴性(其他下劃線方法是精細)。我們正在使用它與內容安全策略並且很好地工作。 – 2013-12-12 16:23:25

+0

對不起,我誤解了你最後的評論。我錯誤地將其解釋爲「下劃線的'_.template'不使用eval」。你是完全正確的:你提出的實現不使用'eval'。 – 2013-12-12 16:25:22