4

emotion styles are being added to header by story book like below

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

CSP errors are being thrown because of the styles added to headers by emotion in storybook.

Emotion has a documentation of how to add nonce to styles - https://emotion.sh/docs/@emotion/cache#nonce-string

But how do we add this nonce to the theme which is added by storybook?

How to add nonce / avoid CSP issue in this case? Do I miss any storybook documentation, couldn't find any info regarding the same.

RS17
  • 773
  • 1
  • 9
  • 23
  • What does the CSP error message say? – Harshal Patil Feb 02 '22 at 07:38
  • 1
    @HarshalPatil sheet.browser.esm.js:84 "Refused to apply inline style because it violates the following Content Security Policy.." with the CSP policy. Emotion is by default added by storybook theme. – RS17 Feb 02 '22 at 07:43
  • Where are you deploying this storybook? Which webserver are you using? – Harshal Patil Feb 02 '22 at 07:47
  • 1
    @HarshalPatil I want to add it from front end, currently adding the CSP rules through previewHead template storybook - https://storybook.js.org/docs/react/addons/writing-presets#presets-api – RS17 Feb 02 '22 at 07:54
  • In that case, you should considering relaxing your CSP policy to allow inline `style` tags. You can use something like this: `"content_security_policy": "default-src 'self' style-src 'self' 'unsafe-inline';" ` – Harshal Patil Feb 02 '22 at 07:57
  • @HarshalPatil thanks but no then there's no use of adding the rule, just trying to find a way to exclude emotion styles – RS17 Feb 02 '22 at 07:58
  • All CSS-in-JS solutions will suffer from this solution. Why don't you want to allow inline `style` tags? Any security risk? – Harshal Patil Feb 02 '22 at 08:01
  • 1
    @HarshalPatil yeah right, for security purpose - https://stackoverflow.com/questions/30653698/csp-style-src-unsafe-inline-is-it-worth-it – RS17 Feb 02 '22 at 08:07
  • It is novel thought to think about security, but if you have this attack then you can already assume that a bigger attack has already happened to your site! Plus it is storybook. It is for internal development need and not a critical production facing website. – Harshal Patil Feb 02 '22 at 08:11

0 Answers0