Mẫu Javascript Công cụ hoạt động với Chính sách bảo mật nội dung của Chrome

Question

Tệp kê khai của Chrome API phiên bản 2 đã loại bỏ khả năng làm không an toàn-eval. Điều này có nghĩa là sử dụng hàm eval hoặc nói chung tạo một hàm từ văn bản.

Dường như hầu hết nếu không phải tất cả các Công cụ đánh dấu Javascript đều làm điều này. Tôi đã sử dụng Jaml, nhưng tôi đã thử một số khác như backbone.js (thực sự sử dụng công cụ tạo khuôn mẫu của underscore.js) mà không có may mắn.

This comment on the Chromium project dường như chỉ ra rằng có rất nhiều thư viện bị ảnh hưởng bởi điều này.

Tôi nghĩ Angular.js có chế độ an toàn CSP, nhưng Angular.js thực sự quá lớn đối với những gì chúng tôi cần. Chúng ta chỉ cần một công cụ tạo khuôn mẫu khá cơ bản và không cần các mô hình hoặc bộ điều khiển và như vậy. Có ai biết về bất kỳ động cơ templating CSP-compatbility ra khỏi đó?

Answer 1

Giải pháp tốt nhất cho vấn đề này là biên dịch trước các mẫu của bạn trước khi bạn triển khai tiện ích. Cả hai handlebarsjs và eco cung cấp tính năng biên dịch trước làm tính năng. Tôi thực sự đã viết một blog post mà đi vào chiều sâu hơn.

Answer 2

Bạn hoàn toàn nên sử dụng biên dịch trước theo khuyến cáo của Mathew cho các mẫu vừa và lớn. Đối với các mẫu rất nhỏ, chúng tôi đang sử dụng mẫu này:

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

Triển khai này không sử dụng eval, nhưng sẽ yêu cầu gạch dưới.