Nonce attributes are empty when settings CSPs.

[gaetan-welow]

Summary

Hello,

Starting from:

yarn create next-app --example with-strict-csp with-strict-csp-app csp-tests

The nonce attributes are set to an empty string and not to actual nonce values that I can still access correctly in the header. The behavior is the same using yarn dev or yarn build && yarn start.

My understanding is that nonce should be set automatically.

Here is what i get:

I can access the nonce from server components via the headers function.

I've tried with all major version since 13 and the result is the same.

Any idea on what could be happening ?

Also in the doc it is written that we should use dynamic rendering. Does this mean I should add await connection at the root layout ?

Thanks

Additional information

No response

Example

yarn create next-app --example with-strict-csp with-strict-csp-app csp-tests

[SametDulger]

nonce="" --> Add export const dynamic = 'force-dynamic'
Using custom <script> or <style> --> Manually inject nonce from headers()
Testing in dev mode --> Always test nonce behavior in production
Docs say “use dynamic rendering” --> That means setting dynamic = 'force-dynamic' on layout/page

[gaetan-welow]

Thx for your answer.

Obviously it also has an impact on dev builds, so are you suggesting deactivating CSPs in dev mode ?

When you say 'test in production" do you mean test the production build, or test directly on production server ?

[icyJoseph]

Hi,

I think the empty string behavior you describe is because of spec compliance, and it is done by the browser:

• https://html.spec.whatwg.org/multipage/urls-and-fetching.html#nonce-attributes%3Aattr-nonce

Elements that have a nonce content attribute ensure that the cryptographic nonce is only exposed to script (and not to side-channels like CSS attribute selectors) by taking the value from the content attribute, moving it into an internal slot named [[CryptographicNonce]], exposing it to script via the HTMLOrSVGElement interface mixin, and setting the content attribute to the empty string. Unless otherwise specified, the slot's value is the empty string.

This is why you can see it server side, but it gives the apparent behavior of not being present client side. You can use view-source:, for example view-source:localhost:3000, view to confirm what the server is sending to your client though. You'll see the nonce applied there.

[icyJoseph]

And yes, today one way was to use export const dynamic = 'force-dynamic' but as of the new APIs we are working on, await connection() has to do the trick too. I am working on some updates to our CSP guide, it should be soon out.

[gaetan-welow]

Thanks.