Next Js Content-Security-Policy , script-src requires 'unsafe-inline' in production

[Pri1esh]

Summary

Problem: In Next js 15 'Content-Security-Policy security header while defining script-src vlaue if I don't keep 'unsafe-inline' in the value then hydration does not work as expected because during hydration many inline scripts are automatically added in the html DOM and not keeping 'unsafe-inline' will block those scripts.

I am required to remove the 'unsafe-inline' value from script-src because it makes website vunerable for Cross-site scripting (XSS) attacks.

Resolution I want : Remove the 'unsafe-inline' from script-src in 'Content-Security-Policy security header.

Below is the example of hydrated html in my page.

Additional information

<script>
  (self.__next_f = self.__next_f || []).push([0]);
</script>
<script>
  self.__next_f.push([1, '1:"$Sreact.fragment"\n4:I[59665,[],"MetadataBoundary"]\n6:I[59665,[],"OutletBoundary"]\n9:I[74911,[],"AsyncMetadataOutlet"]\nb:I[59665,[],"ViewportBoundary"]\nd:I[26614,[],""]\ne:"$Sreact.suspense"\nf:I[85728,["6446","static/chunks/53c13509-bf02bc9ee48fe624.js","512","static/chunks/9c4e2130-21f3abc43ef6c5ba.js","3060","static/chunks/3060-a603c3dc8ed122ef.js","5728","static/chunks/5728-5056a6bbc108db41.js","8974","static/chunks/app/page-3e40bd5ee893cd46.js"],"Analytics"]\n10:I[85728,["6446","static/chunks/53c13509-bf02bc9ee48fe624.js","512","static/chunks/9c4e2130-21f3abc43ef6c5ba.js","3060","static/chunks/3060-a603c3dc8ed122ef.js","5728","static/chunks/5728-5056a6bbc108db41.js","8974","static/chunks/app/page-3e40bd5ee893cd46.js"],"AppWrapper"]\n11:I[87555,[],""]\n12:I[96678,["6446","static/chunks/53c13509-bf02bc9ee48fe624.js","512","static/chunks/9c4e2130-21f3abc43ef6c5ba.js","3060","static/chunks/3060-a603c3dc8ed122ef.js","5728","static/chunks/5728-5056a6bbc108db41.js","8039","static/chunks/app/error-d914951e442ac0d4.js"],"default"]\n13:I[31295,[],""]\n14:I[85728,["6446","static/chunks/53c13509-bf02bc9ee48fe624.js","512","static/chunks/9c4e2130-21f3abc43ef6c5ba.js","3060","static/chunks/3060-a603c3dc8ed122ef.js","5728","static/chunks/5728-5056a6bbc108db41.js","8974","static/chunks/app/page-3e40bd5ee893cd46.js"],"ErrorFallback"]\n15:I[74911,[],"AsyncMetadata"]\n:HL["/_next/static/css/2a0258a242833754.css","style"]\n:HL["/_next/static/css/346ef232ece49367.css","style"]\n:HL["/_next/static/css/4bb1c53d4d41ca49.css","style"]\n:HL["/_next/static/css/a5e1def1dc8a7da3.css","style"]\n:HL["/_next/static/css/70b182e6d758759b.css","style"]\n0:{"P":null,"b":"BhB9I2xl8YGx-Ik2PGGCW","p":"","c":["",""],"i":false,"f":[[["",{"children":["__PAGE__",{}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/2a0258a242833754.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/css/346ef232ece49367.css']);
</script>
<script>
  self.__next_f.push([1, '","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/css/4bb1c53d4d41ca49.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","3",{"rel":"stylesheet","href":"/_next/static/css/a5e1def1dc8a7da3.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","4",{"rel":"stylesheet","href":"/_next/static/css/70b182e6d758759b.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],"$L2"]}],{"children":["__PAGE__",["$","$1","c",{"children":["$L3",["$","$L4",null,{"children":"$L5"}],null,["$","$L6",null,{"children":["$L7","$L8",["$","$L9",null,{"promise":"$@a"}]]}]]}],{},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","D1GmXh16LDxBqdBu2hB8C",{"children":[["$","$Lb",null,{"children":"$Lc"}],null]}],null]}],false]],"m":"$undefined","G":["$d","$undefined"],"s":false,"S":false}\n2:["$","html",null,{"lang":"en","children":[["$","head",null,{"children":["$","meta",null,{"name":"msvalidate_01","content":"2B0C34807FA5B7ACA277D5A725CDE76D"}]}],["$","body",null,{"data-at":"2025-7-16 07:33:08","data-st":"2025-7-16 07:33:08","data-version":"0.1.0","data-aks-tag":"$undefined","children":[["$","$e",null,{"fallback":null,"children":["$","$Lf",null,{}]}],["$","$L10",null,{"children":["$","$L11",null,{"parallelRouterKey":"children","error":"$12","errorStyles":[],"errorScripts":[],"template":["$","$L13",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","div",null,{"className":"container","children":["$","$L14",null,{"buttonTitle":"Back","showButton":true,"description":"Page not found.","title":"","heading":"","imageAlt":"Page not found.","backToHome":true}]}],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]]}]]}]\n5:["$","$e",null,{"fallback":null,"children":["$","$L15",null,{"promise":"$@16"}]}]\n8:null\nc:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scal']);
