security - Webpack 样式加载器 appendChild 对 CSP 不友好

Question

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

Answer 1

有一个新的attr style-loader 中的选项允许您将自定义属性添加到 <script>标签。我用它来添加 nonce属性:

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

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