Content Security Policy in Next.js Micro Frontend

# What you see in the browser console when CSP blocks
# a Module Federation remote from loading:
#
#   Refused to load the script
#     'https://dev.myapp.com/products/_next/static/chunks/remoteEntry.js'
#   because it violates the following Content Security Policy directive:
#     "script-src 'self'".
#
#   Refused to evaluate a string as JavaScript because
#   'unsafe-eval' is not an allowed source of script in the
#   following Content Security Policy directive:
#     "script-src 'self'".
#
# Why CSP is harder in a Module Federation MFE than a single Next.js app:
#
#   1. The host loads remoteEntry.js from a different origin/path
#      at runtime. 'self' is not enough — the remote's URL must
#      be in script-src.
#
#   2. webpack's Module Federation runtime calls eval() to
#      bootstrap shared chunks. If 'unsafe-eval' is missing,
#      every remote refuses to mount and you get a white screen.
#
#   3. The host fetches the API from api.dev.myapp.com over fetch().
#      That URL must be in connect-src, or the Redux thunks fail
#      with a CSP error that looks identical to a CORS error.
#
#   4. Razorpay's checkout opens in an iframe from
#      checkout.razorpay.com. Without that origin in frame-src,
#      checkout shows a blank box and the Pay button does nothing.
#
#   5. Google Analytics injects a <script src="googletagmanager.com">
#      tag at runtime. Missing it from script-src means GA never
#      loads and your conversion funnel goes dark.

// apps/Main/next.config.js — Host CSP headers (production)
const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

module.exports = {
  reactStrictMode: false,
  output: 'standalone',
  compress: true,

  transpilePackages: ['@myapp/seo', '@myapp/store', '@myapp/api'],

  // CSP + security headers applied to every route
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: [
              // Default — fallback for any directive not listed below
              "default-src 'self' https://dev.myapp.com",

              // Scripts — Module Federation runtime + analytics + payment gateway
              "script-src 'self' 'unsafe-inline' 'unsafe-eval' " +
                "https://www.googletagmanager.com https://www.google-analytics.com " +
                "https://checkout.razorpay.com https://lumberjack.razorpay.com " +
                "https://static.cloudflareinsights.com",

              // Styles — Tailwind injected at runtime + font CDN
              "style-src 'self' 'unsafe-inline' " +
                "https://www.gstatic.com https://*.googleapis.com https://fonts.googleapis.com",

              // Images — every CDN that next/image is allowed to render from
              "img-src 'self' data: blob: " +
                "https://cdn.myapp.com https://images.myapp.com " +
                "https://ik.imagekit.io https://www.google-analytics.com " +
                "https://www.googletagmanager.com",

              // Fonts — self-hosted + Google Fonts CDN
              "font-src 'self' data: https://fonts.gstatic.com https://www.gstatic.com",

              // Connect — XHR/fetch/WebSocket destinations (API + analytics + payment)
              "connect-src 'self' " +
                "https://api.dev.myapp.com " +
                "https://www.google-analytics.com https://analytics.google.com " +
                "https://region1.google-analytics.com " +
                "https://api.razorpay.com https://lumberjack.razorpay.com",

              // Frames — iframe sources (payment checkout)
              "frame-src 'self' " +
                "https://checkout.razorpay.com https://api.razorpay.com",

              // Lockdown
              "object-src 'none'",
              "base-uri 'self'",
              "form-action 'self'",
              "frame-ancestors 'self'",
              "upgrade-insecure-requests",
            ].join('; '),
          },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'X-Frame-Options',        value: 'SAMEORIGIN' },
          { key: 'X-XSS-Protection',       value: '1; mode=block' },
          { key: 'Referrer-Policy',        value: 'strict-origin-when-cross-origin' },
          { key: 'Permissions-Policy',     value: 'camera=(), microphone=(), geolocation=(self)' },
          { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
        ],
      },
    ];
  },
};

