[Bug] Basic charts with tooltips not compliant with strict styles CSP directive

[keyonvandenelzen]

Version

5.5.0 (.min.js)

Link to Minimal Reproduction

https://keyonvandenelzen.github.io/echarts-tooltip-csp-violation/

Steps to Reproduce

1. Set CSP directive 'style-src' to 'self'
2. Create a bar, line or pie chart (I used the basic examples for simplicity)
3. Use any render mode (I used svg in my minimal reproduction)
4. Configure the ECharts option to display a tooltip

Current Behavior

Strict style-src CSP directive is violated and therefore the tooltip is only partially styled.

Expected Behavior

Strict style-src CSP directive should not be violated.

Environment

- OS: Windows 11, Version 23H2, OS Build 22631.3447
- Browser: Chrome 124.0.6367.207
- Framework: vanilla JS

Any additional comments?

Similar issue has been reported previously. Used @undeletable's minimal reproduction and issue format as a basis for this one.

[keyonvandenelzen]

I have found a workaround for this issue. Using a custom tooltip formatter prevents inline styles from being used and thus the CSP directive is not violated.

[sammajeed]

I have found a workaround for this issue. Using a custom tooltip formatter prevents inline styles from being used and thus the CSP directive is not violated.

Apparently this workaround doesn't fix the issue. Browser still gives the warning about CSP inline-style