1 year ago
#157676
RS17
How to pass 'nonce' option to the @emotion/cache which is a dependency of @emotion/core?
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!
content-security-policy
storybook
emotion
storybook-addon-specifications
emotion-js
0 Answers
Your Answer