CSP: Storybook 6 uses unsafe-eval

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

  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 ```

[shilman]

Problem summary

The telejson library that serializes objects between the user’s “preview” UI and the surrounding “manager” UI uses eval to stringify & parse functions, which causes the CSP problem.

Proposed sketch of a solution

1. Telejson already has an option allowFunction that throws away functions instead of serializing them. This option is inspected in stringify. It should also be inspected in parse.

2. Furthermore, there should be a way to globally configure Storybook in .storybook/main.js. Proposal:

module.exports = {
  core: {
    serializeFunctions: false,
  }
}

1. Finally, the code in createChannel should set allowFunction globally for the channel so that every request filters out functions.

[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?