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.

2 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?

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? #2634

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

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

rs178 Feb 9, 2022

Replies: 1 comment · 2 replies

srmagura Feb 9, 2022

rs178 Feb 9, 2022 Author

srmagura Feb 9, 2022

rs178
Feb 9, 2022

Replies: 1 comment 2 replies

srmagura
Feb 9, 2022

rs178 Feb 9, 2022
Author