Skip to content

nonce is dropped from style tags that use precedence #32449

Open
@gnoff

Description

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Status: UnconfirmedA potential issue that we haven't yet confirmed as a bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions