[bug] RainbowKit CSS styling not loading when using 'self' in Content Security Policy on Vercel

[ahkill]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

^1.0.0

wagmi Version

^1.0.1

Current Behavior

Hello team,

I'm currently experiencing an issue with CSS styling in RainbowKit when deploying on Vercel. I've specified the Content Security Policy (CSP) to 'self' in my vercel.json file. When I run the app on my local machine, the CSS styling loads as expected. However, when I deploy the app on Vercel, RainbowKit's CSS styling does not load.

As a workaround, I found that adding 'unsafe-inline' to the CSP in the vercel.json file allows the CSS to load correctly. However, this option is not ideal due to potential security risks associated with inline styles.

Expected Behavior

Regardless of the CSP restrictions in vercel.json, all the styles should show up

Steps To Reproduce

For your convenience, I have created a minimal reproducible repository and a preview link showcasing the issue.

Steps to reproduce: I have already reproduced, you can clone it for further experimenting
How can i notice the bug: Goto the vercel deployed URL of this repo and you will notice that styles of the connect button and the wallet modal are off (console says CSS variables from rainbowkit package are undefined)

Github repo: https://github.com/ahkill/rainbow
Vercel Link: https://rainbow-tan.vercel.app/

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

https://github.com/ahkill/rainbow

Anything else?

[DanielSinclair]

Hey @ahkill. Thanks for reporting. This is quite tough; it seems like some but not all of the RainbowKit component's styling is hitting this unhappy path. I found this Understanding and implementing a proper Content Security Policy with Next.js and Styled Components article to be quite helpful in describing the issue and possible solutions. Will need to keep investigating this, and see if this issues has been described in our upstream styling dependencies like vanilla-extract.

[WebDev-Akhil]

@DanielSinclair

Hi Daniel. I would appreciate if we can prioritise this as it is related to security. Hopefully, a patch in upcoming releases.

The blog post you shared basically suggests to do one of these 3 to fix the issue:

• Use 'unsafe-inline' keyword
• a sha256 (or similar) hash
• a nonce value

I tried all 3 and can confirm that only the first method works right now. The other 2 methods are not practical as it involves some form of alterations to the rainbowkit package such as isolating or extracting the package styles to other part of the App, which is not ideal as it will break the package update cycle.

Currently, method-1 (unsafe-inline tag) does the job but it is not a long term solution as it opens security threats.

[naftalimurgor]

Resolved this by importing the styles directly into the component that <ConnectButton/> is being used:

Inside the component that uses the ` component:

import 'node_modules/@rainbow-me/rainbowkit/dist/index.css';