ECHOES-1025 Add CSP nonce support #560
Conversation
✅ Deploy Preview for echoes-react ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
hashicorp-vault-sonar-prod
bot
changed the title
david-cho-lerat-sonarsource
force-pushed
the
david/add-csp-nonce-support
branch
from
96bf6c4 to
b97188a
Compare
david-cho-lerat-sonarsource
force-pushed
the
david/add-csp-nonce-support
branch
from
b97188a to
57a89f2
Compare
|
david-cho-lerat-sonarsource
requested review from
gregaubert and
jeremy-davis-sonarsource
| // Create a singleton Emotion cache for all tests to ensure consistent class name generation | ||
| // This matches the key used in EchoesProvider when a nonce is provided | ||
| const testEmotionCache = createCache({ key: 'echoes' }); | ||
| testEmotionCache.compat = true; |
There was a problem hiding this comment.
Should that really be handled by Echoes? The CacheProvider is gonna change the behavior of emotion for the whole app, that should be setup at the app level not at Echoes level.
| // Create Emotion cache with nonce support for CSP compliance | ||
| // Use 'echoes' as the key for better namespace isolation and debugging | ||
| const emotionCache = useMemo(() => { | ||
| if (!nonce) { | ||
| return undefined; | ||
| } | ||
|
|
||
| const cache = createCache({ key: 'echoes', nonce }); | ||
| cache.compat = true; | ||
|
|
||
| return cache; | ||
| }, [nonce]); |
There was a problem hiding this comment.
I think the emotion cache provider shouldn't be handled by Echoes
There was a problem hiding this comment.
Let's be a bit more explicite and call that CSPNonceContext?
| * | ||
| * @returns The nonce string if configured, undefined otherwise | ||
| */ | ||
| export function useNonce(): string | undefined { |
There was a problem hiding this comment.
here too let's be more explicit
| /** | ||
| * A nonce value for inline styles (Content Security Policy - CSP) (optional). | ||
| * In most cases, you should configure the nonce once in the EchoesProvider | ||
| * instead of passing it to individual components. This prop is only needed | ||
| * if you need to override the global nonce for this specific Spotlight instance. | ||
| */ | ||
| nonce?: string; |
There was a problem hiding this comment.
Do we really want to provide that capability? You have a use case in mind?
| 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' | ||
| 'sha256-qixoDh78J8vISHKC3rLI7qSXmTShr8mhsUgjJL7W7aU=' | ||
| 'sha256-3gJFr3n77fnX5qwQpGju/zCOsoHW5RMqQd5XOb9WFcA='; |
There was a problem hiding this comment.
did you try this solution instead: emilkowalski/sonner#449 (comment) ?
2 participants
No description provided.