# script-src — directive-by-directive breakdown for a Next.js MFE
# ──────────────────────────────────────────────────────────────
#
# script-src 'self' 'unsafe-inline' 'unsafe-eval'
#            https://www.googletagmanager.com
#            https://www.google-analytics.com
#            https://checkout.razorpay.com
#            https://lumberjack.razorpay.com
#            https://static.cloudflareinsights.com
#
#   'self'              The host's own origin — Next.js page chunks
#                       (/_next/static/chunks/*) load from here.
#
#   'unsafe-inline'     Required by:
#                         • Next.js inline bootstrap script (__NEXT_DATA__)
#                         • Tailwind injected runtime style="..." (no CSS)
#                         • Any analytics snippet pasted inline
#                       Removable only with a per-request nonce — see
#                       "Stricter CSP with nonces" later in this article.
#
#   'unsafe-eval'       NON-NEGOTIABLE for Module Federation.
#                       webpack's federation runtime calls eval() to
#                       bootstrap the remote container. Strip it and
#                       every remote dies with:
#                         "Refused to evaluate a string as JavaScript"
#                       This is the single biggest reason CSP is "harder"
#                       in MFE than in a single-page app.
#
#   googletagmanager    The GA bootstrap script tag injected by
#                       <Script src="https://www.googletagmanager.com/
#                                     gtag/js?id=G-XXXX" />
#
#   google-analytics    Where GTM forwards events.
#
#   checkout.razorpay   The script tag for Razorpay's checkout SDK.
#                       Loaded on demand when a user clicks Pay.
#
#   lumberjack.razorpay Razorpay's analytics endpoint (yes, two
#                       different subdomains for one feature).
#
#   cloudflareinsights  Cloudflare's beacon — if your site is behind
#                       Cloudflare with Web Analytics enabled.
#
# What is MISSING and why:
#
#   • No 'data:' in script-src — never let JavaScript come from a
#     data: URL. Even if you do not use them, listing data: opens
#     XSS via attacker-controlled <script src="data:...">
#
#   • No '*' wildcard — wildcard script-src defeats CSP entirely.
#     If a CDN expands, add the specific subdomain.
#
#   • No remote MFE host in production script-src — because every
#     remote is served through the host's nginx /products/* proxy,
#     so it loads from 'self'. If a remote is served from a
#     SEPARATE origin (e.g. https://products.myapp.com), add it here.

# connect-src — what actually opens an XHR / fetch / WebSocket
# ────────────────────────────────────────────────────────────
#
# connect-src 'self'
#             https://api.dev.myapp.com
#             https://www.google-analytics.com
#             https://analytics.google.com
#             https://region1.google-analytics.com
#             https://api.razorpay.com
#             https://lumberjack.razorpay.com
#
#   'self'                       Every relative-URL fetch. A Redux
#                                thunk that does fetch('/api/cart')
#                                lands here. Also the federation
#                                runtime when it fetches a remote's
#                                container manifest.
#
#   api.dev.myapp.com            The shared API gateway. The Axios
#                                base URL declared in @myapp/api.
#                                Without this entry, every Redux
#                                fetch fails — and the failure looks
#                                IDENTICAL to a CORS error in the
#                                browser console. The way to tell
#                                them apart: a CORS error has the
#                                word "CORS" in it; a CSP error
#                                has the words "Content Security
#                                Policy". They are unrelated.
#
#   google-analytics + region1   GA's regional collection endpoints.
#                                The "region1" subdomain is for
#                                EEA/UK traffic — added automatically
#                                by GTM when the user's IP geolocates
#                                inside the EU.
#
#   api.razorpay.com             Where the order-creation REST call
#                                from /api/checkout lands.
#
#   lumberjack.razorpay.com      Razorpay's analytics beacon. Even
#                                if you do not call it directly, the
#                                checkout iframe pings it from the
#                                parent context.
#
# Local-dev-only additions:
#
#   ws://localhost:*  wss://localhost:*
#     webpack-dev-server's hot-reload protocol. Without this entry,
#     every save in a React remote silently stops triggering a
#     browser refresh — page works but HMR is dead.
#
#   http://localhost:*
#     Every React remote running its dev server (4001..4011 in this
#     example). Without it, the host's federation runtime cannot
#     fetch a remote's manifest in local dev.

