csp blocks plotly on staging release

[id2359]

dash/plotly gets blocked by our security settings in prod ( on staging build):

viz for 6.6.37:

patients:239 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' 'sha256-ILezS+pYH/m5JXDQav+PE/702qHfcybyTQN3LgCWO8Y=' 'sha256-95UDRqT5lxsVhRRfuJa6qGWsZAFhKXqS7cvo1bxVHcE=' 'nonce-C1os+RYAmOlAWr0Ai0qZjA=='". Either the 'unsafe-inline' keyword, a hash ('sha256-79N0PCus1ItTrODBcppilxJWMQWeWolzFPLtXZFXRSg='), or a nonce ('nonce-...') is required to enable inline execution.

patients:246 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' 'sha256-ILezS+pYH/m5JXDQav+PE/702qHfcybyTQN3LgCWO8Y=' 'sha256-95UDRqT5lxsVhRRfuJa6qGWsZAFhKXqS7cvo1bxVHcE=' 'nonce-C1os+RYAmOlAWr0Ai0qZjA=='". Either the 'unsafe-inline' keyword, a hash ('sha256-emeTF2a3X40J0nFSPvpt1OLLXerDe/PvLorOzUezxdY='), or a nonce ('nonce-...') is required to enable inline execution.

rdrf.ccgapps.com.au/:9 Refused to load the stylesheet 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' 'sha256-ILezS+pYH/m5JXDQav+PE/702qHfcybyTQN3LgCWO8Y=' 'sha256-95UDRqT5lxsVhRRfuJa6qGWsZAFhKXqS7cvo1bxVHcE='". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

10Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

rdrf.ccgapps.com.au/:31 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Either the 'unsafe-inline' keyword, a hash ('sha256-jZlsGVOhUAIcH+4PVs7QuGZkthRMgvT2n0ilH6/zTM0='), or a nonce ('nonce-...') is required to enable inline execution.

rdrf.ccgapps.com.au/:1 Refused to load the stylesheet 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' 'sha256-ILezS+pYH/m5JXDQav+PE/702qHfcybyTQN3LgCWO8Y=' 'sha256-95UDRqT5lxsVhRRfuJa6qGWsZAFhKXqS7cvo1bxVHcE='". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

DevTools failed to load source map: Could not load content for https://rdrf.ccgapps.com.au/cicclinical/static/js/vendor/underscore-min.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[id2359]

plotly/dash#1794

[id2359]

A comment on the above ticket suggests this can be fixed by using the "strict" plotly js bundle:

https://github.com/plotly/dash/blob/dev/CHANGELOG.md#230---2022-03-13

[id2359]

comment there says:

Updated
plotly/dash#2016, plotly/dash#2032, and plotly/dash#2042 Widespread dependency upgrades
Upgrade Plotly.js to v2.12.1 (from v2.11.0).
Feature release 2.12.0 adds minor ticks and gridlines, as well as dashed gridlines.
Patch release 2.11.1 fixes regl-based traces in strict CSP mode, however you must manually switch to the strict bundle to use this.
Patch release 2.12.1 fixes several bugs.
Upgrade black to v22.3.0 for Python 3.7+ - if you use dash[ci] and you call black, this may alter your code formatting slightly, including more consistently breaking Python 2 compatibility.
Many other mainly JS dependency upgrades to the internals of Dash renderer and components. These may patch bugs or improve performance.

[id2359]

The question is whether we can switch to this ,or is django-ploty-dash specifying it? Don't know at this stage.

[id2359]

maybe able to do this?

https://stackoverflow.com/questions/35014990/because-it-violates-the-following-content-security-policy-directive-style-src

[id2359]

Switched on CSP back again on staging just now to check

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' 'sha256-ILezS+pYH/m5JXDQav+PE/702qHfcybyTQN3LgCWO8Y=' 'sha256-95UDRqT5lxsVhRRfuJa6qGWsZAFhKXqS7cvo1bxVHcE=' 'nonce-jux+iLD9uLzl/Rx7/Ph2/w=='". Either the 'unsafe-inline' keyword, a hash ('sha256-79N0PCus1ItTrODBcppilxJWMQWeWolzFPLtXZFXRSg='), or a nonce ('nonce-...') is required to enable inline execution.

patients:246 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' 'sha256-ILezS+pYH/m5JXDQav+PE/702qHfcybyTQN3LgCWO8Y=' 'sha256-95UDRqT5lxsVhRRfuJa6qGWsZAFhKXqS7cvo1bxVHcE=' 'nonce-jux+iLD9uLzl/Rx7/Ph2/w=='". Either the 'unsafe-inline' keyword, a hash ('sha256-emeTF2a3X40J0nFSPvpt1OLLXerDe/PvLorOzUezxdY='), or a nonce ('nonce-...') is required to enable inline execution.

rdrf.ccgapps.com.au/:1 Failed to load resource: the server responded with a status of 500 ()
DevTools failed to load source map: Could not load content for https://rdrf.ccgapps.com.au/cicclinical/static/js/vendor/underscore-min.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[id2359]

The 1st inline style in question is:

 <br>Time taken: 1.193978 seconds</br>
    <div style="
    position: relative;
    padding-bottom: 50.0%;
    height: 0;
    overflow:hidden;

[id2359]

2nd inline style is the embedded iframe inline style

<iframe src="/cicclinical/dash/app/App/" style="
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    " frameborder="0" sandbox="allow-downloads allow-scripts allow-same-origin"></iframe>

[id2359]

Third error is

Refused to load the stylesheet 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE=' 'sha256-ILezS+pYH/m5JXDQav+PE/702qHfcybyTQN3LgCWO8Y=' 'sha256-95UDRqT5lxsVhRRfuJa6qGWsZAFhKXqS7cvo1bxVHcE='". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

10Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

/cicclinical/dash/app/App/:1 Refused to load the script 'https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

/cicclinical/dash/app/App/:1 Refused to load the script 'https://unpkg.com/react@16.14.0/umd/react.production.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

/cicclinical/dash/app/App/:1 Refused to load the script 'https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

/cicclinical/dash/app/App/:1 Refused to load the script 'https://unpkg.com/prop-types@15.8.1/prop-types.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

rdrf.ccgapps.com.au/:1 Refused to load the script 'https://unpkg.com/dash-bootstrap-components@0.13.1/dist/dash_bootstrap_components.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

rdrf.ccgapps.com.au/:1 Refused to load the script 'https://unpkg.com/dash-renderer@1.14.2/build/dash_renderer.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

rdrf.ccgapps.com.au/:1 Refused to load the script 'https://unpkg.com/dash-core-components@2.6.2/dash_core_components/dash_core_components.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

rdrf.ccgapps.com.au/:1 Refused to load the script 'https://unpkg.com/dash-core-components@2.6.2/dash_core_components/dash_core_components-shared.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

rdrf.ccgapps.com.au/:1 Refused to load the script 'https://unpkg.com/dash-html-components@2.0.5/dash_html_components/dash_html_components.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

rdrf.ccgapps.com.au/:1 Refused to load the script 'https://unpkg.com/dash-table@5.1.6/dash_table/bundle.js' because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-r8Ei+YwP2DFcnblmk8Dzmb7Kh1iRT/3fv8R9JsfGd/Y='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.