appDir: Inline Scripts (self.__next_f...)

[lc-51]

Hi,

Just wondering if anybody has an explanation for the inline scripts being generated by NextJS when using the experimental appDir.

I've noticed a number of them are currently being injected into the page, all beginning "self.__next_f...". They seem to contain parts of random stringified components. They're only generated when using the appDir. Obviously this isn't ideal from a CSP standpoint, as they're just generic inline scripts (so no src to whitelist, unlike the usual "/_next/static/" scripts).

Does anyone have any info as to what these are for and/or any ideas for getting around this from a CSP perspective, without using unsafe-inline (nonces or hashes, perhaps)? Is this something that's likely to be removed in future versions during the beta phase?

Thanks

[wdoug]

I was just about to post this same issue about adopting the appDir having broken our current Content Security Policy.

I don't have an answer, but I do notice that it seems to be listing various webpack chunks. I wonder if the same issue happens with Turbopack, but unfortunately, even if it does, we aren't able to adopt that yet.

I also wonder if this should be posted as a security issue instead of just having it noted in a discussion here.

[lc-51]

Interesting thought RE Turbopack.

I've just posted it as an issue (#43743).

[danieltott]

This is possible using appDir as of next.js v13.4.0

See this comment for implementation:
#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.