@next-safe/middleware

Strict Content-Security-Policy (CSP) for Next.js with composable middleware

Works for hybrid apps and supports pages with any data fetching method.

Always sets CSP by HTTP Response header and enables easy setup of reporting.

What#

This package strives to make the setup and deployment of a strict Content Security Policy (CSP) with Next.js an easy task. The design approach that makes this possible requires Next.js Middleware, which has been introduced as Beta in Next.js 12 and is stable since Next.js 12.2.

This package handles all Strict CSP conundrums for you and works for:

• pages with getStaticProps - Hash-based

• pages with getServerSideProps - Nonce-based

• pages with getStaticProps + revalidate (ISR) - Hash-based

This package always sets CSP as HTTP response header. That enables violation reporting and report-only mode even for static pages. Plus, it provides a middleware and API handlers that make the setup of CSP violation reporting very easy.

Why#

Configuring and maintaining a Content-Security-Policy (CSP) can be a tedious and error prone task. Furthermore, classic CSPs with a whitelist approach don't give you the security you might think you get from them, because in a lot of cases, they are automatically bypassable.

There is a much better option: a Hash-based/Nonce-based Strict CSP.

Such CSPs provide much better security and have always the same structure, so they don't need the maintenance that whitelist CSPs need, once they've been set up properly. But this setup is usually a a very big issue with Next.js (and with all web frameworks in general).

This is where this package comes in: To make this setup easy, convenient and a lot less error-prone.

Good Resources about (Strict) Content-Security-Policy (CSP)#

• The best overview on Strict CSPs: https://web.dev/strict-csp/

• Great slides from a conference talk, has lots of insights and field data: https://static.sched.com/hosted_files/locomocosec2019/db/CSP%20-%20A%20Successful%20Mess%20Between%20Hardening%20and%20Mitigation%20%281%29.pdf

• Great view on CSPs from an attacker's perspective: https://book.hacktricks.xyz/pentesting-web/content-security-policy-csp-bypass

• Good explanation of the strict-dynamic keyword: https://content-security-policy.com/strict-dynamic/

• Indispensible for testing: The CSP Evaluator Extension for Google Chrome

• Great tool to record CSP sources by browsing your site: The Laboratory Extension for Mozilla Firefox

TypeScript and JSDoc#

This package is written with 100% TypeScript and provides typings for full IntelliSense with CSP and middleware configuration. The typing for CSP directives is borrowed from the CSP integration of SvelteKit.

Furthermore, most middlewares, functions, parameters and types have JSDoc on them, with examples, explanations and links to related resources.

Contributors#

Thanks goes to these wonderful people (emoji key):

nibtime 💻 🐛 📖 🚇 ⚠️ 🤔 💡	Alex Turpin 🐛 📖 🤔	Benoît Faucon 🐛	René Schubert 🐛	Ben Hodgson 🐛	Stephan Bönnemann-Walenta 💻	Shamil Yakupov 🐛
DuCanhGH 🐛	Aaron Heimlich 🤔

This project follows the all-contributors specification. Contributions of any kind welcome! Check out the contributing guide for getting started!