Webpack style-loader appendChild no CSP friendly

Question

Content Security Policy (CSP) doesn't like how webpack's style-loader is using appendChild. Any ideas how to customize these tools to work together?

Answer 1

There is a new attr option in style-loader allowing you to add custom attributes to the <script> tag. I am using it to add a nonce attr :

{
  loader: 'style-loader',
  options: {
    attrs: {
      nonce: 'devOnly',
    }
  }
}

Then I added this nonce to my CSP policy, only for the development environment (you should use ExtractTextPlugin for production anyway) : style-src 'self' 'nonce-devOnly'