Content Security Policy in app directory with preventing inline scripts

[kg2-galaxydigital]

Summary

I'm using app directory and I'd like to implement Content Security Policy that prevents inline scripts. What I noticed Next.js generates below code inside html (probably due to #30994). This inline scripts prevents from implementing Content Security Policy.

<script>
    (self.__next_f = self.__next_f || []).push([0])
</script>

One solution would be to add nonce and it looks like Next.js code supports this (

next.js/packages/next/src/server/app-render/use-flight-response.tsx

Line 39 in 061443f

const startScriptTag = nonce

).

This nonce is read from request:

next.js/packages/next/src/server/app-render/app-render.tsx

Line 1222 in 061443f

const csp = req.headers['content-security-policy']

Is this correct? Shouldn't it read from next.config headers property where CSP can be specified?

The workaround for above issue is to create middleware and set CSP header on the request. This works fine when I run locally as next dev but it doesn't work when I do the build and run it (next build and next start).

It looks like Static Rendering (which is default for app directory) during the build outputs these inline scripts without nonce (which is obvious as there is no request processing) causing that page is not working because CSP header blocks execution of inline scripts (without nonce).

Is there a working solution to set Content Security Policy in app directory that prevents inline scripts? Or any other workaround for this problem?

Additional information

No response

Example

No response

[danieltott]

For dynamically rendered pages, this is possible using appDir via middleware as of next.js v13.4.0. It won't ever work properly using config since the values don't change.

I'm not sure what the status of statically-rendered pages is - but also I don't think that statically-rendered pages can ever properly use nonce- since by definition they won't ever change.

See this comment for implementation for dynamically rendered pages:
#42330 (comment)

[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 🙏 I'll be closing this discussion out. To continue the discussion, please go here.