Unsafe eval in chart.js

Hello,

When including chart.js in a chrome packaged application, the following error is thrown during the graph rendering :

Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “default-src ‘self’ chrome-extension-resource:”. Note that ‘script-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

On line 1419 of Chart.js which is the new Function()call :

function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +

        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };

This is quite annoying because the CSP cannot be set for chrome packaged applications. Sandboxing or other tricks could eventually be used, but I’d rather a clean solution.

[kenston]

I followed nnick’s suggestion and converted the default string templates into functions to avoid the eval calls. The eval error is gone now.

I’m using version 1.0.1, but there should be similar options in newer versions:

// var chart = new ...

chart.options.tooltipTemplate = function(element) {
        return (element.label ? element.label + ": " : "") + element.value;
    }

chart.options.legendTemplate = function(chart) {
    var legendStr = "<ul class='" + chart.name.toLowerCase() + "-legend'>";

    for (var i=0; i < chart.segments.length; i++)
    {
        legendStr += "<li>";

        if(chart.segments[i].label && chart.segments[i].value) {
            legendStr += "<span style='background-color:" + chart.segments[i].fillColor + "'></span>" + chart.segments[i].label;
        }

        legendStr += "</li>"; 
    }

    legendStr+= "</ul>";

    return legendStr;
}

[sholsapp]

@nnnick it would be useful for newbies like myself to have an example/documentation on how to fix this. I’m not sure exactly which configuration items I need to replace to solve this issue.

Also, it seems this library is supported despite @FVANCOP comment, correct?