[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).