Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Request: Make it possible to pass 'nonce' to the @emotion/cache #17468

Closed
rs178 opened this issue Feb 10, 2022 Discussed in #17467 · 5 comments
Closed

Request: Make it possible to pass 'nonce' to the @emotion/cache #17468

rs178 opened this issue Feb 10, 2022 Discussed in #17467 · 5 comments
Labels
feature request theming

Comments

@rs178
Copy link

rs178 commented Feb 10, 2022

Discussed in #17467

Originally posted by Radiance888 February 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!
@andy-blum
Copy link

We're running into a similar issue - we'd like to add a mock CSP to our storybook bundle so that we can test component compatibility in PRs. Right now, there's not a great way to do that.

We can add a CSP via a meta tag in preview-head.html

<meta http-equiv="Content-Security-Policy" content="style-src 'self';">

And this will block all inline styles or linked stylesheets that aren't explicitly allowed. For more information on the style-src directive in a content security policy, see MDN.

The problem with this, however, is that the CSP blocks inline styles including <style> tags and style="" attributes. Since emotion is injecting a bunch of style tags, all of its styles are blocked, making a lot of the storybook "shell" styles break.

I asked for some help on the Storybook Discord:

The manager creates a new emotion cache with the key sto, and if I edit this object in the webpack-bundled version, I'm able to inject nonce: 'myNonceKey' and set the nonce keys of these styles.

https://github.com/storybookjs/storybook/blob/next/code/ui/manager/src/index.tsx#L21

@JReinhold responded with:

Great detective work! It doesn't look like it's currently possible to set the nonce in the emotion styles, based on what I see in the source. While @storybook/theming does export createCache from Emotion, which would be needed to add the nonce, I don't see any way a user would be able to take that cache and override the default one.

I think you should create a feature request. I don't fully understand what the nonce does, but since it's mentioned directly in the Emotion docs I acknowledge that it is a thing that people would need.

@JReinhold JReinhold changed the title How to pass 'nonce' to the @emotion/cache which is a dependency of @emotion/core in storybook? Request: Make it possible to pass 'nonce' to the @emotion/cache Dec 2, 2022
@ndelangen
Copy link
Member

In storybook 7.0 beta emotion is completely bundled in, this should make this issue obsolete.

If these's still something we need to do on our side, please re-open.

@andy-blum
Copy link

It'll be a while before we have an opportunity to try this out, but thank you!

@andy-blum andy-blum mentioned this issue Jul 28, 2023
Open
@bozdoz
Copy link

bozdoz commented Mar 21, 2024

In storybook 7.0 beta emotion is completely bundled in, this should make this issue obsolete.

If these's still something we need to do on our side, please re-open.

Is there a documented approach to adding nonce to emotion? I'm not understanding how completely bundling in emotion makes this issue obsolete.

The idea of adding a CacheProvider in a decorator still doesn't work with Storybook 7. Is this fixed in Storybook 8? What is the fix, and what does a consumer of this package need to do to add a nonce to emotion's styles?

@bozdoz
Copy link

bozdoz commented Mar 25, 2024

Also, added an example here:

#26624

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request theming
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@bozdoz @ndelangen @JReinhold @rs178 @andy-blum