How should CSPs be set up with Next-intl middleware?

[flux0uz]

We'd like to implement Content Security Policy, but we're having trouble working out how to integrate it using Next-intl's custom middleware. Has anyone already done this?

Here's the Next documentation to add CSP:

export function middleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    block-all-mixed-content;
    upgrade-insecure-requests;
`
  // Replace newline characters and spaces
  const contentSecurityPolicyHeaderValue = cspHeader
    .replace(/\s{2,}/g, ' ')
    .trim()
 
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-nonce', nonce)
 
  requestHeaders.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )
 
 `Here's the part we're having trouble with`
  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  })
  response.headers.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )
 
  return response
}

Here's the next-intl middleware:

export default async function middleware(request: NextRequest) {
  // Step 1: Use the incoming request (example)
  const defaultLocale = request.headers.get('x-default-locale') || 'en';
 
  // Step 2: Create and call the next-intl middleware (example)
  const handleI18nRouting = createIntlMiddleware({
    locales: ['en', 'de'],
    defaultLocale,
    localePrefix: "as-needed",
  });
  const response = handleI18nRouting(request);
 
  // Step 3: Alter the response (example)
  response.headers.set('x-default-locale', defaultLocale);
 
  return response;
}
 
export const config = {
  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)']
};

[MarvinVrdoljak]

Facing the same issue.

[flux0uz]

As mentioned above, we're having trouble adding the requestHeaders to the response.
Any help would be really appreciated 🙏

export default async function middleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    block-all-mixed-content;
    upgrade-insecure-requests;
`
  // Replace newline characters and spaces
  const contentSecurityPolicyHeaderValue = cspHeader
    .replace(/\s{2,}/g, ' ')
    .trim()
 
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set('x-nonce', nonce)
 
  requestHeaders.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )
  
  // Step 1: Use the incoming request (example)
  const defaultLocale = request.headers.get('x-default-locale') || 'en';
 
  // Step 2: Create and call the next-intl middleware (example)
  const handleI18nRouting = createIntlMiddleware({
    locales: ['en', 'de'],
    defaultLocale,
    localePrefix: "as-needed",
  });
  const response = handleI18nRouting(request);
  
  // How can we add the `requestHeaders` with createIntlMiddleware ?
  /*
  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  })
 */
 
  // Step 3: Alter the response (example)
  response.headers.set('x-default-locale', defaultLocale);
  response.headers.set(
    'Content-Security-Policy',
    contentSecurityPolicyHeaderValue
  )
 
  return response;
}
 
export const config = {
  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)']
};

[amannn]

What exactly is the issue with response.headers.set('Content-Security-Policy', …)?

Btw. x-default-locale is only intended as an example in the docs (as the comments indicate)—you can remove those lines.

[flux0uz]

Hey @amannn,

Thanks for looking into this. According to the Next documentation, as well as setting the headers, you also need to add the requestHeaders to the response like this:

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

I don't see how we can add them to the response with the createIntlMiddleware

[amannn]

You mean the docs at https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy#adding-a-nonce-with-middleware, right?

That's because they're creating a new Headers object.

I'd imagine something like this should work:

const handleI18nRouting = createIntlMiddleware({
  locales: ['en', 'de'],
  defaultLocale: 'en',
});

export default async function middleware(request: NextRequest) {
  request.headers.set('x-nonce', /* ... */);
  request.headers.set('Content-Security-Policy', /* ... */);
 
  const response = handleI18nRouting(request);

  response.headers.set('Content-Security-Policy', /* ... */);
 
  return response;
}

If this doesn't work as expected, it would be helpful if you could compare it with a middleware that doesn't use next-intl and look for differences in headers that are returned.

Hope this helps!

[MarvinVrdoljak]

Unfortunately your approach is not working, since the CSP is generated initially, but you'll create a new nonce for every new page load. So the nonces-values no longer match.

[FilFarEu]

I am having the same problem.. trying to solve for days...

[kieranm]

The following is a working example of using next-intl with NextAuth and adding a nonce CSP value.

// Compile a list of all locales
const allLocales = locales.concat(betaLocales)

const publicPages = ["/auth/login", "/auth/error", "/events/.*"]

// Configure next-intl middleware
const intlMiddleware = createIntlMiddleware({
  locales: allLocales,
  defaultLocale: "en-US",
  localePrefix: "always",
})

