Skip to content

Commit

Permalink
fix: injecting style element violates CSP
Browse files Browse the repository at this point in the history
Using a link element is also recommended approach linked StackOverflow
question. Code is mostly a copy and paste from this answer.

Fixes chartjs#5208 together with chartjs#5909
  • Loading branch information
jelhan committed Dec 31, 2018
1 parent a8920f6 commit 90f55cc
Showing 1 changed file with 7 additions and 11 deletions.
18 changes: 7 additions & 11 deletions src/platforms/platform.dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -304,17 +304,13 @@ 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));
document.getElementsByTagName('head')[0].appendChild(linkElement);
}

module.exports = {
Expand All @@ -328,7 +324,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 + '}' +
Expand Down

0 comments on commit 90f55cc

Please sign in to comment.