2

使用 storybook 进行 preact 演示和 webpack 捆绑 @emotion/core -> @emotion/cache -> @emotion/sheet 将样式插入 iframe 标头导致多个 CSP 错误，如下所示

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

我尝试检查以下文档 - 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传递随机数，但我们不在任何组件中创建 StyleSheet / createCache，但 webpack 将 package.json 中的所有依赖项捆绑为主题的一部分，并应用默认选项（ nonce - undefined )

我尝试将 CacheProvider 添加到全局的故事书装饰器中，如下所示

// .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>
  ),
];

我可以看到缓存块已呈现，但标头样式未使用 nonce 值更新。如果我在这里遗漏了任何东西，或者如果有另一种方法可以通过 nonce 来传递情感风格，请告诉我！谢谢！

4

0 回答 0