anvaka / anvaka/ngraph.forcelayout
can't run in browser without adding `unsafe-eval` to site CSP
- 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