jacomyal / sigma.js

A JavaScript library aimed at visualizing graphs of thousands of nodes and edges
https://www.sigmajs.org/
MIT License
11.29k stars 1.59k forks source link

Customizable crossorigin policy in ImageNode to support authentification #1403

Closed TheBigRoomXXL closed 4 months ago

TheBigRoomXXL commented 9 months ago

Issue

I use Sigma with NodeImageProgram to render images on the graph, but my images are protected by authentication as they are private. Authentication is managed by cookies that are automatically added by the browser on every request, except for Sigma unfortunately.

This is caused by line 95 of src/rendering/webgl/programs/node.image.ts:

 image.setAttribute("crossOrigin", "");

According to MDN, setting the crossorigin policy to "" is equivalent to setting it to "anonymous" wich prevent the browser from using cookie on the request.

Proposed solution

I would like a way to configure the cross-origin policy so that I can access private images. One place where this could be done is by passing a crossorigin argument to the `getNodeProgramImage' function. Another place where it might make sense is perhaps in the graph setting.

If either of these solutions is okay with you, I can volunteer to make a pull request

Current work around

I tried to copy node.image.ts , update the import and change the crossorigin policy but I get Uncaught (in promise) TypeError: WebGL2RenderingContext.getAttribLocation: Argument 1 is not an object. NodeImageProgram node-image-renderer.ts:242 . gist for reference. I guess my imports are wrong as thats the only thing I changed but I am not sure. Even if that worked I don't think it's future proof as it could easily break with future updates.

Instead I just opened the file in node_module and changed the crossorigin direcly. It works, but it's not a long term solution at all.

Thank you for the work, SigmaJS is an awesome library.

jacomyal commented 4 months ago

I merged your PR about this issue, thanks a lot for your contribution!