How to pass 'nonce' to the @emotion/cache which is a dependency of @emotion/core in storybook? #17467

rs178 · 2022-02-10T05:52:14Z

rs178
Feb 10, 2022

We're using storybook for preact demos and webpack bundles @emotion/core -> @emotion/cache -> @emotion/sheet which is inserting styles to iframe headers causing multiple CSP errors for styles like below

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

I tried checking the following docs - https://emotion.sh/docs/cache-provider, https://www.npmjs.com/package/@emotion/sheet/v/10.0.0-really-unsafe-please-do-not-use.1?activeTab=dependents to pass the nonce but we do not create StyleSheet / createCache within any component, but webpack bundles all dependencies from package.json as a part of theme and it applies default options ( nonce - undefined)

I tried adding CacheProvider to storybook decorators globally like below - ( https://storybook.js.org/docs/react/writing-stories/decorators )

// .storybook/preview.js

import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import React from 'react';

const styleCache = createCache({
  key: 'prefix',
  nonce: 'nonce-id',
});

export const decorators = [
  (Story) => (
    <div id="cache-block">
      <CacheProvider value={styleCache}>
        <Story />
      </CacheProvider>
    </div>
  ),
];

I can see cache-block is rendered but the header styles are not updated with the nonce value.
If I miss anything here or if there's another way to pass nonce for emotion-styles please let me know!
Thanks!

razor-x · 2023-04-28T06:38:54Z

razor-x
Apr 28, 2023

As far as I can tell, this it the entry point for the manager: https://github.com/storybookjs/storybook/blob/next/code/ui/manager/src/index.tsx

I do not see a CacheProvider there or anyway to hook into the entrypoint. I think in order to get CSP working with storybook, we would need something like this.

export const Root: FC<RootProps> = ({ provider, styleCache }) => (
	<CacheProvider value={styleCache}>
	  <HelmetProvider key="helmet.Provider">
	    <LocationProvider key="location.provider">
	      <Main provider={provider} />
	    </LocationProvider>
	  </HelmetProvider>
	</CacheProvider>
);

export function renderStorybookUI(domNode: HTMLElement, provider: Provider) {
  if (!(provider instanceof Provider)) {
    throw new Error('provider is not extended from the base Provider');
  }

  const styleCache = createCache(provider.styleCacheOptions)

  ReactDOM.render(<Root key="root" provider={provider} styleCache={styleCache} />, domNode);
}

Somehow, the value of provider.styleCacheOptions would need to be read in from the storybook config I guess?

Maybe there is a better way to inject the styleCache and CacheProvider using a Storybook API, but I can't find one.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to pass 'nonce' to the @emotion/cache which is a dependency of @emotion/core in storybook? #17467

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to pass 'nonce' to the @emotion/cache which is a dependency of @emotion/core in storybook? #17467

rs178 Feb 10, 2022

Replies: 1 comment

razor-x Apr 28, 2023

rs178
Feb 10, 2022

razor-x
Apr 28, 2023