Storybook: CSP: Storybook 6 uses unsafe-eval

[ltroller]

Description

A react component library I maintain for my company deploys a storybook to our internal Github Pages (enterprise). These have headers that set a Content Security Policy (CSP) that does not include unsafe-eval. These cannot be overwritten by <meta .../> tags as the headers have a stricter policy.

After upgrading Storybook 5.3.9 to 6.0.21, the storybook will not load any more:

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'".

Uncaught TypeError: __webpack_require__(...) is not a function

Expanded screenshot below.

The problem is reproduce-able locally with a minimal config, but the original issue is with a built version on a remote server.

To Reproduce

Setup minimal storybook react

1. mkdir test-sb && cd test-sb
2. yarn init
3. yarn add react react-dom
4. npx sb init

Emulate CSP & run

1. echo "<meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self' ; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' *; media-src 'self' ; frame-src 'self';\" />" > .storybook/manager-head.html
2. yarn storybook

Expected behavior

As previous versions, Storybook should avoid leveraging unsafe-eval

Screenshot

System

Local setup
System: OS: macOS 10.15.6 CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz Binaries: Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node Yarn: 1.21.1 - ~/.yarn/bin/yarn npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm Browsers: Chrome: 85.0.4183.83 Safari: 13.1.2 npmPackages: @storybook/addon-actions: ^6.0.21 => 6.0.21 @storybook/addon-essentials: ^6.0.21 => 6.0.21 @storybook/addon-links: ^6.0.21 => 6.0.21 @storybook/react: ^6.0.21 => 6.0.21

[khanzzirfan]

Same issue I'm facing as well. I tried building storybook using below command and here are more details

build-storybook -s ./assets -c "${StoryBookConfigFolder}" -o build/docs --no-dll --quiet

Its looks like new Function syntax is causing the problem. below screenshot is from vendor bundle.js file

[khanzzirfan]

Can anyone offer help here ? or point me the direction to fix the csp error.

Its unfortunate. we have to rollback to storybook v4. just for the CSP issues.

[shilman]

@khanzzirfan this is the offending code:

https://github.com/storybookjs/telejson/blob/master/src/index.ts#L269

@ndelangen can you help guide this?

[khanzzirfan]

Also realised there is use of eval as well.
https://github.com/storybookjs/telejson/blob/master/src/index.ts#L288

[johnhunter]

Looks similar to this issue https://github.com/storybookjs/telejson/issues/18
It was closed but not completely resolved.

[khanzzirfan]

The short answer from @johnhunter is there is no way to fix this issue and to take exemption from CSP policies. @shilman any other suggestions you rekon please?

[intuitivecat]

we also cannot host SB5+ externally due to this,

@ndelangen mentioned this in the other issue report

It only depends on that (reviver) for a very select set of features,

my hope was to be able to bypass the feature as the CSP violation is at run-time and not in a code scanner. however I could not see a path to do that in the code.

[shilman]

If there were an option flag to disable this feature, would this satisfy your CSP?

[intuitivecat]

I cannot speak for others as the errors above vary , but my error stack I think it would.

react_devtools_backend.js:2273 EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' ... redacted ...

    at new Function (<anonymous>)
    at Array.revive (vendors~main.9664a462e85d088dc937.bundle.js:123)
    at JSON.parse (<anonymous>)
    at parse (vendors~main.9664a462e85d088dc937.bundle.js:123)
    at e.value (vendors~main.9664a462e85d088dc937.bundle.js:123)

I should be able to help test a proposed change, even without a release as I should be able to build storybook_static local and deploy.

[khanzzirfan]

Somehow we got csp whitelisted for new Function and eval for internally hosted storybook as workaround for now. but the exemptions is only for few months and have to renewed again with ISG department.

[ltroller]

Thanks to all for looking into this!
It's been a couple months now, so I'll go ahead and ask:
Are there any updates on the situation?