Utilizing a React UI with material-ui version 4, the web server is embedded within a JVM application during Production. Following npm build for the UI, the bundle is deployed alongside the server side code.
An essential requirement involves implementing Content-Security-Policy, where utilizing a nonce with a static value is permissible. To achieve this, I set the header in the server-side code and followed guidelines from the Material UI site at https://v4.mui.com/styles/advanced/#how-does-one-implement-csp.
The approach involved including a nonce in the meta tag within index.html:
<html><head><meta property="csp-nonce" content="mynoncevalue" />On the server side, I sent the below CSP:
"default-src 'self' https://mywebserver.mydomain.com;script-src 'self' https://mywebserver.mydomain.com;style-src 'self' 'nonce-mynoncevalue';"While the UI renders, a console error surfaces:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-mynoncevalue'". To enable inline execution, either use the 'unsafe-inline' keyword, a hash (...), or a nonce ('nonce-...').Upon clicking on the "Issues" button and examining the "1 page error," clicking on the "Element" icon reveals an element in the "Elements" panel resembling my index.html with numerous added tags inside. The highlighted element reads as follows:
<style id="muiDetectElementResize" type="text/css"&g;(...)</style>Curiously, above this element are several style elements like:
<style data-jss data-meta-"Mui(Something)" nonce>(...)</style>If anyone can suggest where the suspect "style" tag (with id="muiDetectElementResize") may originate from and how to include the nonce similar to the "data-jss" tags, your insights would be appreciated.