[bug] CSP Headers cause issues

[jay-linumlabs]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.1.2

wagmi Version

2.13.5

Current Behavior

Currently we get the following error

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem 'self'

It boils down to the Rainbow Kit injecting styles into the page

There is currently no way to set the nonce on the style tag forcing us to use 'unsafe-inline' which is not ideal.

Expected Behavior

being able to pass down the nonce through the <RainbowKitProvider /> so that any and all script and style tags include the nonce

<RainbowKitProvider nonce={nonce}>
....
<RainbowKitProvider />

the outcome should look like this:

Steps To Reproduce

Set your CSP headers for your application i.e.

const cspHeader = [
    `default-src 'self';`,
    `script-src 'self' 'nonce-${nonce}';`,
    `style-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com;`,
    `style-src-elem 'self'  https://fonts.googleapis.com https://fonts.gstatic.com;`,
    `font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com;`,
    `frame-src 'self';`,
    `object-src 'none';`,
  ].join(" ");
  
responseHeaders.set("Content-Security-Policy", cspHeader);

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

There was this ticket #1256 about the same thing, but no resolution and it was closed.

[linear]

RK-134 [bug] CSP Headers cause issues