Repository navigation
Strict CSP breaks bold tags in annotation text #7380
Description
Using the new strict CSP support breaks bold tags in annotation text.
Steps to reproduce:
- Include the plotly.css file.
- Content Security Policy that disallows inline stylesheets.
- Annotations where the text includes
<b>tag.
I've reproduced this problem in Vue 3 with Plotly 3.0.1 here: https://stackblitz.com/edit/vitejs-vite-1gco7d7q?file=src%2Fcomponents%2FPlotlyExample.vue
The Plotly code is like so, with bold tags around the text annotations X axis and Y axis
Plotly.newPlot(plotlyContainer.value, [{ x: [1, 2, 3], y: [2, 1, 2] }], {
annotations: [
{
xref: 'paper',
yref: 'paper',
x: 0,
xanchor: 'right',
y: 1,
yanchor: 'bottom',
text: '<b>X axis</b> label',
showarrow: false,
},
{
xref: 'paper',
yref: 'paper',
x: 1,
xanchor: 'left',
y: 0,
yanchor: 'top',
text: '<b>Y axis</b> label',
showarrow: false,
},
],
});
CSP:
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; img-src 'self' data: blob:; style-src 'self' 'sha256-jehvI5/Zi1PSH21Fi6ZfQYAtiGucyVGUH4ziRLU+Bfc=';"
/>
(NOTE: because of how the Vite dev server works, I need to include the sha256 checksum of the plotly-3.0.1.css file, in a production build it wouldn't be necessary.)
Expected result:
I produced this image by commenting out the CSP meta tag in the reproduction code linked to above.
Actual result:
Activity
gvwilson commentedon Feb 28, 2025
thanks for flagging this @inari-mchristie - I'll try to get someone to dig into it in the next cycle.
inari-mchristie commentedon Apr 15, 2025
@gvwilson so I happened to see this PR #7256 which seems related to my problem. So I tried it out locally and it does indeed fix my issue, FWIW. Is there any chance that PR will be merged soon?
gvwilson commentedon Apr 15, 2025
thanks for the feedback @inari-mchristie - I'll see what we can do.