Skip to content

nonce is dropped from style tags that use precedence #32449

Closed
@gnoff

Description

@gnoff

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.

Metadata

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