-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSP: Storybook 6 uses unsafe-eval #12364
Comments
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. |
@khanzzirfan this is the offending code: https://github.com/storybookjs/telejson/blob/master/src/index.ts#L269 @ndelangen can you help guide this? |
Also realised there is use of eval as well. |
Looks similar to this issue storybookjs/telejson#18 |
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? |
we also cannot host SB5+ externally due to this, @ndelangen mentioned this in the other issue report
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. |
If there were an option flag to disable this feature, would this satisfy your CSP? |
I cannot speak for others as the errors above vary , but my error stack I think it would.
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. |
Somehow we got csp whitelisted for |
Thanks to all for looking into this! |
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
This is still a dealbreaker for many of us. It looks like everyone at my company is just staying on version 5 so they can continue publishing to github pages. I am very interested in the aforementioned option flag which disables the offending feature. |
If you want this fixed, please upvote by adding a 👍 to the issue description. We use this to help prioritize! |
Problem summaryThe Proposed sketch of a solution
module.exports = {
core: {
serializeFunctions: false,
}
}
|
Sounds good @shilman, global configuration makes sense since its only a problem for Storybooks hosted with CSP. Thanks for looking at this. |
Yeah that proposal makes sense to me! |
ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-beta.17 containing PR #16415 that references this issue. Upgrade today to the
Closing this issue. Please re-open if you think there's still more to do. |
Hi there, storybook/lib/channel-postmessage/src/index.ts Lines 61 to 90 in fd21119
I can provide a fix PR for this. |
@phobetron yes, it should def be in there. do you have a repro we can look at? |
@shilman No, nothing public, and we also can't publish to a public environment until we can get it to work without adding the Here's the module.exports = {
async webpackFinal(config) {
config.resolve.roots = [assetsPath, 'node_modules']
return config
},
staticDirs: [assetsPath],
stories: [path.resolve(storyPath, '**/*.stories.mdx'), path.resolve(storyPath, '**/*.stories.@(js|jsx|ts|tsx)')],
addons: [
'@storybook/preset-scss',
'@storybook/addon-essentials',
'@storybook/addon-links',
'storybook-addon-designs'
],
framework: '@storybook/vue3',
core: {
serializeFunctions: false,
builder: 'webpack5'
}
} Here's a list of our dependencies: "@babel/core": "^7.17.5",
"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-links": "^6.4.19",
"@storybook/builder-webpack5": "^6.4.19",
"@storybook/manager-webpack5": "^6.4.19",
"@storybook/preset-scss": "^1.0.3",
"@storybook/vue3": "^6.4.19",
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"babel-loader": "^8.2.3",
"sass": "^1.35.1",
"sass-loader": "^10.2.0",
"storybook-addon-designs": "^6.2.1",
"typescript": "^4.1.5",
"vue": "^3.2.25",
"vue-loader": "^16.8.3",
"webpack": "^5.70.0" Our Storybook instance is currently new and mostly empty, so it's safe to say there's no offending code on our end. |
@phobetron Your main.js doesn't disable function serialization which is what we added to fix the problem. Can you share your updated main.js that doesn't work? |
@shilman |
@shilman Can we expect any update on this? Is there any documentation? |
hi @phobetron sorry i missed the previous notification. please try the following to disable function serialization: https://github.com/storybookjs/storybook/blob/next/examples/react-ts/.storybook/main.ts#L26 |
Thanks @shilman! For anyone landing from a search result, here's the fix: // .storybook/main.js
module.exports = {
// ...
core: {
// ...
channelOptions: { allowFunction: false, maxDepth: 10 }
}
} |
Hi @shilman , @phobetron , I tried to add the flag, but I'm still getting the same issue. This is my main.ts |
Is there any update on the issue ? I am also facing the same issue after updating the main.ts. |
@vinay3206 what version of storybook are you using? |
@storybook/react v6.5.10
|
main.js looks like this module.exports = {
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@react-theming/storybook-addon",
],
core: {
builder: { name: 'webpack5' },
channelOptions: { allowFunction: false, maxDepth: 10 },
}
}; |
@vinay3206 did you manage to fix your issue ? I have the same on my storybook deploy on netlify, the fix didn't work neither for me. |
@clesgourgues , nope not able to solve it. We updated our CSP policy to allow it for dev env. |
Same issue here. Strangely, I don't run into the same issue with my auto generated, Stencil component based stories, using the generator script (automatedStories.js) from theksquaregroup |
Do any of you have a reproduction you can share? If there's a bug here somewhere we'd absolutely love to get it fixed. |
I just upgraded to |
My builds keep failing with the message Did things move in Storybook 7, @shilman ? |
Migration guide: https://storybook.js.org/migration-guides/7.0 |
Thanks. That gets me one step closer. Now it's crashing at
|
What version of node are you running in? Storybook 7 requires node 16 or higher. |
I'm running 14.20.1 thanks to some stupid legacy project at work that can't be easily upgraded. |
@shilman yes, your help would be much appreciated ! we are currently facing the CSP issue, after adding the Mock service worker addon. Our app is a CRA, with a craco config. The issue pops on the deployed version of our Storybook. Our
our dev dependencies :
|
@clesgourgues looks like you'll have to change your CSP, to allow script tags with inline script, this is something we started using in storybook 7.0. |
thanks @ndelangen does it mean we'll have to do it anyway if we upgrade to V7 ? |
Yea. I just realized this too, after finally upgrading everything to 7.0 earlier today. So upgrading didn't resolve the issue. It actually made it worse because now I'm presented with only a white screen and CSP errors inside the browser console. |
I remember with V6 TeleJSON was updated to make the eval technique opt in. I guess it is now necessary with v7. The way we resolved this with v6 was to relax our CSP for our Storybook hosting. We could justify that as it was only available internally. For businesses that use Storybook for public facing sites this may be a deal-breaker (it will be flagged in security audits) There is maybe a Storybook product consideration to be made. Does the value of using "unsafe-eval" techniques override the needs of some consumers of the product? Perhaps this is just something we have to live with for the convenience and great features. It might be worth making this clear in documentation so it is a known constraint when evaluating Storybook. |
Ow I might have not read the error message right @clesgourgues. You're running into the That should be fixable by Besides that, in storybook 7 we started using pure ESM in the browser including ESM in a script-tag contents, because that's a way to ensure a bunch of code is loaded and executed in the correct order.
No? This should not be the case.. if it is.. that's a bug. Would you be able to create a reproduction? |
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:
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
mkdir test-sb && cd test-sb
yarn init
yarn add react react-dom
npx sb init
Emulate CSP & run
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
yarn storybook
Expected behavior
As previous versions, Storybook should avoid leveraging
unsafe-eval
Screenshot
System
Local setup
The text was updated successfully, but these errors were encountered: