LogoENEnglish

Configuring CSP Without Nonces in Next.js – Using Subresource Integrity and Secure Static Rendering

If your application doesn’t require nonces, you can configure Content Security Policy (CSP) directly in next.config.js.. Next.js also supports experimental Subresource Integrity (SRI), allowing strict CSP enforcement while preserving static rendering and CDN caching. This article explains how to set CSP headers, enable SRI, handle development vs production differences, and safely integrate third-party scripts.

CSP without nonceSubresource IntegritySecurity configurationStatic Next.js

~3 دقیقه مطالعه · آخرین به‌روزرسانی ۴ آبان ۱۴۰۴

Setting CSP Without Using Nonces


If your application doesn’t rely on inline scripts, you can configure CSP headers directly in next.config.js:

const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline';
  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;
`

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
        ],
      },
    ]
  },
}

Using Subresource Integrity (SRI)


Next.js offers experimental support for SRI, allowing hash-based CSP enforcement without dynamic rendering.


Enabling SRI


Add the following to next.config.js:

const nextConfig = {
  experimental: {
    sri: {
      algorithm: 'sha256',
    },
  },
}

module.exports = nextConfig

CSP Configuration with SRI


SRI works independently by adding integrity hashes to your scripts. You can keep your CSP strict:

const cspHeader = `
  default-src 'self';
  script-src 'self';
  style-src 'self';
  img-src 'self' blob: data:;
  font-src 'self';
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;
`

module.exports = {
  experimental: {
    sri: {
      algorithm: 'sha256',
    },
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
        ],
      },
    ]
  },
}

Benefits of SRI Over Nonces


  • Supports static generation
  • Compatible with CDN caching
  • Improved performance without SSR per request
  • Build-time security with cryptographic hashes

Limitations of SRI


  • Experimental feature
  • Only works with Webpack (not Turbopack)
  • Only supported in App Router
  • Only applies at build time

Development vs Production


Development Environment


In development, you may need 'unsafe-eval' for debugging tools:

const isDev = process.env.NODE_ENV === 'development'

const cspHeader = `
  default-src 'self';
  script-src 'self' 'nonce-${nonce}' 'strict-dynamic' ${isDev ? "'unsafe-eval'" : ''};
  style-src 'self' ${isDev ? "'unsafe-inline'" : `'nonce-${nonce}'`};
  ...
`

Production Deployment


  • Ensure Proxy runs on all required routes
  • Allow Next.js static assets in your CSP
  • Add third-party domains to your CSP policy

Third-Party Scripts and CSP


To use services like Google Tag Manager:

import { GoogleTagManager } from '@next/third-parties/google'
import { headers } from 'next/headers'

export default async function RootLayout({ children }) {
  const nonce = (await headers()).get('x-nonce')

  return (
    <html lang="en">
      <body>
        {children}
        <GoogleTagManager gtmId="GTM-XYZ" nonce={nonce} />
      </body>
    </html>
  )
}

Example CSP for Google Scripts


const cspHeader = `
  default-src 'self';
  script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https://www.googletagmanager.com;
  connect-src 'self' https://www.google-analytics.com;
  img-src 'self' data: https://www.google-analytics.com;
`

Common CSP Violations


  • Inline styles: Use CSS-in-JS libraries that support nonces or move styles to external files
  • Dynamic imports: Ensure they’re allowed in script-src
  • WebAssembly: Add 'wasm-unsafe-eval' if needed
  • Service workers: Add appropriate policies for worker scripts

Version History


VersionChanges
v14.0.0Experimental SRI support added for hash-based CSP
v13.4.20Recommended for proper nonce handling and CSP header parsing

Conclusion


If your application doesn’t require nonce-based CSP, you can use SRI and direct CSP headers to maintain security while benefiting from static rendering and CDN caching. This approach is ideal for performance-focused applications with build-time integrity needs.


نوشته و پژوهش‌شده توسط دکتر شاهین صیامی

مقالات مرتبط

Advanced Client-Side Routing and Performance Hooks in Next.js

Next.js provides a rich set of client-side hooks and caching utilities that empower developers to build dynamic, responsive, and secure applications. From reading route parameters to tracking navigation state and reporting performance metrics, this guide walks you through the most important tools available in the App Router.

ادامه

Handling Authorization and Caching in Next.js: A Developer’s Guide

Next.js introduces powerful experimental features for access control and smart caching. This guide covers the unauthorized() function for custom 401 handling, unstable_cache for persistent memoization, updateTag for instant cache invalidation, and useLinkStatus for inline navigation feedback. Learn how to use these tools to build secure, performant, and responsive applications.

ادامه

redirect and refresh in Next.js — Smart Redirects and Client Refreshing via Server Actions

The redirect function in Next.js allows you to navigate users to a new route, returning either a 307 or 303 HTTP response depending on context. It works in Server Components, Client Components, Route Handlers, and Server Actions. The refresh function is used exclusively within Server Actions to refresh the client router. This article explains how both functions work, with practical examples and key considerations.

ادامه

NextRequest and NextResponse in Next.js — Managing Cookies, Headers, Redirects, and Rewrites

Next.js extends the native Web Request and Response APIs with NextRequest and NextResponse, offering powerful tools for managing cookies, headers, redirects, rewrites, and JSON responses. These utilities simplify server-side logic and improve control over routing, personalization, and security. This guide walks through their capabilities with practical examples and best practices.

ادامه

headers, ImageResponse, notFound, and permanentRedirect in Next.js — Request Handling, Dynamic Images, Errors, and Redirects

Next.js offers powerful tools for handling HTTP requests and responses in Server Components. The headers function lets you read incoming request headers. ImageResponse allows you to generate dynamic images using JSX and CSS. The notFound function renders a custom 404 page, and permanentRedirect enables permanent redirection to another route. This article explains how to use each feature with practical examples.

ادامه

A Complete Guide to Using metadata and generateMetadata in Next.js

In modern versions of Next.js, managing page metadata is more powerful and intuitive than ever. Metadata is automatically injected into the <head> of your pages and plays a vital role in SEO, social sharing, and user experience. This guide explains the two main ways to define metadata: using the static metadata object and the dynamic generateMetadata function.

ادامه
مقاله‌ی قبلیمقاله‌ی بعدی