search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.46k stars 4.18k forks source link

StyleProvider: Allow defining a global nonce #60085

Open jcheringer opened 7 months ago

jcheringer commented 7 months ago

What problem does this address?

Some components (Modal, Popover.Slot) from the @wordpress/components package use their own StyleProvider, which, behind the scenes, creates an instance of the CacheProvider from the @emotion/react package.

However, there's no way to set a nonce for the CacheProvider, and in an application with more restrictive CSP (Content Security Policy) rules, the styles of StyledComponents inside a Modal or a Popover are not loaded correctly.

image

I'm part of the team currently working on Gravatar. We are facing this issue while trying to reutilize the GradientPicker for a new feature.

What is your proposed solution?

Expose a nonce property for the StyleProvider so an application using the WordPress components can define a nonce when necessary.

mirka commented 6 months ago

Makes sense. I think we can achieve this using our context system:

  1. Expose a nonce prop on StyleProvider.
  2. Then connect StyleProvider to the context system, so a consumer can override the nonce prop on all StyleProvider instances wrapped within a ContextSystemProvider.

Would that solution work for your use case? Are any of you available to submit a PR?