Security Headers | Bootspring Docs

Patterns for HTTP security headers in Next.js applications.

Overview#

Security headers protect your application from common attacks like XSS, clickjacking, and MIME sniffing. This pattern covers:

Next.js headers configuration
Content Security Policy (CSP)
CORS configuration
Cache control for sensitive data

Prerequisites#

# No additional packages required

Code Example#

Next.js Headers Configuration#

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'X-DNS-Prefetch-Control',
            value: 'on'
          },
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload'
          },
          {
            key: 'X-Frame-Options',
            value: 'SAMEORIGIN'
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin'
          },
          {
            key: 'Permissions-Policy',
            value: 'camera=(), microphone=(), geolocation=()'
          }
        ]
      }
    ]
  }
}

module.exports = nextConfig

Content Security Policy Builder#

// lib/csp.ts
type CspDirective =
  | 'default-src'
  | 'script-src'
  | 'style-src'
  | 'img-src'
  | 'font-src'
  | 'connect-src'
  | 'media-src'
  | 'object-src'
  | 'frame-src'
  | 'frame-ancestors'
  | 'base-uri'
  | 'form-action'
  | 'upgrade-insecure-requests'

export function buildCsp(directives: Partial<Record<CspDirective, string[]>>): string {
  const defaults: Partial<Record<CspDirective, string[]>> = {
    'default-src': ["'self'"],
    'script-src': ["'self'"],
    'style-src': ["'self'", "'unsafe-inline'"],
    'img-src': ["'self'", 'data:', 'https:'],
    'font-src': ["'self'"],
    'connect-src': ["'self'"],
    'frame-ancestors': ["'none'"],
    'base-uri': ["'self'"],
    'form-action': ["'self'"]
  }

  const merged = { ...defaults, ...directives }

  return Object.entries(merged)
    .map(([key, values]) => `${key} ${values!.join(' ')}`)
    .join('; ')
}

// Usage with Stripe
const csp = buildCsp({
  'script-src': ["'self'", 'https://js.stripe.com'],
  'frame-src': ["'self'", 'https://js.stripe.com'],
  'connect-src': ["'self'", 'https://api.stripe.com']
})

Middleware with Security Headers#

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { buildCsp } from '@/lib/csp'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

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

  const csp = buildCsp({
    'script-src': ["'self'", `'nonce-${nonce}'`],
    'style-src': ["'self'", "'unsafe-inline'"],
    'connect-src': [
      "'self'",
      'https://api.stripe.com',
      process.env.NEXT_PUBLIC_API_URL!
    ]
  })

  response.headers.set('Content-Security-Policy', csp)
  response.headers.set('X-Nonce', nonce)

  return response
}

Using Nonce for Inline Scripts#

// app/layout.tsx
import { headers } from 'next/headers'

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const headersList = await headers()
  const nonce = headersList.get('X-Nonce') ?? ''

  return (
    <html lang="en">
      <head>
        <script
          nonce={nonce}
          dangerouslySetInnerHTML={{
            __html: `
              window.__CONFIG__ = ${JSON.stringify({
                apiUrl: process.env.NEXT_PUBLIC_API_URL
              })}
            `
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

CORS Headers#

// lib/cors.ts
const ALLOWED_ORIGINS = [
  'https://app.example.com',
  'https://admin.example.com'
]

export function getCorsHeaders(origin: string | null) {
  const headers: Record<string, string> = {}

  if (origin && ALLOWED_ORIGINS.includes(origin)) {
    headers['Access-Control-Allow-Origin'] = origin
    headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'
    headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization'
    headers['Access-Control-Allow-Credentials'] = 'true'
    headers['Access-Control-Max-Age'] = '86400'
  }

  return headers
}

// Usage in API route
export async function OPTIONS(request: Request) {
  const origin = request.headers.get('origin')
  const corsHeaders = getCorsHeaders(origin)

  return new Response(null, {
    status: 204,
    headers: corsHeaders
  })
}

Cache Control for Sensitive Data#

// API responses with sensitive data
export async function GET() {
  const sensitiveData = await getSensitiveData()

  return Response.json(sensitiveData, {
    headers: {
      'Cache-Control': 'no-store, no-cache, must-revalidate, private',
      'Pragma': 'no-cache',
      'Expires': '0'
    }
  })
}

// Static/public data
export async function GET() {
  const publicData = await getPublicData()

  return Response.json(publicData, {
    headers: {
      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
      'CDN-Cache-Control': 'public, max-age=86400'
    }
  })
}

Permissions Policy#

// Restrict browser features
const permissionsPolicy = [
  'camera=()',
  'microphone=()',
  'geolocation=()',
  'interest-cohort=()', // Disable FLoC
  'payment=(self)',
  'usb=()',
  'magnetometer=()',
  'gyroscope=()',
  'accelerometer=()'
].join(', ')

response.headers.set('Permissions-Policy', permissionsPolicy)

Usage Instructions#

Add security headers in next.config.js for static configuration
Use middleware for dynamic headers like CSP with nonces
Configure CORS for API endpoints that need cross-origin access
Set appropriate cache control for sensitive vs public data
Use Permissions-Policy to disable unused browser features

Best Practices#

Start strict - Begin with restrictive policies and loosen as needed
Use nonces - Avoid unsafe-inline for scripts when possible
Test thoroughly - Security headers can break functionality
Monitor CSP violations - Use report-uri to track issues
HSTS preload - Submit your domain to the HSTS preload list
Review regularly - Update policies as your app evolves

CSRF Protection - Cross-site request forgery prevention
Input Validation - Validate all user input
API Middleware - Request middleware patterns
Rate Limiting - Protect against abuse