# img-src + style-src + font-src — the static-asset directives
# ────────────────────────────────────────────────────────────
#
# img-src 'self' data: blob:
#         https://cdn.myapp.com
#         https://images.myapp.com
#         https://ik.imagekit.io
#         https://www.google-analytics.com
#         https://www.googletagmanager.com
#
#   'self'                   The host's /_next/image optimizer endpoint.
#                            Since next/image rewrites every image to
#                            /_next/image?url=..., the request lands on
#                            'self' even though the source is a CDN.
#
#   data:                    Inline base64 placeholders (blurDataURL on
#                            <Image placeholder="blur" />).
#
#   blob:                    Required for any URL.createObjectURL()
#                            usage — in-browser image cropping, file
#                            uploads, downloaded reports.
#
#   cdn.myapp.com            Source CDN — must mirror the entry already
#                            in next.config.js images.remotePatterns.
#                            See the [previous article on image
#                            optimization](/micro-frontend/nextjs/
#                            image-optimization-nextjs-micro-frontend)
#                            for why both lists need the same entry.
#
#   ik.imagekit.io           Blog/marketing image CDN.
#
#   google-analytics         The 1x1 tracking pixel GA fires on
#                            every pageview.
#
# style-src 'self' 'unsafe-inline'
#           https://www.gstatic.com
#           https://*.googleapis.com
#           https://fonts.googleapis.com
#
#   'unsafe-inline'          Tailwind, styled-jsx, emotion, and many
#                            third-party widgets all inject style="..."
#                            attributes or <style> tags. Without this,
#                            most CSS-in-JS libraries fail silently.
#
#   fonts.googleapis.com     The CSS file that defines @font-face rules.
#                            The actual font binary is in font-src.
#
# font-src 'self' data:
#          https://fonts.gstatic.com
#          https://www.gstatic.com
#
#   data:                    Encoded font glyphs (Material Icons inline).
#
#   fonts.gstatic.com        Google Fonts binary delivery. Different
#                            subdomain from the CSS — both are needed.

# frame-src — only iframes and frame parents
# ──────────────────────────────────────────
#
# frame-src 'self'
#           https://checkout.razorpay.com
#           https://api.razorpay.com
#
#   When a user clicks "Pay", Razorpay opens an <iframe src="https://
#   checkout.razorpay.com/v1/checkout.js#..."> inside your page. CSP
#   gates iframe sources separately from script-src — the script tag
#   that loads the SDK is governed by script-src; the iframe the SDK
#   subsequently renders is governed by frame-src. Both must allow
#   the same origin or the iframe shows a blank white box.
#
#   If you switch payment gateways, both directives change:
#
#     Stripe:    script-src + frame-src += https://js.stripe.com
#                                          https://hooks.stripe.com
#     PayPal:    script-src           += https://www.paypal.com
#                frame-src            += https://www.paypal.com
#
# Why frame-ancestors matters too:
#
#   frame-ancestors 'self'
#
#   This is the CSP-3 replacement for X-Frame-Options. It says
#   "this page CAN ONLY be embedded inside an iframe whose top
#   window is from 'self'". Setting both X-Frame-Options:
#   SAMEORIGIN and frame-ancestors 'self' is belt-and-suspenders —
#   browsers prefer frame-ancestors when both are present.
#
# What about embedding the host inside another site (e.g. a
# co-branded landing page)? You would relax frame-ancestors:
#
#     frame-ancestors 'self' https://partner.example.com
#
#   And REMOVE X-Frame-Options entirely (X-Frame-Options has no
#   syntax for an allowlist — only DENY / SAMEORIGIN / one origin
#   that most browsers ignore anyway).

// Beyond CSP — six headers every Next.js host should also send
//
// Add these to the same headers array as Content-Security-Policy.
// Each one closes a separate attack vector that CSP does NOT cover.

[
  // 1. Stops the browser from MIME-sniffing a response. If the server
  //    sends an HTML file with Content-Type: image/png, the browser
  //    MUST still treat it as an image. Without this, an attacker who
  //    uploads a "JPEG" containing <script> can get it executed.
  { key: 'X-Content-Type-Options', value: 'nosniff' },

  // 2. Legacy clickjacking defense. SAMEORIGIN means only your own
  //    domain can render the page in an iframe. Modern browsers prefer
  //    frame-ancestors (in CSP) but X-Frame-Options is still honored
  //    by older clients.
  { key: 'X-Frame-Options', value: 'SAMEORIGIN' },

  // 3. Legacy reflected-XSS filter. Modern Chrome/Firefox ignore it
  //    in favor of CSP, but Safari and older browsers still react.
  //    Cost: zero. Benefit: small. Worth keeping.
  { key: 'X-XSS-Protection', value: '1; mode=block' },

  // 4. Controls what the Referer header leaks to other origins.
  //    'strict-origin-when-cross-origin' = full URL on same-origin,
  //    only the origin (no path) on cross-origin, nothing on HTTPS->HTTP.
  //    This is the right default for an MFE — analytics still works,
  //    but you do not leak query strings to third-party CDNs.
  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },

  // 5. Disables APIs that no MFE in this federation needs.
  //    geolocation=(self) means only your own origin can read
  //    location; cross-origin iframes (Razorpay, Translate) cannot.
  { key: 'Permissions-Policy',
    value: 'camera=(), microphone=(), geolocation=(self), payment=(self)' },

  // 6. Forces every browser that has ever connected over HTTPS to
  //    refuse plain HTTP for the next 2 years (max-age=63072000).
  //    'preload' opts in to the Chrome HSTS preload list — once added
  //    there, no browser EVER tries HTTP for your domain again.
  //
  //    DO NOT enable this header in local development — HSTS on
  //    https://localhost will block every other dev server on
  //    that hostname for the same duration.
  { key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload' },
]

