fix: injecting style element violates CSP

[jelhan]

Using a link element is also recommended approach linked StackOverflow
question. Code is mostly a copy and paste from this answer.

Fixes #5208 together with #5909

[jelhan]

injectCSS() is only called once so we don't have to care about caching created element.

[etimberg]

The reason this cached is for the case of multiple charts on a single page. We only want 1 style element then

[jelhan]

But the styles should be injected multiple times? Please note that style.appendChild(document.createTextNode(css)); wasn't part of that if.

[simonbrunel]

No, the style in platform.initialize() shouldn't be injected multiple times, but injectCSS() could be called multiple time to inject different style under the same style element. That's not the case currently but that could change so injectCSS() still need to be able to be called multiple times (which I guess is still the case).

[jelhan]

It's still possible to call injectCSS() multiple times but that will cause multiple link elements to be added. I didn't benchmark but I guess this is better from a performance perspective cause replacing may cause a more expensive rerendering.

[simonbrunel]

Tests are failing. Can you also share a live example that shows the CSP issue resolved?

[jelhan]

Tests are failing.

Missed to append the link element to document. 😲 Fixed that one. Tests are passing now.

Can you also share a live example that shows the CSP issue resolved?

I'm not quite sure if setting CSP is possible in JS Fiddle and similar services. Will investigate that one next year. 😆

[jelhan]

This fix still violates CSP:

Refused to load the stylesheet 'data:text/css;charset=UTF-8,%40-webkit-keyframes%20chartjs-render-animation%7Bfrom%7Bopacity%3A0.99%7Dto%7Bopacity%3A1%7D%7D%40keyframes%20chartjs-render-animation%7Bfrom%7Bopacity%3A0.99%7Dto%7Bopacity%3A1%7D%7D.chartjs-render-monitor%7B-webkit-animation%3Achartjs-render-animation%200.001s%3Banimation%3Achartjs-render-animation%200.001s%3B%7D' because it violates the following Content Security Policy directive: "style-src 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-OTeu7NEHDo6qutIWo0F2TmYrDhsKWCzrUgGoxxHGJ8o='". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Here is a live example: https://codepen.io/anon/pen/EGoggR

I'm sorry for the noise. Will dig deeper in this topic and try to come up with another solution.