在Webpack中通过代码将nonce设置为样式标签

因为我想启用内容安全策略（CSP）noncestyle 属性，所以我需要设置nonce通过代码动态调整样式。

网页包设置：

devServer: {
  contentBase: "./dist",
  watchContentBase: true,
  headers: {
    "Content-Security-Policy": "style-src 'nonce-test1'"
  }
}

但是，那nonce属性是由服务器生成的，并且不会一直相同，所以我不能硬编码nonce: test1 in style-loader.

我已经发现延迟加载风格 https://webpack.js.org/loaders/style-loader/#lazystyletag，但我还没有找到与set相关的文章或教程nonce动态属性时<style>由代码加载。

如何添加nonce to <style>通过代码？

index.ts

import styles from './styles.lazy.css';

export class MyMainClass {
  constructor(nonce) {
    loadStyle(nonce);
  }

  private loadStyle(nonce) {

    // I need to set nonce before styles are loaded, otherwise csp error will occur.
    styles.setNonceAttribute(nonce)???

    styles.use();
  }
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.lazy\.css$/i,
        use: [
          {
            loader: 'style-loader', 
            options: {
              injectType: 'lazyStyleTag', 
              attributes: {
                nonce: "initialNonce"
              }
            } 
          },
          'css-loader',
        ],
      },
    ],
  },
};

在 webpack 的下一页上 -有两种使用随机数的方法 https://webpack.js.org/loaders/style-loader/#nonce:

• 使用属性选项
• 使用webpack_nonce多变的 和代码示例。

或者它在你的情况下不起作用？