</script>

Example

No response

[NovaNoodle7]

You're right — this is a common problem when trying to use a strict Content-Security-Policy (CSP) in Next.js 13+ and 15 with the App Router.

Next.js uses inline scripts during hydration (like __next_f.push([...])), and these get blocked unless you allow 'unsafe-inline' in script-src. However, 'unsafe-inline' does open your site to potential XSS attacks — so removing it is the right move.

🔐 Recommended solution: Use a CSP nonce
Instead of using 'unsafe-inline', you can generate a random nonce for each request and add it to:

All <script> tags (automatically handled by Next.js)

Your Content-Security-Policy header

✅ Example CSP header:
Content-Security-Policy: script-src 'self' 'nonce-';
Next.js automatically attaches nonces to internal scripts when you:

Use App Router

Use useCSPNonce feature (in edge middleware or config)

⚙️ Example in middleware:

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

export function middleware(request: NextRequest) {
const nonce = crypto.randomUUID(); // or use a secure method

const response = NextResponse.next();
response.headers.set(
'Content-Security-Policy',
script-src 'self' 'nonce-${nonce}'; object-src 'none'; base-uri 'none';
);

// Optionally set nonce for use in React
response.headers.set('x-nonce', nonce);

return response;
}
📌 TL;DR
Don't use 'unsafe-inline' — it's insecure

Instead, use a nonce and include it in your CSP

Next.js hydration scripts will work as long as they include the correct nonce

Let me know if you want a working repo or example setup. Happy to share!

[Pri1esh]

I am using my CSP through next.config.ts to apply CSP to every page.

The dynamic scripts are added to page when the generated build of the page is run. How i am supposed to put nonce on every dynamic script that is being appended to my html page when the build is running

Below is my next.config.ts for refrence.

import type { NextConfig } from 'next';

const environment =
process.env.NEXT_PUBLIC_ENV === 'prod' ? 'prod' : process.env.NEXT_PUBLIC_ENV === 'dev' ? 'dev' : 'stage';
const baseUrl = environment === 'prod' ? 'https://www.test.com' : 'https://test.com';
const nonce = Buffer.from(crypto.randomUUID()).toString('base64');

const nextConfig: NextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: baseUrl, // Using the environment-based URL
port: '', // usually empty unless you're serving on a custom port
pathname: '/**', // wildcard to allow all paths
},
],
},
eslint: {
ignoreDuringBuilds: true,
},
async headers() {
if (environment === 'dev') {
// Don't apply CSP headers in dev environment
return [];
}

return [
  {
    // Applies to all pages
    source: '/:path*',
    headers: [
      {
        key: 'Content-Security-Policy',
        value: `
          default-src 'self';
          connect-src 'self' https://js.monitor.azure.com https://dc.services.visualstudio.com https://www.google-analytics.com https://c.go-mpulse.net https://684d0d43.akstat.io;
          img-src 'self' ${baseUrl} data:;
          style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com https://use.typekit.net;
          font-src 'self' data: https://fonts.gstatic.com https://use.typekit.net;
          script-src 'self' 'unsafe-inline' 'strict-dynamic' https://www.googletagmanager.com https://s.go-mpulse.net https://www.youtube.com https://www.google.com https://www.gstatic.com https://snap.licdn.com https://bat.bing.com;
          script-src-elem 'self' 'unsafe-inline' https://www.googletagmanager.com https://s.go-mpulse.net https://www.youtube.com https://www.google.com https://www.gstatic.com https://snap.licdn.com https://bat.bing.com;
          object-src 'none';
          frame-src 'self' https://www.google.com;`
          .replace(/\s+/g, ' ')
          .trim(), // Remove extra spaces and format CSP string
      },
      {
        key: 'Strict-Transport-Security',
        value: 'max-age=31536000; includeSubDomains; preload',
      },
      {
        key: 'X-Content-Type-Options',
        value: 'nosniff',
      },
      {
        key: 'Access-Control-Allow-Origin',
        value: baseUrl,
      },
      {
        key: 'Access-Control-Allow-Methods',
        value: 'GET,PUT,POST,DELETE',
      },
      {
        key: 'Access-Control-Allow-Headers',
        value: 'Content-Type',
      },
      {
        key: 'Cache-Control',
        value: 'private, no-cache, no-store, must-revalidate',
      },
      {
        key: 'Expires',
        value: '-1',
      },
      {
        key: 'Pragma',
        value: 'no-cache',
      },
    ],
  },
];

},
};

