); } } ``` For every page under `pages` that uses `getServerSideProps` for data fetching: ```js import { gsspWithNonce } from "@next-safe/middleware/dist/document"; // wrap data fetching with gsspWithNonce // to generate a nonce for CSP export const getServerSideProps = gsspWithNonce(async (ctx) => { return { props: { message: "Hi, from getServerSideProps" } }; }); // the generated nonce also gets injected into page props const Page = ({ message, nonce }) =>

{`${message}. Nonce ${nonce}`}

; export default Page; ``` Thats it. You should be all set now with a Strict CSP for your Next.js app! ### Quickstart: CSP Violation Reporting Add the `reporting` middleware in `middleware.js`: ```js // middleware.js import { chainMatch, isPageRequest csp, reporting, strictDynamic, strictInlineStyles, } from '@next-safe/middleware'; const securityMiddleware = [ csp(), strictDynamic(), reporting(), ]; export default chainMatch(isPageRequest)(...securityMiddleware); ``` Create the file `pages/api/reporting.js` to set up the reporting endpoint: ```js // pages/api/reporting.js import { reporting } from "@next-safe/middleware/dist/api"; /** @type {import('@next-safe/middleware/dist/api').Reporter} */ const consoleLogReporter = (data) => console.log(JSON.stringify(data, undefined, 2)); export default reporting(consoleLogReporter); ``` Thats it. Browsers will send CSP violation reports to this endpoint. You can easily react on validated reporting data by adding any number of custom reporters. #### Send violation reports to Sentry If you use [Sentry](https://sentry.io) for monitoring your app, there is a convenient helper `sentryCspReporterForEndpoint` to create a reporter, that ingests all CSP violations into your Sentry project: ```jsx // pages/api/reporting.js import { reporting, sentryCspReporterForEndpoint, } from "@next-safe/middleware/dist/api"; // lookup at https://docs.sentry.io/product/security-policy-reporting/ const sentryCspEndpoint = process.env.SENTRY_CSP_ENDPOINT; const sentryCspReporter = sentryCspReporterForEndpoint(sentryCspEndpoint); export default reporting(sentryCspReporter); ``` ### Quickstart: Compose middleware Here's an example to show how you can combine security middleware from this package with your custom middleware by using `chain` and `chainMatch`: ```js // middleware.js import { chain, chainMatch, isPageRequest, csp, strictDynamic, } from "@next-safe/middleware"; /** @type {import('@next-safe/middleware').ChainableMiddleware} */ const geoBlockMiddleware = (req) => { const BLOCKED_COUNTRY = "GB"; const country = req.geo.country || "US"; if (country === BLOCKED_COUNTRY) { const response = new Response("Blocked for legal reasons", { status: 451 }); // returning response terminates the chain return response; } }; const securityMiddleware = [csp(), strictDynamic()]; /** * geoBlockMiddleware will be invoked on all requests * from `BLOCKED_COUNTRY` and then block the request * and terminate chain by returning a response with status 451 * * securityMiddleware will only run on requests * that didn't get geo-blocked and only on requests for pages */ export default chain( geoBlockMiddleware, chainMatch(isPageRequest)(...securityMiddleware) ); ``` If you only want to use the composition features from this package, there's an extra bundle `@next-safe/middleware/dist/compose` just for that. ## Contributors Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! Check out the [contributing guide](https://next-safe-middleware.vercel.app/CONTRIBUTING) for getting started!

`@next-safe/middleware`

Getting started Read the docs Contribute

{`${message}. Nonce ${nonce}`}