external stylesheets disabled by content security policy

[valentin-krasontovitsch]

Describe the bug
Injecting an external stylesheet in the __init__ function of a webviz-plugin like such

from webviz_config import WebvizPluginABC
import dash-bootstrap-components as dbc

def MySuperAwesomePlugin(WebvizPluginABC):
    def __init__(self, app: dash.Dash, project_identifier: str):
        super().__init__()
        app.config.external_stylesheets.append(dbc.themes.BOOTSTRAP)

should lead to one being able to use things like dbc.Badge and them looking nice - but the stylesheet don't get loaded. the browser console shows an error (formatted for readability):

Refused to load the stylesheet \
  'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' \
  because it violates the following Content Security Policy directive: \
  "style-src 'self' 'unsafe-inline' https://eds-static.equinor.com/". \
  Note that 'style-src-elem' was not explicitly set, so 'style-src' is \
  used as a fallback.

googling a bit what that might mean, leads to the Content-Security-Policy settings that should be set in a meta html tag. webviz-config seems to be (too?) restrictive here.

How to reproduce
Make a webviz plugin like above, use a dash-bootstrap-components component in it, observe that it isn't pretty

Expected behavior
it should be pretty

Additional context
To give some background for this particular need: my use-case is that i have some plots showing data, and there are some variables in the background. the plots (or rather the data displayed in the plots) is a function of those variables, and different user actions can change the state of the variables. I would like to display the current state of the variables (text example: RESPONSE: WOPR ) in a prominent way, perhaps even have a simple animation whenever the state changes. i thought a badge from bootstrap (or chip from EDS) might be a good choice for prominent display, but I'm of course open to other suggestions

[valentin-krasontovitsch]

this should perhaps also be seen in the context of to #537

[anders-kiaer]

Thanks for the report @valentin-krasontovitsch.

As you found out, webviz-config sets quite restrictive CSP headers (through https://pypi.org/project/flask-talisman/). If it is too restrictive is a good question. The default CSP configuration today is that the app hosts everything needed (in order to reduce risk of data exfiltration and consequences if external content is compromised at some point with malicious CSS/JS).

CSP settings can today only be configured/extended through the theme used (e.g. for Equinor's theme it is configured here). Maybe a solution would be that plugins also can access the CSP configuration and extend it if needed? 🤔

A workaround today would be to add CSS file you want the plugin project to use as an asset.

[valentin-krasontovitsch]

thanks for the response, Anders! I'm gonna check out the theme option, thanks for the pointer to the example.

I just didn't know about the theme option - before checking it out, right now, I would say that it doesn't seem necessary to expose adjusting the CSP through the plugin as well, at least from where I'm standing.

I might also just use the work around option you mention - I've discovered that this has been done previously on the same project, so it might consistent to continue in this manner O:)

[valentin-krasontovitsch]

going to close this then, as a proper solution and a workaround have been suggested.

[valentin-krasontovitsch]

ok, sorry to bug you further here, but it's a bit difficult for me to find in the docs and the code - at the moment, we setup our app by declaring plugins that inherit from WebvizPluginABC. I also see that we are building our app with --theme equinor - but how can I define my own theme and inject it into the app / plugins? or are we limited to using the themes in the installed_themes folder, as suggested by _build_webviz.py?