// Step 1 — Roll out in Report-Only mode FIRST
//
// Content-Security-Policy-Report-Only sends the same browser
// validations as Content-Security-Policy, but every violation is
// reported instead of blocked. The page still works. You collect
// real-user violations for a week, then promote the policy to the
// blocking header. Skipping this step is how teams deploy a CSP
// on Friday night and roll it back at 9am Monday.

async headers() {
  return [
    {
      source: '/:path*',
      headers: [
        // Send BOTH headers during rollout — the strict policy in
        // Report-Only mode + a permissive enforced policy.
        {
          key: 'Content-Security-Policy-Report-Only',
          value: [
            "default-src 'self'",
            "script-src 'self' 'unsafe-inline' 'unsafe-eval' " +
              "https://www.googletagmanager.com https://checkout.razorpay.com",
            "report-uri /api/csp-report",     // <- where violations land
            "report-to csp-endpoint",         // <- modern equivalent
          ].join('; '),
        },
        {
          key: 'Reporting-Endpoints',
          value: 'csp-endpoint="/api/csp-report"',
        },
      ],
    },
  ];
}

// Step 2 — Implement /api/csp-report to log violations
// pages/api/csp-report.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).end();
  }

  // The browser POSTs a JSON body shaped like:
  //   { "csp-report": {
  //       "blocked-uri": "https://...",
  //       "violated-directive": "script-src",
  //       "document-uri": "https://www.myapp.com/products/123",
  //       ...
  //     }
  //   }
  console.log('[CSP VIOLATION]', JSON.stringify(req.body));

  // In production, ship to your log aggregator instead:
  //   await logToDatadog(req.body)

  return res.status(204).end();
}

// Step 3 — After 7 days of zero new violations, promote
// Replace 'Content-Security-Policy-Report-Only' with
// 'Content-Security-Policy'. The header is now blocking.

// Stricter alternative — drop 'unsafe-inline' with per-request nonces
//
// 'unsafe-inline' is the weakest part of every CSP in this article.
// Strict CSP replaces it with a per-request nonce that is generated
// in middleware and attached to every <script> and <style> tag the
// server emits. Inline scripts injected by an attacker do NOT have
// the nonce, so the browser rejects them.
//
// The trade-off: every Module Federation remote would have to read
// the nonce from a request header and stamp it onto its own emitted
// scripts. NextFederationPlugin does not pass a nonce through to
// remotes today, so a strict-nonce CSP is incompatible with
// Module Federation as of mid-2026. The recommended path is:
//
//   1. Keep 'unsafe-inline' in script-src for now.
//   2. Pin every other directive as tightly as possible.
//   3. Track the upstream issue and migrate when nonce-passthrough
//      lands in NextFederationPlugin.

// middleware.ts — generates a per-request nonce
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // crypto.randomUUID() works in the Edge runtime
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');

  const csp = [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
    `style-src 'self' 'nonce-${nonce}'`,
    "img-src 'self' data: https://cdn.myapp.com",
    "connect-src 'self' https://api.dev.myapp.com",
    "frame-src 'self' https://checkout.razorpay.com",
    "object-src 'none'",
  ].join('; ');

  // Pass the nonce through the request so every Server Component
  // can read it via headers().get('x-nonce') and stamp it on
  // every inline <script>.
  const headers = new Headers(request.headers);
  headers.set('x-nonce', nonce);
  headers.set('Content-Security-Policy', csp);

  return NextResponse.next({ request: { headers } });
}

# CSP Gotchas in a Next.js MFE — Real-World Failure Modes
# ────────────────────────────────────────────────────────
#
# 1. White screen on every remote after deploy
#    SYMPTOM: Localhost works. Staging is a blank page.
#             Console: "Refused to evaluate a string as JavaScript"
#    CAUSE:   'unsafe-eval' missing from script-src in production.
#             webpack's federation runtime calls eval() to bootstrap.
#    FIX:     Keep 'unsafe-eval' in script-src until NextFederationPlugin
#             supports nonce-passthrough.
#
# 2. Razorpay checkout shows blank white iframe
#    SYMPTOM: Pay button does nothing visible.
#    CAUSE:   checkout.razorpay.com missing from frame-src.
#    FIX:     Add it to BOTH script-src (the SDK loader) AND frame-src
#             (the checkout iframe). Two directives, one feature.
#
# 3. Every API call fails with what looks like a CORS error
#    SYMPTOM: Network tab shows requests blocked. Console says
#             "Refused to connect to 'https://api.dev.myapp.com'".
#    CAUSE:   API hostname missing from connect-src. Looks like CORS
#             but is actually CSP — read the exact wording in the
#             console error.
#    FIX:     Add the API base URL to connect-src.
#
# 4. Hot-reload silently dies in local dev
#    SYMPTOM: File save no longer refreshes the browser. Page works
#             but every change requires a manual reload.
#    CAUSE:   ws://localhost:* missing from connect-src in the local
#             config.
#    FIX:     Add ws://localhost:* AND wss://localhost:* to the
#             local-only connect-src.
#
# 5. Production CSP works, local dev shows CSP errors
#    SYMPTOM: After deploy works. cd apps/Main && next dev shows
#             "Refused to load script http://localhost:4001/..."
#    CAUSE:   You forgot to add http://localhost:* to the local
#             config — production has only https://dev.myapp.com.
#    FIX:     Maintain TWO config branches via NODE_ENV check, or
#             ship two next.config.js files (production sources only).
#
# 6. HSTS persists from local dev into production browser
#    SYMPTOM: Developer cannot reach http://localhost:3000 anymore.
#             Every request auto-rewrites to https://localhost:3000
#             which has no cert and refuses.
#    CAUSE:   Strict-Transport-Security: includeSubDomains was
#             served once from a localhost cert. Browser remembers
#             for 2 years.
#    FIX:     NEVER send HSTS in development. To recover: chrome://
#             net-internals/#hsts → "Delete domain security policies"
#             → enter "localhost".
#
# 7. Google Analytics stops collecting from EU users only
#    SYMPTOM: GA reports show traffic from US/Asia. Zero from EU.
#    CAUSE:   region1.google-analytics.com missing from connect-src.
#             GTM auto-routes EEA/UK traffic to the regional endpoint.
#    FIX:     Add region1.google-analytics.com to connect-src AND
#             every other regional GA endpoint your audience uses.
#
# 8. Inline <Script> tag from a remote is blocked
#    SYMPTOM: A federated remote uses next/script with strategy=
#             "afterInteractive" and the script never runs.
#    CAUSE:   Remote emitted an inline bootstrap that requires a
#             nonce that does not exist (you migrated to nonce-CSP
#             before NextFederationPlugin supported nonce passthrough).
#    FIX:     Roll back to 'unsafe-inline' in script-src for now.
#             Track the upstream issue.
#
# 9. CSP report-uri endpoint floods the logs
#    SYMPTOM: /api/csp-report receives thousands of POSTs per minute
#             after deploy.
#    CAUSE:   A real violation, OR a browser extension injecting
#             scripts (Honey, Grammarly, AdBlock plus). 90% of CSP
#             violations in production come from extensions.
#    FIX:     Filter report-uri logs by document-uri AND by whether
#             the blocked-uri matches a known extension scheme
#             (chrome-extension://, moz-extension://). Drop those.
#
#10. CSP works in Chrome, breaks in Safari
#    SYMPTOM: Same page renders fine in Chrome but Safari shows a
#             CSP violation that no one else sees.
#    CAUSE:   Safari implements CSP3 differently. Specifically,
#             'strict-dynamic' is honored more strictly. Some legacy
#             webpack runtime hashes do not match.
#    FIX:     Test the policy in Safari Technology Preview before
#             promoting from Report-Only. Report-Only catches this.