Repository navigation
Revisit Plotly.js compatibility with strict CSP #7543
Description
#7109 was added in to make Plotly.js work better in strict CSP environments (specifically, ones which disallow inline CSS); however, it seems some of that work was broken by the migration to ESBuild.
For example, we no longer produce a separate plotly.css file (see recent comments on that PR).
@camdecoster recently added #7527 which makes it easier to test different CSPs in the devtools.
There's at least one obvious issue when inline styles are disallowed, which is that the modebar button styling is completely broken:
Activity
Mathlete-101 commentedon Feb 19, 2026
So in #7109 it lists that you can add a
<div id="plotly.js-style-global" class=".no-inline-styles"></div>and that will prevent addRelatedStyleRule from adding styles. However, as mentioned in this ticket, it breaks those buttons. If you want to not use unsafe-inline, however, you can instead add<style id="plotly.js-style-global" nonce="get the nonce here somehow"></style>and use the the csp nonce option to allow that inline style block. This workaround at least fixes the buttons.I was reading src/lib/dom.js and this should make addStyleRule work, but it won't necessarily fix addRelatedStyleRule. However, I don't think the
<div>workaround would fix using addRelatedStyleRule with a different uid either. I couldn't find where those functions were being used though, so idk. But this might help if you're having this issue.Also, I can't find any of this anywhere in the docs. I didn't look very hard, but I feel like if I search 'csp' in the docs, it should show a page that explains this. If someone can point me in the right direction, I'd be happy to add this information in but I also don't know if you want to cannonize this workaround.