[App Router] Content Security Policy Broken about next.js HOT 7 OPEN

Experienced this issue again, back on 14.1.3. force-dynamic is activated and no other CSP-Errors occur.

Here are some screenshots from the developer tools showing the error and file:

from next.js.

Can confirm. 14.0.4 still works fine for me.

from next.js.

@moloch--
I am not quite sure, since I have not used CSP in my hobby or in work coding, but document says you must use dynamic rendering to add nonces. , and I think app-router is default to cache.
So I think you have to add

export const dynamic = "force-dynamic"

or something to prevent next.js from cacheing in page.tsx in your reproduction codes.

In my case, adding above code fix console.log to warn.

from next.js.

Doesn't seem like I should have to force dynamic rendering for every page just to use CSP, so still seems like a bug?

@AlexBueckig would you be able to link to a working example?

from next.js.

Adding force-dynamic solved the problem for me. I totally makes sense, now that I'm thinking about it. A new nonce gets created for every request by your middleware function. If you cache a rendered page the nonces in this page are a value from a previous request. But since you create a new csp header for every request, there is a mismatch with these nonces and csp breaks.

For now this seems to be the only option if you want to use nonces.

I don't know your project, but if you aren't using external scripts e.g. tracking or whatever you can just set static csp headers without the need for strict-dynamic and nonces. These versions should be cacheable since they are not dependant on a random generated value.

from next.js.

btw, adding export const dynamic = "force-dynamic" doesn't seem to have any affect for me :-/

from next.js.

Okay for anyone else that sees this, I figured it out. I had "use client" in my layout.tsx which means the nonces are never inserted even if you use force-dynamic

from next.js.