can't run in browser without adding `unsafe-eval` to site CSP

[orzechowskid]

hello,

I'm doing an investigation into ngraph.graph@20.0.1 and ngraph.forcelayout@3.3.1 to see if they can boost the performance of larger force-directed graphs in our webapp. I have a set of nodes and edges and, following the example code from the readme, am attempting to calculate the positions of these nodes using this layout:

const graph = createGraph();
edges.forEach((el) => {
  graph.addLink(el.source, el.target);
});
const layout = createLayout(graph, {
  timeStep: 0.5,
  dimensions: 2,
  gravity: -12,
  theta: 0.8,
  springLength: 10,
  springCoefficient: 0.8,
  dragCoefficient: 0.9,
});
let stable = false;
for (var i = 0; i < 10 && stable === false; i++) {
  stable = layout.step();
}

this is throwing an error in my browser console due to an unsafe-eval violation of my site's CSP:

Uncaught EvalError: 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' 'unsafe-inline".

    at new Function (<anonymous>)
    at generateCreateBodyFunction (generateCreateBody.js:15:17)
    at createPhysicsSimulator (createPhysicsSimulator.js:85:13)
    at createLayout (index.js:20:26)

I noticed that generateCreateBody.js (and several other files) use new Function() to construct some function objects for execution. I assume there is no workaround for this other than running calculations on a server? creating functions dynamically like this isn't allowed under most CSPs which follow best practices.

thanks for any advice or help you can provide!

[anvaka]

Hi @orzechowskid,

This is expected, since library compiles optimized data structures ad-hoc based on dimensionality of the space where you do layout. If your use case is limited to 2d or 3d graph layout, you can use precompiled version, which doesn't use unsafe evals and should pass your csp requirements.

Here is precompiled 2d layout:

• unminified
• minified

You can also just grab them from a CDN: https://www.jsdelivr.com/package/npm/ngraph.forcelayout?tab=files&path=dist

If you want to build your own dimension, see npm run build2d script for reference.

Please let me know if you have more questions!