Webpack样式加载器appendChild没有CSP友好

Question

内容安全策略（CSP）不喜欢webpack的样式加载器如何使用eval。任何想法如何定制这些工具来协同工作？

Answer 1

样式加载器中有一个新的attr选项，允许您向<script>标记添加自定义属性。我用它来添加nonce attr：

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

然后我将此nonce添加到我的CSP策略中，仅用于开发环境（无论如何，您应该使用ExtractTextPlugin进行生产）： style-src 'self' 'nonce-devOnly'