From 1356a1f10121c5c7cd9f8a8aa1ac4408fb2743c7 Mon Sep 17 00:00:00 2001 From: Jeldrik Hanschke Date: Mon, 31 Dec 2018 15:07:11 +0100 Subject: [PATCH] fix: injecting style element violates CSP 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 --- src/platforms/platform.dom.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/src/platforms/platform.dom.js b/src/platforms/platform.dom.js index c70d73963aa..b21c5bdcbbb 100644 --- a/src/platforms/platform.dom.js +++ b/src/platforms/platform.dom.js @@ -304,17 +304,12 @@ function removeResizeListener(node) { } } -function injectCSS(platform, css) { +function injectCSS(css) { // https://stackoverflow.com/q/3922139 - var style = platform._style || document.createElement('style'); - if (!platform._style) { - platform._style = style; - css = '/* Chart.js */\n' + css; - style.setAttribute('type', 'text/css'); - document.getElementsByTagName('head')[0].appendChild(style); - } - - style.appendChild(document.createTextNode(css)); + var linkElement = document.createElement('link'); + linkElement.setAttribute('rel', 'stylesheet'); + linkElement.setAttribute('type', 'text/css'); + linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(css)); } module.exports = { @@ -328,7 +323,7 @@ module.exports = { initialize: function() { var keyframes = 'from{opacity:0.99}to{opacity:1}'; - injectCSS(this, + injectCSS( // DOM rendering detection // https://davidwalsh.name/detect-node-insertion '@-webkit-keyframes ' + CSS_RENDER_ANIMATION + '{' + keyframes + '}' +