d3js blocked by Content-Security-Policy

When the server sends a restrictive Content-Security-Policy header,

Content-Security-Policy: default-src 'self'; script-src 'self'; img-src 'self'

the following error comes up in Firefox:

Content Security Policy: The page's settings blocked the loading of a resource: An attempt to call JavaScript from a string (by calling a function like eval) has been blocked

and a similar to that of Chrome:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

The culprit is the following code, where a Function object is being created:

    dsv.parse = function(text, f) {
      var o;
      return dsv.parseRows(text, function(row, i) {
        if (o) return o(row, i - 1);
        var a = new Function("d", "return {" + row.map(function(name, i) {
          return JSON.stringify(name) + ": d[" + i + "]";
        }).join(",") + "}");
        o = f ? function(row, i) {
          return f(a(row), i);
        } : a;
      });
    };

The following replacement looks sensible to me, am I missing something?

    dsv.parse = function(text, f) {
      var o;
      return dsv.parseRows(text, function(row, i) {
        if (o) return o(row, i - 1);
        var a = function(d) {
          var r = {};
          row.forEach(function(name, i) {
            r[name] = d[i];
          });
          return r;
        };
        o = f ? function(row, i) {
          return f(a(row), i);
        } : a;
      });
    };

Best regards, uu1101.

– edit: fixed code

[curran]

Related PR https://github.com/d3/d3-dsv/pull/87

[sabatale]

Unfortunately this is still an issue for most companies with a CSP policy, I got this one today:

function objectConverter(columns) {
--
8057 | return new Function("d", "return {" + columns.map(function(name, i) {
8058 | return JSON.stringify(name) + ": d[" + i + "] \|\| \"\"";
8059 | }).join(",") + "}");
8060 | }