webpacker and injectStylesIntoStyleTag.js breaks CSP

Viewed 887

My ruby on rails app's CSP was working perfectly until I added webpacker. Now I get this:

Content Security Policy: The page’s settings observed the loading of a resource at inline (“style-src”). A CSP report is being sent. injectStylesIntoStyleTag.js:117
Content Security Policy: The page’s settings observed the loading of a resource at inline (“style-src”). A CSP report is being sent. injectStylesIntoStyleTag.js:190

The code in question looks like this:

function insertStyleElement(options) {
  var style = document.createElement('style');
  
  ...

  if (typeof options.insert === 'function') {
    options.insert(style);
  } else {
    var target = getTarget(options.insert || 'head');

    if (!target) {
      throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
    }

    target.appendChild(style); //LINE 117//
  }

  return style;
}

And:

function applyToTag(style, options, obj) {
  var css = obj.css;

  ...

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    while (style.firstChild) {
      style.removeChild(style.firstChild);
    }

    style.appendChild(document.createTextNode(css)); //LINE 190//
  }
}

How do I add a nonce? This says to add __webpack_nonce__ = 'random'; to my entry file ( in this case app/javascript/packs/application.js), yet adding that nonce to my csp file has no effect on the style-src violation. Which in this case, looks like this: config.style_src :self, 'https://fonts.googleapis.com', 'nonce-random'

1 Answers

I somehow wasn't able to find the injected styles in source, but the answer was to open the page in Chrome (I was using Firefox) and copy the sha-256 hash from the console log into the app's CSP.

Related