Open
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:
