anvaka / anvaka/ngraph.forcelayout

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

Open
#70 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
215
Forks
33
PR merge metrics
No merged PRs in 30d

Description

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:
```typescript
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 ()
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!

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the browser CSP failure with the example in the issue, then inspect generateCreateBody.js, createPhysicsSimulator.js, and index.js along the reported stack. Determine whether the layout can operate without new Function() under the stated policy; done means the behavior is verified and either CSP-compatible execution is available or the limitation is clearly documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
security, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.