CSP Nonce attribute not added to all script tags

[bodhi]

Bug report

Describe the bug

As far as I can tell, Next.js doesn't support 'strict-dynamic' + a nonce as a CSP policy. The nonce is added to one of the script tags here:

https://github.com/zeit/next.js/blob/e2beadd9601f3393254eae3f9c5a30abfd4ae988/server/document.js#L182

but for some reason, the nonce is not added to other script tags:

https://github.com/zeit/next.js/blob/e2beadd9601f3393254eae3f9c5a30abfd4ae988/server/document.js#L207-L209

https://github.com/zeit/next.js/blob/e2beadd9601f3393254eae3f9c5a30abfd4ae988/server/document.js#L136-L140

https://github.com/zeit/next.js/blob/e2beadd9601f3393254eae3f9c5a30abfd4ae988/server/document.js#L164-L168

To Reproduce

(Tested in Chrome 66.0.3359.181)

Add CSP policy to pages/_document.tsx head:

<meta http-equiv="Content-Security-Policy" content="default-src none;script-src 'strict-dynamic' 'unsafe-inline' 'nonce-12345' 'unsafe-eval' 'report-sample';connect-src 'self'">

And set nonce on NextScript:

<NextScript nonce="12345" />

Chrome refuses to load the scripts:

Refused to load the script '<URL>' because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-inline' 'nonce-12345' 'unsafe-eval' 'report-sample'". 'strict-dynamic' is present, so host-based whitelisting is disabled.

(index):1 Refused to load the script 'http://localhost:3000/_next/-/page/index.js' because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-inline' 'nonce-12345' 'unsafe-eval' 'report-sample'". 'strict-dynamic' is present, so host-based whitelisting is disabled.

(index):1 Refused to load the script 'http://localhost:3000/_next/-/page/_error.js' because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-inline' 'nonce-12345' 'unsafe-eval' 'report-sample'". 'strict-dynamic' is present, so host-based whitelisting is disabled.

(index):1 Refused to load the script 'http://localhost:3000/_next/-/manifest.js' because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-inline' 'nonce-12345' 'unsafe-eval' 'report-sample'". 'strict-dynamic' is present, so host-based whitelisting is disabled.

(index):1 Refused to load the script 'http://localhost:3000/_next/-/commons.js' because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-inline' 'nonce-12345' 'unsafe-eval' 'report-sample'". 'strict-dynamic' is present, so host-based whitelisting is disabled.

(index):1 Refused to load the script 'http://localhost:3000/_next/-/main.js' because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'unsafe-inline' 'nonce-12345' 'unsafe-eval' 'report-sample'". 'strict-dynamic' is present, so host-based whitelisting is disabled.

Expected behavior

The app to load as usual.

Additional context

I didn't have time to manually setup a fork to create an example repo, but when I added the nonce into the script tags by editing dist/server/document.js directly, strict-dynamic worked as expected.

[bodhi]

(example posted didn't have 'nonce-*' correctly quoted, but this doesn't affect the result)

[vinaypuppal]

Hey there is a PR to fix this here #4539

[dav-is]

This issue should be closed

[leerob]

Hey folks, wanted to swing back here with an update. After digging through many different issues and discussions, I've made a new page in the documentation (PR) specifically for Content Security Policy and nonces. This docs page:

• Explains how to generate a nonce with Middleware
• Shows how to consume the nonce in a route with headers()
• Shows a complete CSP without needing to use any unsafe
• Shows how to ignore the nonce Middleware from running on prefetches / static assets

Further, we've patched some bugs and made improvements to nonce handling in Next.js that will be available in the latest canary version (for those of you time traveling from the future, upgrade to Next.js 13.5). We also updated the with-strict-csp example in the examples/ folder, which is backlinked from the new documentation page.

Really hope this helps out, thank you all 🙏 To continue the discussion, please go here.