plotly / plotly/plotly.js

Strict CSP breaks bold tags in annotation text

Open
#7,380 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P2
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:
  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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.