Javascript 强制主干或下划线始终转义所有变量?
我是主干网新手,正在帮助维护一个应用程序。我希望在所有正常情况下,主干都默认为转义模型数据,以帮助默认情况下避免XSS攻击 我知道我们可以使用Javascript 强制主干或下划线始终转义所有变量?,javascript,backbone.js,xss,Javascript,Backbone.js,Xss,我是主干网新手,正在帮助维护一个应用程序。我希望在所有正常情况下,主干都默认为转义模型数据,以帮助默认情况下避免XSS攻击 我知道我们可以使用 <%- someModelAttribute %> 在我们的应用程序中转义数据,但我想这样切换它 <%= someModelAttribute %> 我也这么做了。。。。因此,默认情况下,所有使用这些标记和方法的现有代码和未来代码都会在默认情况下转义。然后,我想介绍另一种模型方法,如“model.getdatathatthau
<%- someModelAttribute %>
在我们的应用程序中转义数据,但我想这样切换它
<%= someModelAttribute %>
我也这么做了。。。。因此,默认情况下,所有使用这些标记和方法的现有代码和未来代码都会在默认情况下转义。然后,我想介绍另一种模型方法,如“model.getdatathatthauldbesafeehtml”,以使开发人员在获得应包含HTML的数据时100%清楚
那么,就我所知,是否有办法切换“”主干取决于下划线提供的模板引擎 通过下划线,您可以将正则表达式模式更改为始终转义,但它不会调用模型的转义方法,因此您必须创建自己的模板引擎来完成此操作
例如,您可以从下划线中派生模板代码,并以自己的方式对其进行开发,并使用它来代替
.template()
您可以扩展主干.Model
来创建一个可重用的基类来为您实现这一点。类似这样的内容(未测试):
我猜你的渲染
函数看起来像
this.$el.html(this.template(this.model.attributes));
所以,你可以写下:
this.$el.html(this.template(this.model.getSafeAttributes()));
只需确保您的模型扩展基类,而不是主干。Model
修改
主干.js
和下划线.js
以获得类似的结果是完全可以接受的,但升级确实会带来麻烦,这就是为什么我选择基类的原因。我找到了一种简单的方法来实现它,因此默认情况下所有模板都被转义。因为主干使用下划线作为模板引擎,我在谷歌上搜索发现,您可以使用\uU4.templateSettings
自定义下划线分隔符,如前所述。请注意,如果您确保所有html都是使用这些模板编写的,那么您就可以使用所有XS。因此,在一些简单的场景中不要跳过使用模板,在这些情况下也可以使用它们来避免XS
您可以使用此小提琴进行测试:
因此,我所做的只是使其同时成为
嘿..谢谢你的建议,但我突然想到,如果模型键的“值”是一个对象,那么该对象本身就不会被转义,是吗?不,但是在这种情况下,你需要覆盖该特定mo的getSafeAttributes
方法del的类,因为模板引擎无法将对象作为值处理。
BaseModel = Backbone.Model.extend({
getSafeAttributes: function() {
var safe = {};
_.each(this.attributes, function(key, value) {
safe[key] = _.escape(value);
});
return safe;
}
});
this.$el.html(this.template(this.model.attributes));
this.$el.html(this.template(this.model.getSafeAttributes()));
<script type="text/javascript">
//
// This is the important part - The part that changes what underscore uses
// for template delimiters.
//
_.templateSettings =
{
escape: /<%[=-]([\s\S]+?)%>/g,
interpolate: /<%cleanHtml([\s\S]+?)cleanHtml%>/g,
evaluate: /<%([\s\S]+?)%>/g
};
// Test it out
var t = _.template($('#t').html());
var html = t({ title: '<b>pancakes</b>' });
$("#target").html(html);
console.log(html);
</script>
<!-- Sample Underscore Template showing different ways of using it -->
<script id="t" type="text/x-underscore">
<div><%= title %></div>
<div><%- title %></div>
<div><%safeHtmlOnly title safeHtmlOnly%></div>
<div><% print(title) %></div>
</script>
<div id="target"></div>
// When you initially setup require.js, add a new module to configure underscore
// Make it a dependency of backbone, so it'll always be loaded whenever
// backbone is used.
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscoreConfig', 'underscore', 'jquery'],
exports: 'Backbone'
},
jquery: {
exports: 'jQuery'
}
}
});
define(['underscore'], function (_) {
'use strict';
_.templateSettings =
{
escape: /<%[=-]([\s\S]+?)%>/g,
interpolate: /<%cleanHtml([\s\S]+?)cleanHtml%>/g,
evaluate: /<%([\s\S]+?)%>/g
};
return _;
});