Jsplumb is not working with a Content-Security-Policy that doesn't include unsafe-inline in style-src

[jose-losada]

Hi,

I'm working with Jsplumb 2.x in a web application that is being migrated to a more restrictive Content-Security-Policy.

If I remove "unsafe-inline" from the "style-src" in the CSP, the browser is not loading the graphs because Jsplumb is using node.setAttribute("style","...") in some utility functions.

This is considered an inline style and the browser throws an error if the Content-Security-Policy doesn't allow it.

I've doing some modifications in the production build of Jsplumb and I think that with some minor changes in the following utility methods, Jsplumb will support a CSP without "unsafe-inline".

1. Modify the _pos function to return an object instead of an string.

        _pos = function (d) {
            return {
                position: "absolute",
                left: d[0] + "px",
                top: d[1] + "px",
            }
        }

2. Modify the _attr function to handle the style attribute as an object.

        _attr = function (node, attributes) {
            for (var i in attributes) {
                const attribute = attributes[i];
                if(i === "style" && typeof attribute === "object") {
                    var styleValues = Object.entries(attribute);
                    for(var j = 0 ; j < styleValues.length ; j++) {
                        var p = styleValues[j];
                        node.style[p[0]] = p[1];
                    }
                } else {
                    node.setAttribute(i, "" + attributes[i]);
                }
            }
        }

3. Replace node.setAttribute(STYLE, "") with node.removeAttribute(STYLE), I think that this change will affect to 2.x only. In the 5.x version I didn't see it.

4. Remove "style": "" when creating a svg node using _node function (and canvas in the 5.x release).

Thanks in advance for your time and for this great library.

Best regards, Jose.