Webpack style-loader appendChild 不适合 CSP

Question

内容安全策略 (CSP) 不喜欢 webpack 的样式加载器使用appendChild. 关于如何自定义这些工具以使其协同工作有什么想法吗？

Answer 1

style-loader 中有一个新attr选项，允许您向标签添加自定义属性<script>。我用它来添加nonceattr ：

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

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