Content Security Policy (CSP), криптографические Nonces и Subresource Integrity (SRI)

1. Входящий HTTP-запрос в proxy.ts:
   - Генерируем crypto.randomUUID() -> "d3b07384..."
   - Формируем заголовок CSP:
     script-src 'nonce-d3b07384...' 'strict-dynamic';
   - Пробрасываем заголовок запроса: x-nonce: d3b07384...
          │
          ▼
2. Рендеринг Root Layout (Node.js SSR):
   - const nonce = (await headers()).get('x-nonce')
   - Внедрение в системные скрипты Next.js и сторонние виджеты:
     <Script src="https://analytics.com/tag.js" nonce={nonce} />
          │
          ▼
3. Получение HTML браузером:
   <script nonce="d3b07384...">/* Легитимный бандл Next.js */</script>
   <script>alert(document.cookie)</script> ◄── [Внедренный XSS-скрипт]
          │
          ▼
4. Проверка движком браузера:
   - Легитимный скрипт: Nonce совпадает с CSP-заголовком -> ИСПОЛНЯЕТСЯ
   - XSS-скрипт: Nonce отсутствует -> БЛОКИРУЕТСЯ С ОШИБКОЙ CSP

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

export default async function proxy(request: NextRequest) {
  // 1. Генерация криптографически стойкого псевдослучайного nonce (128 бит)
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');

  // 2. Построение строгой политики CSP Level 3
  // Замечание: 'strict-dynamic' игнорирует 'unsafe-inline' и домены в современных браузерах,
  // обеспечивая плавную обратную совместимость со старыми клиентами CSP Level 2.
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic' 'unsafe-inline' https:;
    style-src 'self' 'nonce-${nonce}' 'unsafe-inline';
    img-src 'self' blob: data: https://images.unsplash.com;
    font-src 'self' data:;
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
  `
    .replace(/\s{2,}/g, ' ')
    .trim();

  // 3. Проброс nonce в заголовки запроса для чтения в Root Layout
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-nonce', nonce);
  requestHeaders.set('Content-Security-Policy', cspHeader);

  // 4. Установка заголовка CSP в исходящий HTTP-ответ
  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });

  response.headers.set('Content-Security-Policy', cspHeader);
  return response;
}

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

import { headers } from 'next/headers';
import Script from 'next/script';
import './globals.css';

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Асинхронное чтение заголовков в Next.js 16
  const requestHeaders = await headers();
  const nonce = requestHeaders.get('x-nonce') || undefined;

  return (
    <html lang="ru">
      <head>
        {/* Next.js 16 автоматически подхватывает nonce для внутренних скриптов гидратации */}
      </head>
      <body className="bg-slate-950 text-slate-100 antialiased">
        {children}

        {/* Сторонний аналитический скрипт с явной передачей криптографического nonce */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-DEMOTRACKER"
          strategy="afterInteractive"
          nonce={nonce}
        />

        <Script id="google-analytics-init" strategy="afterInteractive" nonce={nonce}>
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-DEMOTRACKER');
          `}
        </Script>
      </body>
    </html>
  );
}

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    // Включение генерации атрибутов integrity="sha384-..." для всех чанков сборки
    sri: {
      algorithm: 'sha384',
    },
  },
};

export default nextConfig;