apache
[Bug] Tree chart with tooltips is not compliant with strict CSP directives for styles
Version
5.5.0.rc.1
Link to Minimal Reproduction
https://github.com/undeletable/echarts-tree-tooltip-csp-example
Steps to Reproduce
- Choose chart renderer: canvas or SVG.
- 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
You are welcomed to make a pull request similar to https://github.com/ecomfe/zrender/pull/1030 . This should help solve the problem sooner.
Same issue for type: 'heatmap'. src\component\tooltip\TooltipHTMLContent.ts.
Similar problem but with unsafe-eval
The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.
To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.
If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.
new Function("tag","class EChartsElement extends HTMLElement{__dispose=null;disconnectedCallback(){this.__dispose&&(this.__dispose(),this.__dispose=null)}}customElements.get(tag)==null&&customElements.define(tag,EChartsElement);")(__)
