[Bug] CSP

[QimatLuo]

Version

5.3.0

Link to Minimal Reproduction

No response

Steps to Reproduce

Update CSP header to not use unsafe-inline.

Current Behavior

Expected Behavior

No CSP error.

Environment

- OS: Windows
- Browser: Chrome
- Framework: Vue@2

Any additional comments?

Vuetify supports https://vuetifyjs.com/en/features/theme/#csp-nonce
Not sure it works for ECharts.

[HK-Zhang]

looking for solution for the same issue.

[alexisreis]

Same issue here...

[work933k]

Same here

[alxnddr]

We are also having this issue and unfortunately we are unable to use unsafe-inline

[work933k]

The issue is that the "marker" is implemented using inline styling. I implemented a workaround by creating the marker myself in the formatter:

formatter: (param: any[]) => {
        const { axisValue } = param[0] || [];

        param.forEach(({ seriesName, value, color }) => {
          // create CSP compliant marker
          const marker = `<span class="marker" data-color="${color}"></span>`;
          tooltip += `${marker} ${seriesName}: ${value}%<br />`;
        });

        return tooltip;
      },

And also the colors need to be implemented scss-part:

::ng-deep {
  .marker {
    display: inline-block;
    margin-right: 4px;
    border-radius: 10px;
    width: 10px;
    height: 10px;

    &[data-color='#F0CF84'] {
      background-color: #f0cf84;
    }

    &[data-color='#B66728'] {
      background-color: #b66728;
    }