Repository navigation
[BUG] Forced to use 'unsafe-eval' and 'unsafe-inline' in CSP #1794
Description
Describe your context
python 3.8
dash 2.0.0
dash-bootstrap-components 1.0.0b3
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table 5.0.0
Describe the bug
I'm trying to setup a dash with flask along with talisman like so:
server = flask.Flask(__name__)
# Setup the Dash app
app = dash.Dash(
"Test App",
suppress_callback_exceptions=True,
external_stylesheets=[dbc.themes.BOOTSTRAP],
server=server,
)
flask_talisman.Talisman(
server,
content_security_policy= {
"default-src": [
"'self'",
...
],
"style-src": [
"'self'",
...
],
"img-src": [
"'self'",
...
],
"script-src": [
"'self'",
...
] + app.csp_hashes(),
}
)But the following errors occur in Firefox 92.0:
Uncaught EvalError: call to eval() blocked by CSP
js http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_0_0m1633506978.dev.js:7383
__webpack_require__ http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_0_0m1633506978.dev.js:7440
<anonymous> http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_0_0m1633506978.dev.js:7523
<anonymous> http://localhost:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_0_0m1633506978.dev.js:7527
dash_renderer.v2_0_0m1633506978.dev.js:7383:1
Some cookies are misusing the recommended “SameSite“ attribute 2
Uncaught ReferenceError: DashRenderer is not defined
<anonymous> http://localhost:8050/:30
localhost:8050:30:16
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). dash_renderer.v2_0_0m1633506978.dev.js:7383
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). input.css:38:47
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). input.css:20:12
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). logout.css:40:47
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). logout.css:20:12
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). react-select@1.0.0-rc.3.min.css:40:47
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). react-select@1.0.0-rc.3.min.css:20:12
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). _datepicker.css:40:47
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). _datepicker.css:20:12
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). react-dates@20.1.0-fix.css:40:47
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”). react-dates@20.1.0-fix.css:20:12
And the only way I could get them to work is by setting the content security policy like so:
content_security_policy = {
"default-src": [
"'self'",
...
],
"style-src": [
"'self'",
"'unsafe-inline'",
...
],
"img-src": [
"'self'",
...
],
"script-src": [
"'self'",
"'unsafe-eval'",
...
] + app.csp_hashes(),
}Note the 'unsafe-eval' in the script-src directive and the 'unsafe-inline' in the style-src directive.
However this is bad
The reason is that all of those files have either an Python eval() statement in them or, in the case of the stylesheets, are inserting style elements dynamically.
Expected behavior
Should be able to define CSP without having to use 'unsafe-eval' and 'unsafe-inline'
Activity
anders-kiaer commentedon Oct 6, 2021
dashitself (at least last time I checked, which wasdash<2.0) is compatible with a strict CSP. I.e. you don't needunsafe-evalorunsafe-inlinefor the Dash framework itself, however if you e.g. usedcc(which most/all Dash apps will) you would as you describe needunsafe-eval(unless you use a smallerplotly.jsbundle), together withunsafe-inline(coming both from the waydccis currently built, and fromplotly.js, as far as I recall)..Related issues/PR:
anders-kiaer commentedon May 2, 2022
@shadydealer According to https://github.com/plotly/dash/blob/dev/CHANGELOG.md#230---2022-03-13 you can now avoid
unsafe-evalCSP exception for all trace types (by using theplotly.jsstrict bundle).gvwilson commentedon Jul 23, 2024
Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson
BPowell76 commentedon Jan 5, 2025
This isn't a Dash-specific issue, but the latest cdn version of plotly fails without unsafe-inline and unsafe-eval.
gvwilson commentedon Jan 6, 2025
@BPowell76 thanks for the report - when you say "the latest cdn version of plotly" can you please tell us exactly which version you're getting? is it the latest release candidate of plotly.js? thanks - @gvwilson
BPowell76 commentedon Jan 6, 2025
I'll have to look into it later (at day job), but it's whatever version is being pulled down from https://cdn.plot.ly/plotly-latest.min.js.
alexcjohnson commentedon Jan 6, 2025
@archmoj we really need to mark plotly-latest with a console warning.
@BPowell76 plotly-latest is the end of the v1.x line. Starting in v2.0 we stopped updating this so that the major update and following updates don't accidentally break existing projects. Please update your project to use a specific version from the CDN.
archmoj commentedon Jan 6, 2025
@BPowell76 Please note you need to use latest (v2 or higher) and strict versions which is now at v2.35.3.
Here is the link to this specific version : https://cdn.plot.ly/plotly-strict-2.35.3.min.js
Since v2 and to avoid breakages of many websites that used to depend on
plotly-latest, these files are no longer updated.Also see latest versions from
plotly.js-strict-dist-minpackage: https://www.npmjs.com/package/plotly.js-strict-dist-min?activeTab=versions@gvwilson There is no need to reopen this issue.
Thank you!
archmoj commentedon Jan 6, 2025
Thanks @alexcjohnson. FYI - I also opened #3118 in respect to your comment above.
BPowell76 commentedon Jan 7, 2025
Thanks for the heads up. I will get that updated. I'm passing it in to my static website made using Hugo because I like those interactive charts for some of the stuff I write about.
So with the newest version,
unsafe-evalandunsafe-inlineare no longer needed in the CSP?