Missing nonce attribute in preinitialized scripts causing CSP violations in app router

[rinvii]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 19.6.0: Tue Jun 21 21:18:39 PDT 2022; root:xnu-6153.141.66~1/RELEASE_X86_64
    Binaries:
      Node: 20.3.0
      npm: 9.6.7
      Yarn: 3.6.0
      pnpm: 8.6.10
    Relevant Packages:
      next: 13.4.16-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.3
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/rinvii/missing-nonce

To Reproduce

Set up a basic Next.js 13.4 App Router project.

1. Create a middleware.ts file in the root dir

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

// adding CSP to middleware example from https://nextjs.org/docs/app/building-your-application/routing/middleware#example

// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);
  let cspValue =
    "default-src 'self'; " +
    "frame-ancestors 'none'; " +
    "form-action 'self'; " +
    "base-uri 'self'; " +
    "object-src 'none'; " +
    "style-src 'self' 'unsafe-inline'; " +
    `script-src 'self' 'unsafe-inline' https: http:${
      process.env.NODE_ENV === "development" ? " 'unsafe-eval'" : ""
    }`;
  const nonce = crypto.randomUUID();

  cspValue += ` 'nonce-${nonce}' 'strict-dynamic'`;

  requestHeaders.set("content-security-policy", cspValue);

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });

  response.headers.set("content-security-policy", cspValue);

  return response;
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: "/:path*",
};

2. npm run dev
3. Observe CSP violations in the browser console log

Describe the Bug

When implementing a strict Content Security Policy via middleware as described in #43743 (comment), some script tags are missing a nonce value inside the head element.

I believe this bug was introduced in the PR #53705 where all but one of the required scripts for every page load are now currently preinitialized.

This seemed to have been resolved by the issues #43743 and #7486, but somehow reintroduced?

I noticed this when I was upgrading from 13.4.13 to 13.4.16. I managed to pinpoint this to 13.4.14-canary.2.

This happens both in dev and prod.

Expected Behavior

Inline scripts injected into the page should have a nonce attribute when using nonce for the CSP script-src directive.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[karlhorky]

cc @gnoff @danieltott @timneutkens seems like CSP nonces are currently not working with Next.js in versions newer than [email protected] - can confirm in our deployed application too

[danieltott]

@rinvii can confirm this as well.

Although for the example app, I would add export const dynamic = "force-dynamic"; to the page.tsx file. Without that, it will create a static page and middleware won't run at all.

[skullface]

Related: #53928

[karlhorky]

Thanks for the #54059 PR, review, merge and followup tests @nbhargava @danieltott @shuding @gnoff 🙌

This was released in [email protected] and I can confirm that this fixes CSP nonces with the App Router and Middleware (I removed our patch and our Playwright tests are no longer failing).

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.