Keeping your web applications safe is crucial, especially when using frameworks like Next.js that build dynamic sites. One important way to boost security is by setting up Content Security Policy (CSP) headers. In this blog post, I’ll walk you through how to add CSP headers in Next.js, focusing on version 14.2, but this guide should be useful for anyone using Next.js 13 or newer.

Why CSP is Important

CSP headers protect your app from certain types of attacks, like cross-site scripting (XSS) and unwanted data injection. By specifying which sources your app can trust, CSP prevents harmful scripts from running, making your site safer.

Generic Approach and Its Limitations

Typically, you might find online guides suggesting you to simply modify your next.config.js file to add CSP headers. While this approach can work for adding general headers, it often falls short when dealing with more complex configurations or specific security requirements.

Follow the Official Documentation

It's best to follow the official Next.js documentation for the most reliable instructions:

Next.js CSP Documentation

However, even the official guide has some gaps, which you might discover the hard way through trial and error. That's what leads many developers to seek out additional resources like this blog.

Addressing the Gaps

If you've followed the documentation, you might find everything works perfectly in your local development environment. But as soon as you build and run your application, you encounter errors related to script handling, which are often not nonce-compliant.

This issue arises because, by default, Next.js does server-side rendering (SSR), and during the build and run phase, the nonces for scripts generated by Webpack aren't set correctly.

The Solution

Currently, the best solution is to include the following line in your root layout:

export const dynamic = 'force-dynamic';

This directive opts the component out of static optimization, which can interfere with nonce propagation and CSP enforcement during the build process.

Final Steps

Make sure that your root layout is configured as a server component, not a client component. This is crucial because server components handle headers and optimizations differently, affecting your security settings directly.

Conclusion

Implementing robust CSP headers in Next.js requires more than just adding a few lines of code to your configuration. Understanding the nuances of nonce management and how Next.js handles scripts and styles at build time can save you from security headaches. By following the steps outlined above, you can ensure that your application not only runs smoothly but also maintains high security standards.