Strict CSP breaks bold tags in annotation text

Abierto
#7,380 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript
Área
data-visualization, frontend, security

Línea de trabajo

Comienza con la reproducción enlazada de Vue 3 y la inclusión de plotly.css; luego rastrea cómo Plotly.newPlot renderiza texto de anotación que contiene etiquetas bajo la CSP proporcionada. Verifica el comportamiento con la reproducción y confirma que el texto de anotación en negrita se renderiza sin infringir la CSP estricta.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug P2

Using the new strict CSP support breaks bold tags in annotation text.

Steps to reproduce:
  1. Include the plotly.css file.
  2. Content Security Policy that disallows inline stylesheets.
  3. 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:

Image

I produced this image by commenting out the CSP meta tag in the reproduction code linked to above.

Actual result:

Image

Lenguaje dominante
JavaScript
Estrellas
18.3k
Forks
2k
Merge medio
2 d 12 h
PR fusionados (30 d)
28

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de plotly/plotly.js

Todos los issues de plotly/plotly.js

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.