export default nextConfig;

[NovaNoodle7]

Hi! Thanks for sharing your next.config.ts and explaining the setup — that helps a lot.

I see the challenge: since your CSP header is set globally in next.config.ts via the headers() function, you’re generating a static nonce once during config load (crypto.randomUUID()), but Next.js requires a unique nonce per request so it can be applied dynamically to all inline scripts during hydration.

Here’s what you can do to fix it:
Move nonce generation into middleware or API layer that runs per request
Instead of generating the nonce once at config time, create a Next.js middleware or a server function that generates a fresh nonce on every HTTP request.

Inject the nonce dynamically into the CSP header for each request
In your middleware, set the Content-Security-Policy header with the fresh nonce included in the script-src directive.

Pass the nonce into your React components for hydration
You can pass the nonce via React Context or a custom Document (_document.tsx) so that all scripts Next.js injects (like hydration scripts) include the correct nonce attribute.

Why this is important:
Next.js inserts inline hydration scripts dynamically at runtime.

Those scripts need the nonce matching the CSP header for that request.

If the nonce is static or missing, the browser blocks the scripts, breaking hydration.

Example approach:

// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(req) {
const nonce = crypto.randomUUID();

const res = NextResponse.next();
res.headers.set(
'Content-Security-Policy',
default-src 'self'; script-src 'self' 'nonce-${nonce}'; ...
);

// Pass nonce to frontend via custom header or cookies
res.headers.set('x-nonce', nonce);

return res;
}
Then in your custom _document.tsx, read the nonce from headers or cookies and inject it into all script tags.

[Pri1esh]

Thanks for your suggestion. But during research i had gone through this solution of adding nonce dynamically. The part where i got stuck was "inject it into all script tags". How will I inject nonce in every internal script tag in my App router that does not consist any _document.ts file

[Pri1esh]

below are my findings from ChatGpt

can i not create or use any functionality such that all the dynamic scripts appended during hydration will automatically consits nonce from header X-nonce

ChatGPT said:

You’re asking the right question — and it’s one of the toughest to solve securely in a Next.js App Router setup today.

⚠️ Short Answer:

❌ No, there is currently no supported way in Next.js App Router to automatically apply the nonce from the x-nonce header to every dynamically injected script during hydration, like <script>self.__next_f.push(...)</script>.

---

❓Why Not?

1. App Router doesn’t support custom _document.tsx

• In Pages Router, you can customize how scripts are rendered using _document.tsx and override NextScript to inject nonce manually.

• In App Router, Next.js controls the HTML stream rendering internally — so you can’t hook into script generation.

2. Next.js internally adds inline <script> tags

• These hydration scripts are emitted directly by the Next.js server internals, and there’s no exposed way to pass nonce to them.

• Even if you pass a nonce in <html> or <head>, these internal scripts don’t inherit or use it.

---

✅ Recommended Secure Alternative: Use 'strict-dynamic' in CSP

It’s the only W3C-recommended and secure approach to allow trusted scripts to load other scripts — even ones you didn’t explicitly assign a nonce to.

🔒 What it does:

http
CopyEdit
Content-Security-Policy:
  script-src 'self' 'nonce-<your_nonce>' 'strict-dynamic';

• Any script you explicitly nonce (<script nonce="...">) is trusted.

• Any other scripts that are injected by those trusted scripts are also allowed (like hydration scripts).

• All other inline scripts or remote scripts are blocked.

This approach is now used by Google, GitHub, and Next.js themselves in their own CSP guidelines.

---

🧪 Hacky Alternative (NOT recommended for prod):

You could technically write a client-side mutation script that, after hydration:

ts
CopyEdit
document.querySelectorAll('script:not([nonce])').forEach(script => {
  script.setAttribute('nonce', myNonceFromHeaderOrGlobalVar);
});

🔴 But:

• This defeats the purpose of CSP — the browser evaluates the script before your patch can apply.

• CSP is enforced before DOM mutation, so the browser will block the script before your patch adds the nonce.

So this is insecure and will not work for protection.

---

✅ Summary

Goal | Is it possible? | Solution -- | -- | -- Add nonce to internal hydration scripts | ❌ Not possible | Use 'strict-dynamic' Add nonce to your own scripts | ✅ Yes | Use layout and x-nonce Secure dynamic inline scripts | ✅ Yes | Combine nonce + strict-dynamic Override NextScript (App Router) | ❌ Not supported | Use Pages Router if needed

---

✅ What You Should Do

1. Set nonce + strict-dynamic in middleware CSP.

2. Inject nonce to your custom scripts using layout.tsx and headers().

3. ✅ Everything else injected by Next.js (hydration, lazy loading) will be automatically trusted due to 'strict-dynamic'.

Let me know if you want a working App Router repo setup with this strategy implemented.