Avoid tags being intepreted data passed to templates

[ghost]

To avoid generating javascript that contains tags and therefore breaks a page (or worse xss) sanitise the data coming in.

e.g.

from nvd3 import pieChart
type = 'pieChart'
chart = pieChart(name=type, color_category='category20c', height=450, width=450)
xdata = ["</script>Orange", "Banana", "Pear", "Kiwi", "Apple", "Strawberry", "Pineapple"]
ydata = [3, 4, 0, 1, 5, 7, 3]
extra_serie = {"tooltip": {"y_start": "", "y_end": " cal"}}
chart.add_serie(y=ydata, x=xdata, extra=extra_serie)
chart.buildcontent()
print chart.htmlcontent

Will generate:

    <div id="piechart"><svg style="width:450px;height:450px;"></svg></div>
    <script>
      data_piechart=JSON.parse([{"values": [{"value": 3, "label": "</script>Orange"}, {"value": 4, "label": "Banana"}, {"value": 0, "label": "Pear"}, {"value": 1, "label": "Kiwi"}, {"value": 5, "label": "Apple"}, {"value": 7, "label": "Strawberry"}, {"value": 3, "label": "Pineapple"}], "key": "Serie 1"}]);

    nv.addGraph(function() {
        var chart = nv.models.pieChart();
        chart.margin({top: 30, right: 60, bottom: 20, left: 60});
        var datum = data_piechart[0].values;

    chart.tooltipContent(function(key, y, e, graph) {
          var x = String(key);
              var y =  String(y)  + ' cal';

              tooltip_str = '<center><b>'+x+'</b></center>' + y;
              return tooltip_str;
              });
        chart.showLabels(true);
            chart.donut(false);
    chart.showLegend(true);

        chart
            .x(function(d) { return d.label })
            .y(function(d) { return d.value });

        chart.width(450);
        chart.height(450);

            d3.select('#piechart svg')
            .datum(datum)
            .transition().duration(500)
            .attr('width', 450)
            .attr('height', 450)
            .call(chart);
        });
    </script>

This could be fixed by stripping the tags from the incoming data, another approach would be to use a filter like escapejs that is in django with JSON.parse.

diff --git a/nvd3/templates/piechart.html b/nvd3/templates/piechart.html
index 63d8ca5..cc89569 100644
--- a/nvd3/templates/piechart.html
+++ b/nvd3/templates/piechart.html
@@ -4,7 +4,7 @@
 {% extends "content.html" %}
 {% block body %}

-    data_{{ chart.name }}={{ chart.series_js }};
+    data_{{ chart.name }}={{ chart.series_js|striptags }};

     nv.addGraph(function() {
         var chart = nv.models.{{ chart.model }}(){% if chart.use_interactive_guideline %}.useInteractiveGuideline(true){% endif %};

[oz123]

@michaelgwood
Can you post here what the output will be when you strip the tags? This will make your ticket a bit more clear.

[ghost]

@oz123 strip tags does what it says on the tin, stripping the tags out. So

 data_piechart=JSON.parse([{"values": [{"value": 3, "label": "</script>Orange"},
...

becomes

 data_piechart=JSON.parse([{"values": [{"value": 3, "label": "Orange"},
...

[oz123]

@michaelgwood
Sorry, my bad one. I was writing non clear English. My question is: what will be the output?
You posted the wrong output, I'd be happy if you post the correct ouptut (the correct javascript).

[areski]

Thanks @michaelgwood merged 9408cee