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

rs178 · 2022-02-09T14:17:46Z

rs178
Feb 9, 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

// .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!

srmagura · 2022-02-09T15:21:01Z

srmagura
Feb 9, 2022

Storybook currently uses Emotion 10 to render its UI, so I would guess that the <style> tags in the <head> are from the Storybook UI, not your components.

Rendering CacheProvider in a decorator is usually good, but in this case, it will only affect Emotion styles added by YOUR components. The Storybook UI will be unaffected.

Could you elaborate on the Content Security Policy errors you are getting? I have not experienced that error myself.

3 replies

rs178 Feb 9, 2022
Author

@srmagura thank you, yeah you're right, I used style-src 'self' for the demo iframe headers, and because of Storybook adding emotion styles, it throws sheet.browser.esm.js: Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'
So in this case, is there any way to add nonce attribute to storybook generated styles in header?

srmagura Feb 9, 2022

So in this case, is there any way to add nonce attribute to storybook generated styles in header?

I believe this would require Storybook to expose a way to pass options to their Emotion cache. I took a brief look at their docs and did not see a way to do this.

Sorry if this is a dumb question — why do you need Content Security Policy for your Storybook? What problem is it solving?

Jaaap Jul 23, 2025

The nonce must never be exposed to the javascipt side as that defeats the entire purpose of it.

why do you need Content Security Policy for your Storybook? What problem is it solving?

The CSP is usually determined by the security people, not the actual front-end developers that use MUI / Storybook.
(which does not mean i don't agree with a strict CSP - that does make sense)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

rs178 Feb 9, 2022

Replies: 1 comment · 3 replies

Uh oh!

srmagura Feb 9, 2022

Uh oh!

rs178 Feb 9, 2022 Author

Uh oh!

srmagura Feb 9, 2022

Uh oh!

Jaaap Jul 23, 2025

rs178
Feb 9, 2022

Replies: 1 comment 3 replies

srmagura
Feb 9, 2022

rs178 Feb 9, 2022
Author