Griffel, CSS-in-JS and Content-Security-Policy in Fluent UI React v9

[logicaloud]

I'd like to enable Content-Security-Policy default-src 'self'; but it seems that using CSS-in-JS currently prevents this from happening. A simple Fluent UI app with a single button triggers error Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'" in function getStyleSheetForBucket on first render.

Is there a way to enforce not using CSS-in-JS or otherwise enable Content-Security-Policy default-src 'self'; without running into problems? This is for an SPA, so a server generated nonce would not be ideal.

[layershifter]

The full error message is descriptive, do style-src 'unsafe-inline or apply nonce. Here is guidance on how to apply nonce: https://react.fluentui.dev/?path=/docs/concepts-developer-advanced-configuration--page#content-security-policies-csp

Alternatively, you can configure CSS extraction and avoid runtime insertion and need for style-src 'unsafe-inline' at all, https://griffel.js.org/react/css-extraction/with-webpack.

[logicaloud]

Thank you. As mentioned in the post, I'd like to avoid nonce and style-src 'unsafe-inline' is not ideal.

The extraction looks like an interesting option for experimental webpack setups. I'm using vite/rollup at the moment. So I think, I hang back a bit for now and follow developments in that space.