Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nonce is dropped from style tags that use precedence #32449

Open
gnoff opened this issue Feb 21, 2025 · 0 comments · May be fixed by #32461
Open

nonce is dropped from style tags that use precedence #32449

gnoff opened this issue Feb 21, 2025 · 0 comments · May be fixed by #32461
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@gnoff
Copy link
Collaborator

gnoff commented Feb 21, 2025

When React hoists style rules using <style precedence="..." href="...">{...rules}</style> it does not accept arbitrary props. The reason is that while it looks like you are rendering a single tag here each tag with the same precedence will get grouped together in a single style tag in the serialized output. Really you are rendering a style rule more than a style element and so there is no natural place to put arbitrary props on this style tag since they might conflict. A trivial example is

<style precedence="default" href="123" data-x="red">{redRules}</style>
<style precedence="default" href="abc" data-x="blue">{blueRules}</style>

the resultant stylesheet will look like this

<style data-precedence="default" data-href="123 abc">
  ...redRules
  ...blueRules
</style>

we can't put both red and blue as the value of data-x property so we simply omit it. Ideally with a warning.

However... nonce is special.

With nonces they only make sense if you use the same value for all styles. Additionally if you are using a nonce for non-trivial CSP purposes then all styles should have the nonce otherwise they will be ignored. So there is no conflict in adopting the first nonce value we see for a style tag that is hoisted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant