Next.js (Pages Router)

 
import { NextRequest, NextResponse } from 'next/server'
import { generateNonce } from 'csp-toolkit/edge'
import {
    blob,
    data,
    definePolicy,
    none,
    nonce,
    self,
    strictDynamic,
    unsafeInline,
} from 'csp-toolkit'
 
export function middleware(request: NextRequest) {
    const cspNonce = generateNonce()
    const policy = definePolicy({
        defaultSrc: [self],
        scriptSrc: [self, nonce(cspNonce), strictDynamic],
        styleSrc: [self, unsafeInline],
        imgSrc: [self, blob, data],
        fontSrc: [self],
        objectSrc: [none],
        baseUri: [self],
    })
    const cspHeader = policy.toString()
 
    // Replace newline characters and spaces
    const contentSecurityPolicyHeaderValue = cspHeader
        .replace(/\s{2,}/g, ' ')
        .trim()
    
    const requestHeaders = new Headers(request.headers)
    requestHeaders.set('x-nonce', cspNonce)
    
    requestHeaders.set(
        'Content-Security-Policy',
        contentSecurityPolicyHeaderValue
    )
    
    const response = NextResponse.next({
        request: {
        headers: requestHeaders,
        },
    })
    response.headers.set(
        'Content-Security-Policy',
        contentSecurityPolicyHeaderValue
    )
    
    return response
}
 
 
 
 
export const config = {
    matcher: [
      /*
       * Match all request paths except for the ones starting with:
       * - api (API routes)
       * - _next/static (static files)
       * - _next/image (image optimization files)
       * - favicon.ico (favicon file)
       */
      {
        source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
        missing: [
          { type: 'header', key: 'next-router-prefetch' },
          { type: 'header', key: 'purpose', value: 'prefetch' },
        ],
      },
    ],
  }