How to deploy a strict Content Security Policy (CSP) with Next.js

Guy Dumais
Guy Dumais
Cover Image for How to deploy a strict Content Security Policy (CSP) with Next.js

Based on the most comprehensive study to date from Google, 95% of real-world Content Security Policy (CSP) deployments are bypassed and 99.34% of hosts with CSP use policies that offer no benefit against XSS.

This is why Google suggests that the model of designating trust by specifying URL whitelists from which scripts can execute should be replaced with an approach based on nonces and hashes, already defined by the CSP specification and available in major browser implementations. Hence the name strict CSP.

In the context of a Single Page App (SPA) such as the Next.js React framework, we need to use a Hash-based CSP in order to properly integrate a strict CSP which will offer real protection against CSS attacks.

Depending on the complexity of your application, the integration of a hash-based Content Security Policy could be trivial and require a lot of code manipulation. That’s why I’ve come to build a package on NPM specifically designed for Next.js to allow developers to integrate strict CSP in a snap with just a few lines of code.


next-strict-csp

next-strict-csp is a hash-based Strict Content Security Policy generator for Next.js that is easily integrated in the _document.tsx file of your Next.js application. Once in production, it will automatically inject the hashes into the content security policy meta tag and protect against XSS once deployed and cached on CDN.

Here is an example of _document.tsx with basic integration of next-strict-csp:

Loading...

Once put live in production, you'll get a content security policy meta tag that looks like this:

Loading...

With a strict CSP, you need to hash your inline scripts as well. This could be easily achieved with next-strict-csp by integrating your inline scripts in an array like this in _document.tsx:

Loading...

Once live, your inline scripts hashes will be injected into the content security policy meta tag like this:

Loading...


Last word

Hope you enjoyed next-strict-csp and don't hesitate to leave a comment to let me know what you think about it.

Thanks for reading, see you!


Comments:

    Share: