Fix CSP Strict Style Compatibility

[shaurya-sisodia]

Fixes #2355 Plotly uses inline CSS

• Only piece of code violating the CSP strict style rule is the addStyleRule function which is appending a dynamic stylesheet to the head. In all other cases, the plotly.js is setting up a dynamic style using CSP-compliant methods.
• In the case of a CSP compliant build, we will create a static CSS stylesheet in a CSS file that applications can include on their end.
• Providing switch in the build process to enable CSP strict style build and providing a path for static CSS stylesheet relative to dist folder.
• Creating a static CSS file at command line provided path defaulting to build folder with name plot-csp.css

[alexcjohnson]

@shaurya-sisodia thanks for the investigation and the PR! It's great to know that only addStyleRule is problematic for strict CSP - from the earlier discussion I was worried that d3 selection.style was also a problem, which would have made this MUCH harder to resolve.

So given that, I wonder if we can just inline all the styles we need? There aren't that many, and you've already figured out one of the most annoying parts, the hover pseudo-selector. That would avoid having two separate builds (which is more to test & maintain) as well as requiring strict users to remember the stylesheet - easy to forget as it doesn't do all that much until you start interacting with the graph, and it seems like including an external stylesheet brings its own headaches in a strict CSP environment.

[shaurya-sisodia]

Hi @alexcjohnson

Thanks for the reply.

If we do not want to go by two builds approach. We can instead use adoptedStyleSheets and 'replaceSync' to update styling in csp compliant way for the whole document. Rather than creating a static stylesheet for a special build.

For browers i.e. IE and Safari that don't support replaceSync we can update styles directly on the HTMLElements like we are doing for modebar's dynamic styles in current fix.

[sesa529917]

Lack of support for strict CSP support is a blocker for the organization I work for.
Our corporate security systems simply won't allow us to run with unsafe-inline.
This PR resolves the issue. Please consider merging it or implementing similar strict CSP support in the library.

[archmoj]

@shaurya-sisodia Thanks very much for the PR.
Would you please fetch upstream/master and merge it into this branch?
Also I think we don't want to have a separate bundle for this.
Instead I think this should be fixed in the main bundle.

[martian111]

Hi @archmoj , I created Pull Request #7109 to address the issue I found above and to fix a few other things I found while testing this pull request. I also incorporated the fix into the main build and branched off of the latest master per your comments above. Seeing no activity from the submitter's account of this pull request for a long time now, I submitted the new pull request in hopes that it will be useful for everyone else.

[gvwilson]

closing in favor of #7109 - thank you @shaurya-sisodia and please accept our apologies for taking so long to get to this.