const authMiddleware = withAuth(
  function onSuccess(req) {
    const response = intlMiddleware(req)
    const csp = req.headers.get("Content-Security-Policy")
    if (!csp) {
      throw new Error("No CSP header found")
    }

    response.headers.set("Content-Security-Policy", csp)
    return response
  },
  {
    callbacks: {
      authorized: ({ token }) => token !== null,
    },
    pages: {
      signIn: "/auth/login",
      signOut: "/",
      error: "/auth/error",
    },
  },
)

export default function middleware(request: NextRequest) {
  const publicPathnameRegex = RegExp(
    `^(/(${locales.join("|")}))?(${publicPages.join("|")})/?$`,
    "i",
  )
  const isPublicPage = publicPathnameRegex.test(request.nextUrl.pathname)

  const nonce = Buffer.from(crypto.randomUUID()).toString("base64")
  const cspWithNonce = csp(nonce) // Generate the CSP as described in the Next docs
  const requestHeaders = new Headers(request.headers)
  requestHeaders.set("x-nonce", nonce)
  requestHeaders.set("Content-Security-Policy", cspWithNonce)

  const req = new NextRequest(request, {
    headers: requestHeaders,
  })

  // Handle the request with the appropriate middleware
  let response: NextResponse
  if (isPublicPage) {
    response = intlMiddleware(req)
    response.headers.set("Content-Security-Policy", cspWithNonce)
  } else {
    response = (authMiddleware as unknown as typeof intlMiddleware)(req)
  }

  return response
}

export const config = {
  matcher: [
    "/((?!_next/static|.well-known|fonts|icons|images|favicon.ico|apple-touch-icon.png|service-worker.js|version).*)",
  ],
}

[MarvinVrdoljak]

Did you actually test this approach properly? In my opinion this code should not work when you first load a page where you don't need the nonce and then go (without a reload) on another page with a nonce required component. The nonce in your CSP-Header you set up initially should be different to the one you get with header.get('x-nonce') in the frontend.

[kieranm]

This isn't my approach, it's the approach outlined in the NextJS documentation:
https://nextjs.org/docs/pages/building-your-application/configuring/content-security-policy

Are you saying there is some difference between this code and the Next docs?

[kieranm]

FWIW it has been tested and works perfectly for us

[kieranm]

x-nonce is added as a request header, not a response header, so I don't think it gets sent to the client at all

[RMunschie92]

This was a life-saver. Thanks a million!

[realrisman]

I'm facing the same issue, please try this approach

import { NextFetchEvent, NextRequest, NextResponse } from 'next/server';
import createIntlMiddleware from 'next-intl/middleware';

// Configuration for next-intl middleware
const intlMiddleware = createIntlMiddleware({
  locales: ['en', 'ko'], // Add your supported locales
  defaultLocale: 'en',
});

export async function middleware(request: NextRequest, event: NextFetchEvent) {
  // Run next-intl middleware
  const intlResponse = intlMiddleware(request);

  // Generate nonce and set CSP headers
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
  console.log('Generated Nonce:', nonce);

  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'unsafe-inline';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
  `;
  const contentSecurityPolicyHeaderValue = cspHeader.replace(/\s{2,}/g, ' ').trim();

  // Merge headers from both responses
  const response = intlResponse || NextResponse.next();
  response.headers.set('x-nonce', nonce);
  response.headers.set('Content-Security-Policy', contentSecurityPolicyHeaderValue);

  return response;
}

export const config = {
  matcher: [
    // Enable a redirect to a matching locale at the root
    '/',

    // Set a cookie to remember the previous locale for
    // all requests that have a locale prefix
    '/(en|ko)/:path*',

    // Enable redirects that add missing locales
    // (e.g. `/pathnames` -> `/en/pathnames`)
    '/((?!api|_next|_vercel|.*\\..*).*)',
  ],
};

[kieranm]

There is a problem with the approach I posted above in that onSuccess runs only when the user is logged in, and therefore the CSP would not be set on pages without authentication (e.g. the login page)

I think you can do this instead:

response = await (authMiddleware as unknown as typeof intlMiddleware)(req) || NextResponse.next(req)
response.headers.set(csp)

Edit: This is correct in @realrisman approach above