Strict CSP breaks bold tags in annotation text
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 18.3k
- Forks
- 2k
- Merge moyen
- 2 j 12 h
- PR mergées (30 j)
- 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:
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par la reproduction Vue 3 liée et l’inclusion de plotly.css, puis suivez la manière dont Plotly.newPlot rend le texte d’annotation contenant des balises sous la CSP fournie. Vérifiez le comportement avec la reproduction et confirmez que le texte d’annotation en gras est rendu sans enfreindre la CSP stricte.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript
- Domaine
- data-visualization, frontend, security
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100