Strict CSP breaks bold tags in annotation text
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
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:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Vue 3 reproduction and the plotly.css inclusion, then trace how Plotly.newPlot renders annotation text containing tags under the supplied CSP. Verify the behavior with the reproduction and confirm that bold annotation text renders without violating the strict CSP.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, frontend, security
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100