Content Security Policy (CSP) should use the nonce attribute

Author: DoverstavCreated Dec 9, 2024Updated Dec 9, 2024

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

To support a CSP with a nonce today you need to pass it to registry.styles({ nonce }) and set a <meta property="csp-nonce" content={nonce} /> tag. By using the content attribute the nonce is not hidden.

See this screenshot as an example, the nonce on the meta tag is visible (since it sets the nonce on content), but on the style tag it is hidden (since it sets the nonce on nonce): image

What is the expected behavior?

Best practice is instead to use nonce which will hide it and protect it from being stolen, as seen here.

Environment (include versions)

  • Version of styled-jsx (or next.js if it's being used): Next 15.0.2
  • Browser: N/A
  • OS: N/A

Did this work in previous versions?

The content attribute seems to have been used since the original implementation: #482