apache / apache/echarts

[Bug] Tree chart with tooltips is not compliant with strict CSP directives for styles

Open
#19,570 8 comments 6 reactions 0 assignees View on GitHub
bug en
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5.0.rc.1

### Link to Minimal Reproduction

https://github.com/undeletable/echarts-tree-tooltip-csp-example

### Steps to Reproduce

1. Choose chart renderer: canvas or SVG.
2. Hove any of the tree nodes.

### Current Behavior

CSP violation errors are thrown into browser console:
```
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-bVQ1qZaj5/CzDwbjviFi6TwwN8gOIzClb3k9BS+rOWY='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
```
The following code produces errors:
```
t.prototype.setContent = function(t, e, n, i, r) {
var o = this.el;
if (null != t) {
var a = "";
if (U(r) && "item" === n.get("trigger") && !oV(n) && (a = function(t, e, n) {
if (!U(n) || "inside" === n)
return "";
var i = t.get("backgroundColor")
, r = t.get("borderWidth");
e = Sp(e);
var o, a, s = "left" === (o = n) ? "right" : "right" === o ? "left" : "top" === o ? "bottom" : "top", l = Math.max(1.5 * Math.round(r), 6), u = "", h = hV + ":";
P(["left", "right"], s) > -1 ? (u += "top:50%",
h += "translateY(-50%) rotate(" + (a = "left" === s ? -225 : -45) + "deg)") : (u += "left:50%",
h += "translateX(-50%) rotate(" + (a = "top" === s ? 225 : 45) + "deg)");
var c = a * Math.PI / 180
, p = l + r
, d = p * Math.abs(Math.cos(c)) + p * Math.abs(Math.sin(c))
, f = e + " solid " + r + "px;";
return '

'
}(n, i, r)),
U(t))
o.innerHTML = t + a;
else if (t) {
o.innerHTML = "",
Y(t) || (t = [t]);
for (var s = 0; s < t.length; s++)
J(t[s]) && t[s].parentNode !== o && o.appendChild(t[s]);
if (a && o.childNodes.length) {
var l = document.createElement("div");
l.innerHTML = a,
o.appendChild(l)
}
}
} else
o.innerHTML = ""
}
```

### Expected Behavior

No errors should be thrown with strict `style-src` CSP directive value being used.

### Environment

```markdown
- OS:Linux Mint
- Browser: Google Chrome 121.0.6167.85, Firefox 113.0.2
- Framework: vanilla JS
```

### Any additional comments?

Similar issue was already reported: https://github.com/apache/echarts/issues/19398

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.