How to add CSP nonce for emotion generated styles in storybook webpack config?

Question

We're adding style src 'self' to the HTML page and emotion is generating styles dynamically to the header like below

<head>
    <style data-emotion>
        ...
    </style>
    <style data-emotion>
        ...
    </style>
    <style data-emotion>
        ...
    </style>
    <style data-emotion>
        ...
    </style>
    ...
</head>

How to generate nonce for above styles with the below such storybook webpack config

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

https://storybook.js.org/docs/react/configure/webpack

Generally for generating nonce in webpack we do like - https://github.com/cssinjs/jss/issues/559

Emotion has the below link which tells that we can add nonce using CacheProvider, but not very clear how to implement the same - https://emotion.sh/docs/@emotion/cache#nonce

It will be helpful if anyone can tell hints regarding setting nonce in storybook webpack config for emotion styles

How to add CSP nonce for emotion generated styles in storybook webpack config?

0 Answers0