nextjs - 💡(How to fix) Fix Docs: CSP nonce doesn’t work as expected in development due to DevTools/React Fast Refresh injecting inline styles without nonce [5 comments, 3 participants]

// middleware.ts
const isDev = process.env.NODE_ENV === 'development';
`style-src 'self' ${isDev ? "'unsafe-inline'" : `'nonce-${nonce}'`} https://fonts.googleapis.com`;

---

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

// Define route groups - centralized access control
const routeGroups = {
    public: [
        "/",
        "/about",
        "/login",
        "/forgot-password",
        "/register"
    ],

    // Routes that require authentication
    authenticatedOnly: [
        "/feedback",
        "/services",
        "/polls",
        "/profile",
        "/profile/edit"
    ],

    // Routes accessible without authentication (but also with auth)
    publicOrAuthenticated: [
        "/feedback/report",
        "/services/report"
    ]
};

export function proxy(req: NextRequest) {
    const profile = req.cookies.get("profile")?.value;
    const currentPath = req.nextUrl.pathname;
    console.log("🚀 ~ middleware ~ currentPath:", currentPath);

    // Generate nonce for CSP
    const nonce = Buffer.from(crypto.randomUUID()).toString('base64');

    // Get API URL from environment variable, add to connect-src
    const apiUrl = process.env.NEXT_PUBLIC_BASE_URL;
    const connectSrc = apiUrl
        ? `'self' ${apiUrl} https: wss: ws:`
        : "'self' https: wss: ws:";

    const isDevelopment = process.env.NODE_ENV === 'development';

    const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' ${isDevelopment ? "'unsafe-inline'" : `'nonce-${nonce}'`} https://fonts.googleapis.com;
    img-src 'self' blob: data: https:;
    font-src 'self' https://fonts.gstatic.com data:;
    connect-src ${connectSrc};
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'self';
    ${!isDevelopment ? 'upgrade-insecure-requests;' : ''}
`;

    const contentSecurityPolicyHeaderValue = cspHeader
        .replace(/\s{2,}/g, ' ')
        .trim();

    let response: NextResponse;

    // ===============================
    // 1️⃣ Public routes - allow everyone
    // ===============================
    if (routeGroups.public.includes(currentPath)) {
        response = NextResponse.next();
    }
    // ===============================
    // 2️⃣ Public or authenticated routes - allow everyone
    // ===============================
    else if (routeGroups.publicOrAuthenticated.includes(currentPath)) {
        response = NextResponse.next();
    }
    // ===============================
    // 3️⃣ NOT authenticated
    // ===============================
    else if (!profile) {
        if (currentPath === "/feedback") {
            response = NextResponse.redirect(new URL("/feedback/report", req.url));
        } else if (currentPath === "/services") {
            response = NextResponse.redirect(new URL("/services/report", req.url));
        } else if (currentPath.startsWith("/polls") || currentPath.startsWith("/profile")) {
            response = NextResponse.redirect(new URL("/login", req.url));
        } else {
            response = NextResponse.rewrite(new URL("/not-found", req.url));
        }
    }
    // ===============================
    // 4️⃣ Authenticated
    // ===============================
    else if (profile) {
        if (routeGroups.authenticatedOnly.includes(currentPath) ||
            currentPath.startsWith("/feedback/") ||
            currentPath.startsWith("/services/") ||
            currentPath.startsWith("/polls") ||
            currentPath.startsWith("/profile")) {
            response = NextResponse.next();
        } else {
            response = NextResponse.rewrite(new URL("/not-found", req.url));
        }
    }
    // ===============================
    // 5️⃣ Not found
    // ===============================
    else {
        response = NextResponse.rewrite(new URL("/not-found", req.url));
    }

    // Add security headers to all responses
    response.headers.set('x-nonce', nonce);
    response.headers.set('Content-Security-Policy', contentSecurityPolicyHeaderValue);
    response.headers.set('X-Frame-Options', 'SAMEORIGIN');
    response.headers.set('X-Content-Type-Options', 'nosniff');
    response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
    response.headers.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
    response.headers.delete('X-Powered-By');

    return response;
}

export const config = {
    matcher: [
        {
            source: '/((?!api|_next|_vercel|.*\\..*).*)',
            missing: [
                { type: "header", key: "next-router-prefetch" },
                { type: "header", key: "purpose", value: "prefetch" },
            ],
        },
    ],
};