[BUG] Forced to use 'unsafe-eval' and 'unsafe-inline' in CSP

[shadydealer]

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'

[anders-kiaer]

dash itself (at least last time I checked, which was dash<2.0) is compatible with a strict CSP. I.e. you don't need unsafe-eval or unsafe-inline for the Dash framework itself, however if you e.g. use dcc (which most/all Dash apps will) you would as you describe need unsafe-eval (unless you use a smaller plotly.js bundle), together with unsafe-inline (coming both from the way dcc is currently built, and from plotly.js, as far as I recall)..

Related issues/PR:

• Inline CSS vs. build to separate CSS file dash-core-components#752
• Separate CSS file on build dash-core-components#753
• Plotly uses inline CSS plotly.js#2355
• Security warning: avoid using function constructor. plotly.js#897

[anders-kiaer]

@shadydealer According to https://github.com/plotly/dash/blob/dev/CHANGELOG.md#230---2022-03-13 you can now avoid unsafe-eval CSP exception for all trace types (by using the plotly.js strict bundle).

[gvwilson]

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]

This isn't a Dash-specific issue, but the latest cdn version of plotly fails without unsafe-inline and unsafe-eval.

[gvwilson]

@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]

@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

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]

@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]

@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-min package: https://www.npmjs.com/package/plotly.js-strict-dist-min?activeTab=versions

@gvwilson There is no need to reopen this issue.
Thank you!

[archmoj]

Thanks @alexcjohnson. FYI - I also opened #3118 in respect to your comment above.

[BPowell76]

@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-min package: https://www.npmjs.com/package/plotly.js-strict-dist-min?activeTab=versions

@gvwilson There is no need to reopen this issue. Thank you!

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-eval and unsafe-inline are no longer needed in the CSP?