Content Security Policy Issues for Tooltip

[bj00rn]

Description

Getting errors when tooltip is shown is unless unsafe-inline CSP directive is allowed.

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-xxx='), 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.

(anonymous) @ html.js:7
each @ each.js:5
html @ html.js:20
showTooltip @ billboard.js:8340
a @ billboard.js:16719
(anonymous) @ billboard.js:16751
(anonymous) @ on.js:3

Any way around this? Reluctant to allow inline styles

Steps to check or reproduce

Add meta tag to

<meta http-equiv="Content-Security-Policy" content="style-src 'self'">

[netil]

Hi @bj00rn, thanks for the report.
To fix security policy issue it needs to remove all inlined styles which aren't impossible for now.

As you already now, but you can relax your CSP to allow inlined styles by adding as:

<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'">

[danmangit]

We are facing the same issue for one of our customers. Relaxing the CSP rules might not be possible, especially in companies with high security standards. Could you please provide a fix?

[Igfig]

I've been having the same problem. It looks like there might actually be a potential fix, contrary to what @netil was saying: https://stackoverflow.com/a/29089970/4143163

Basically, instead of setting the background-color on each square with inline styles when you set the tooltip's innerHTML (e.g. <span style='background-color:#FF0000'>), you set it afterwards, using element.style.backgroundColor = "#FF0000".