Nonce protection on 404 and 500 pages

[DannyJoris]

Summary

Using Next 14 and the Pages Router, we're creating a nonce defined in the middleware as documented here: https://nextjs.org/docs/pages/building-your-application/configuring/content-security-policy#nonces

In _document.tsx the nonce is read from the headers inside getInitialProps and passed to the component as a prop, which is then added to the NextScript component as such: <NextScript nonce={nonce} />.

Because 404 and 500 pages are rendered statically on build time, getInitialProps isn't called, and thus the nonce isn't added to NextScript, which causes none of the client-side JavaScript to load on error pages and errors being output to the console.

So my questions are:

• How can I add the nonce to NextScript on 404 and 500 pages?
• If this is not possible and I choose for those pages not to have client-side JavaScript, how do I exclude NextScript on those pages only?
• Or if these 2 static pages don't benefit from nonce protection, how do I exclude nonce protection on those pages only?

Additional information

No response

Example

No response

[valleywood]

@DannyJoris Did you manage to solve this and if so what was to solution you went for?

[fcano-ut]

I found a workaround based on this comment

The solution is to add a "dummy" getInitialProps script in _app.tsx. It doesn't need to contain any logic, it just needs to be present.

// _app.tsx
// If getInitialProps is used in a custom _app.js, and the page being navigated to is using getServerSideProps, then getInitialProps will also run on the server.
// you don't have to get nonce in App, just return initialProps.
MyApp.getInitialProps = async (
  ctx: NextAppContext
): Promise<AppInitialProps> => {
  const initialProps = await NextApp.getInitialProps(ctx);
  return initialProps;
};

For some reason, that seemed to fix the issue. The way I tested was by adding a throw new Error() block inside a page's getServerSideProps block: before the fix, it would render an error page without script (failing to load due to CSPs), but after the fix was applied, the error page started loading all scripts.