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

[undeletable]

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 '<div style="' + ["position:absolute;width:" + l + "px;height:" + l + "px;z-index:-1;", (u += ";" + s + ":-" + Math.round(100 * ((d - Math.SQRT2 * r) / 2 + Math.SQRT2 * r - (d - p) / 2)) / 100 + "px") + ";" + h + ";", "border-bottom:" + f, "border-right:" + f, "background-color:" + i + ";"].join("") + '"></div>'
                }(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

- 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

[Ovilia]

You are welcomed to make a pull request similar to https://github.com/ecomfe/zrender/pull/1030 . This should help solve the problem sooner.

[mmerezhko-hv]

Same issue for type: 'heatmap'. src\component\tooltip\TooltipHTMLContent.ts.