Powerline or Underline to always avoid all variables?

Question

I am new to Backbone and helping to maintain the app. I would like that by default in all normal situations, backbone escapes model data to avoid default XSS attacks.

I know that we can do this using

<%- someModelAttribute %>

and

model.escape('attr')

to avoid data in our application, but I would like to switch it like that

<%= someModelAttribute %>

and

model.get('attr')

did the same ... So by default all existing code and future code that uses these tags and methods is escaped by default. Then I would like to introduce another model method, for example "model.getDataThatShouldBeSafeHtml", to make it 100% understandable to developers when they get data that should include HTML.

, "<% =" "model.get" , ?

, , - , !

Answer 1

, . Backbone Underscore , googled , , _.templateSettings, , Underscore. , , html , XSS. , , XSS !

, : http://jsfiddle.net/vx0pw2n0/

, , , , <%=, <%- . <% - HTML-, print. <%cleanHtml, HTML print(someVariable)

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

, Underscore , :

Require.js

// 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'
        }
    }
});

underscoreConfig.js

define(['underscore'], function (_) {
    'use strict';

    _.templateSettings = 
    {
      escape: /<%[=-]([\s\S]+?)%>/g,
      interpolate: /<%cleanHtml([\s\S]+?)cleanHtml%>/g,
      evaluate: /<%([\s\S]+?)%>/g
    };

    return _;
});

Answer 2

Backbone.Model, , . - (untested):

BaseModel = Backbone.Model.extend({

    getSafeAttributes: function() {
        var safe = {};
        _.each(this.attributes, function(key, value) {
            safe[key] = _.escape(value);
        });
        return safe;
    }

});

, render :

this.$el.html(this.template(this.model.attributes));

, :

this.$el.html(this.template(this.model.getSafeAttributes()));

, Backbone.Model.

backbone.js underscore.js , , .

Answer 3

, , .

underscore.js ?

By underlining, you can modify regex patterns to always go away, but it won’t call your model’s escape method, so you need to create your own pattern engine to do this ...

For example, you can expand the template code with underscore and develop it in your own way and use instead _.template().