Безопасность React-приложений

Вы проведёте threat modeling, закроете опасные sinks и проверите server authorization/CSRF/supply-chain controls.

До начала достаточно JSX, forms/actions, routing, server state и browser security model. В конце должен появиться не конспект, а security review интерфейса комментариев с sanitization, safe URLs, BFF session и regression tests.

Обычная строка в JSX text/attribute экранируется. Но безопасность зависит от sink: HTML, URL, CSS, script имеют разные правила. Не делайте ручное replace <; используйте безопасный API и validation allowlist.

Рабочая проверка. Передайте payload в text и опасный sink, зафиксируйте разницу.

Типичная поломка. Считать escape одной функцией для всех contexts.

dangerouslySetInnerHTML обходит React escaping. Используйте только для осознанного HTML content после allowlist sanitizer, configured для target и актуального threat model. Sanitized value не модифицируют потом небезопасными plugins. Trusted Types/CSP могут усилить boundary.

Рабочая проверка. Санитизируйте markdown HTML и проверьте img/onerror/svg payloads.

Типичная поломка. Regex удаляет только <script>.

Недоверенный href проверяют через URL parser и allowlist схем/hosts. Для относительной внутренней навигации ограничивают origin/path; redirect target не принимает произвольный external URL. javascript: и опасные data URLs исключаются. Link text показывает destination осмысленно.

Рабочая проверка. Проверьте encoded protocol и protocol-relative URL.

Типичная поломка. href={userValue} без policy.

Token в localStorage доступен JavaScript и крадётся при XSS. HttpOnly cookie скрыта от JS, но автоматически отправляется browser, поэтому нужны SameSite/CSRF controls. Выбор зависит от architecture; никогда не логируйте credentials и не кладите secrets в client bundle.

Рабочая проверка. Нарисуйте threat model BFF cookie session.

Типичная поломка. Считать JWT безопасным только из-за подписи.

Cookie-auth mutation защищают SameSite, CSRF token/custom header и Origin/Fetch Metadata checks по architecture. GET не меняет state. CORS не является универсальной CSRF защитой, потому что browser может отправлять simple requests/forms. Server action остаётся endpoint-like boundary.

Рабочая проверка. Попробуйте cross-site form POST и проверьте rejection.

Типичная поломка. Mutation через GET link.

Экспортированная Server Function может быть вызвана клиентом через framework protocol. Проверяйте authentication, authorization на объект, schema, rate/idempotency и safe errors внутри каждой команды. Закрытая кнопка не является access control. Передавайте identifiers, а данные перечитывайте сервером.

Рабочая проверка. Вызовите action вручную с чужим recordId.

Типичная поломка. Доверять userId из hidden input.

Dependencies выполняют код при install/build/runtime. Lockfile/integrity дают reproducibility, не безопасность. Минимизируйте packages/scripts, audit advisories, pin critical tool, обновляйте с tests. Third-party browser script получает origin privileges; sandbox/consent/CSP ограничивают риск.

Рабочая проверка. Проведите inventory dependencies и script origins.

Типичная поломка. Добавить package ради trivial utility.

CSP ограничивает script/style/connect/frame sources и помогает снизить XSS impact; nonce/hash лучше broad unsafe-inline. frame-ancestors защищает от clickjacking. HSTS, nosniff, referrer policy и permissions policy дополняют defense. CSP не заменяет sanitization и authorization.

Рабочая проверка. Составьте report-only CSP и разберите violations.

Типичная поломка. Добавить unsafe-inline/unsafe-eval до исчезновения ошибок.

Найдите и исправьте stored XSS в markdown preview, javascript URL, token в localStorage/log, CSRF mutation и открытый redirect. Добавьте CSP plan, dependency audit и abuse tests server action.

Критерий завершения: untrusted payload не исполняется, credentials не раскрываются client JS без необходимости, сервер проверяет каждую mutation. Сначала зафиксируйте наблюдаемое поведение тестом или измерением, затем меняйте реализацию.