Remove inline styles that break plots in strict CSP setups

[martian111]

Support strict Content Security Policies that don't allow unsafe inline styles by:

• Removing add/deleteRelatedStyleRule from modebar and use event listeners to emulate the on hover behavior by setting style properties directly on the element, which is allowed in strict CSP environments.
• Output the main/library-wide CSS rules that are inlined when the library loads into a static CSS file so that users can include it within their applications in an acceptable manner. This allows addRelatedStyleRule calls to fail without affecting functionality.
• Provide a way to prevent addRelatedStyleRule from running when the static CSS file is already included in the app to prevent superfluous errors in console output.
• Replace inline styles from "newplotlylogo" with attribute to set the fill color directly on the elements.

Note: The dist/plotly.css file will need to be added to the release files.

Possibly fixes #2355 Plotly uses inline CSS

This pull request is the result of reviewing and testing Pull Request #6239, which did not work properly when I tested it against the v2.34.0 release tag (the most recent release at the time of testing and over 2 years since that pull request was created). It also incorporate the comments within that pull request to improve on this one.

Expected Results

• Applications using this library within an environment with strict CSP (no unsafe inline styles allowed) should now work out-of-the-box if they include/incorporate the plotly.css into the application in a way allowed by their CSP. A separate build is not required to get this fix.
  • The browser will output an error indicating that it "Refused to apply inline style because it violates the following Content Security Policy directive" followed by the site's CSP. This can be ignored since these styles should already be included by plotly.css.
  • Further, this library's addRelatedStyleRule will also output a warning message: "Cannot addRelatedStyleRule, probably due to strict CSP..."
• To prevent the errors and warnings in the console, the following can be added in a way that is accessible in the DOM by the time this library loads:
  <div id="plotly.js-style-global" class="no-inline-styles"></div>
  This will cause the addRelatedStyleRule function to not attempt to add the inline styles.
• Users without strict CSP's should not see any change in functionality nor see the aforementioned error/warning messages.

Testing

Testing this is a bit tricky to setup, but I do have an basic sandbox created that seems to demonstrate:

• The error before this fix using the plotly-basic.js file from the v2.34.0 release.
• The fix with the plotly-basic.js patched with this pull request.

CSB has some special quirks, so the CSP was relaxed to allow things to work due to CSB specifics. However, it was not set up to permit unsafe inline styles nor does it contain the sha256 hash of styles inlined by Plotly.

See comments in the ScatterChart.tsx and index.html files.

https://kl75h2.csb.app/
https://codesandbox.io/s/kl75h2

Followup Questions

1. The dom function deleteRelatedStyleRule is no longer used anywhere else in the code. It was used by only in modebar.js before this change. Should that function be deleted?
2. The dom function addStyleRule is used in two places, both of which are accounted for in this pull request (in src/registry.js and build/plotcss.js). How should we warn developers in the future who comes across this function? Add comments and/or rename it to something like addStyleRuleUnsafelyInline?

Limitations

I don't much experience with Plotly.js and have been using it only for a simple scatter chart (like the one in the CSB above). I don't have enough experience to understand if more changes are needed beyond my simple test case and the work done in Pull Request #6239. Hopefully this is still helpful to bring this library closer to supporting strict CSP's.

[birkskyum]

@martian111 , are you able to rebase this? I'm interested in knowing how the maplibre-gl.css fares in your CSP setup. The mapbox gl css issues you resolve here will if not earlier likely be resolve at the time of v3 with the removal of the deprecated mapbox traces.

[archmoj]

@martian111 Please fetch upstream/master and merge it into this branch.
Thank you!

[martian111]

Yes, I'll try to rebase or merge from master when I get some time after work (possibly in the weekend).