A variant of your component + some ideas on this

[nibtime]

Hi @guydumais

I read your blog post about strict CSP with Next, got curious, and tried it out on my latest project with Next.js 12

Unfortunately, your package didn't work. I was not able to import it from NPM, which gave an error, but I am using yarn berry with zero installs, so I think that's due to that. (for this to work you had to import { Head } from 'next/document' and set next up as a peer dep)

Edit: In the meantime, I released a package @next-safe/middleware (Repo: https://github.com/nibtime/next-safe-middleware) that offers strict CSP support for Next 12 hybrid apps (getStaticProps - Hash-based, getServerSideProps - Nonce-based) via middleware, all by HTTP response header. That is a little bit safer, but most importantly enables reporting, for which the package also provides a convenient setup mechanism. It also works with next/script and hashes/nonces everything behind the scenes and adds stuff to the CSP.

Furthermore, it provides middleware to configure a custom CSP (apart from script-src) on top and to use inline styles without unsafe-inline.

Should anybody have problems with this package or have any of the above requirements, I recommend checking it out (of course I'd say that, I made the package 😁, but I also think it genuinely solves some common CSP issues very well at this point)

[guydumais]

Hi @nibtime,

Thanks for your feedback!

You're talking about the line 2 here I guess:
import { Head } from '../../../next/dist/pages/_document';