Strict CSP breaks bold tags in annotation text

[inari-mchristie]

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:

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

Actual result:

[gvwilson]

thanks for flagging this @inari-mchristie - I'll try to get someone to dig into it in the next cycle.

[inari-mchristie]

@gvwilson so I happened to see this PR #7256 which seems related to my problem. So I tried it out locally and it does indeed fix my issue, FWIW. Is there any chance that PR will be merged soon?

[gvwilson]

thanks for the feedback @inari-mchristie - I'll see what we can do.