12 апреля 2026 г. • WebValid Team

Оголённый провод: Как ИИ-кодеры оставляют сеть без защиты

AI Coding Security Mixed Content CSP Vibe Coding

Стек: React, Next.js App Router, Vite. Проблема: Проколы на уровне сети, незаметно вносимые сгенерированным ИИ фронтенд-кодом — mixed content, отсутствующие security-заголовки, wildcard CORS и неконтролируемые сетевые запросы.

Ваш зеленый замочек HTTPS — это ложь. Ну, не совсем: сертификат сервера, скорее всего, в порядке. Но сетевая безопасность — это не только иконка замка. Это каждый отдельный сетевой запрос, который делает ваше приложение после загрузки страницы. И именно здесь сгенерированный ИИ код создает невидимые дыры в вашем периметре безопасности.

Когда вы просите ИИ-ассистента “добавить форму оплаты” или “подключить аналитику”, он за секунды выдает рабочий код. Но он не выдает сетевую инфраструктуру безопасности, которая отличает прототип от production-решения. Никакой Content Security Policy (CSP). Никакого HSTS. Никаких жестких CORS-ограничений. Только сырой, незащищенный HTTP-трафик, прячущийся за зеленым замочком.

Эта статья разбирает 5 ошибок сетевого уровня, которые ИИ-кодеры совершают молча, и то, как их обнаружить до того, как пострадают ваши пользователи. Если вы уже пережили боль от утекших API-ключей в клиентских бандлах, считайте это следующей главой: ваши секреты могут быть в безопасности, но транспортный уровень полностью открыт.

Mixed Content: Тихий убийца фич

🔴 Критично · Браузер блокирует функциональность · OWASP A05:2021 Security Misconfiguration

Mixed content (смешанное содержимое) возникает, когда ваша HTTPS-страница загружает ресурсы по обычному HTTP. Современные браузеры этого не терпят: они полностью блокируют активный mixed content (скрипты, стили, iframe) и автоматически пытаются обновить пассивный (картинки, медиа).

ИИ-ассистенты регулярно генерируют этот паттерн, потому что их обучающие данные переполнены старыми ответами со Stack Overflow с http:// ссылками. Модель не понимает, что ваш продакшен использует HTTPS — она просто копирует то, что видела миллионы раз.

Bad AI Code:

// AI-generated: loads font from HTTP CDN
const loadFonts = () => {
  const link = document.createElement("link");
  link.href = "http://fonts.googleapis.com/css2?family=Inter";
  link.rel = "stylesheet";
  document.head.appendChild(link);
};

// AI-generated: fetches data from hardcoded HTTP endpoint
const fetchProducts = async () => {
  const res = await fetch("http://api.example.com/v1/products");
  return res.json();
};

Fixed Code:

// Always use HTTPS or protocol-relative URLs
const loadFonts = () => {
  const link = document.createElement("link");
  link.href = "https://fonts.googleapis.com/css2?family=Inter";
  link.rel = "stylesheet";
  document.head.appendChild(link);
};

// Use environment variables for API base URLs
const fetchProducts = async () => {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/v1/products`);
  return res.json();
};

Дополнительная защита — директива upgrade-insecure-requests в CSP, которая приказывает браузеру невидимо переписывать все HTTP-URL на HTTPS перед выполнением запросов. Но это страховка, а не лицензия на плохой код: первопричину нужно устранять в исходниках.

Как это ловит WebValid: Network Scanner мониторит каждый запрос во время загрузки страницы и помечает любые http:// запросы, исходящие с HTTPS-страницы, показывая точный URL и элемент, который его вызвал.

Ноль security-заголовков: Открытая дверь

🔴 Критично · XSS и clickjacking атаки не подавляются · OWASP A05:2021 Security Misconfiguration

Попросите любой ИИ сгенерировать вам Next.js приложение с нуля. Вы получите страницы, лейауты, API-роуты и, возможно, даже аутентификацию. Но то, чего вы никогда не получите без явной просьбы — это файл middleware.ts, который устанавливает заголовки безопасности (security headers).

Это далеко не мелочь. Без Content Security Policy (CSP) у вашего приложения нулевая защита от XSS. Без HSTS пользователи при первом подключении могут быть подвергнуты downgrade-атаке до HTTP. Без X-Frame-Options (или CSP frame-ancestors) вашу страницу логина могут встроить в хакерский iframe для кликджекинга.

Список OWASP HTTP Security Response Headers Cheat Sheet содержит более десяти рекомендованных заголовков. Сгенерированные ИИ приложения обычно выходят в релиз с нулем заголовков.

Bad AI Code — Next.js with no security middleware:

// next.config.ts — AI generates this with zero security headers
const nextConfig = {
  reactStrictMode: true,
  images: { domains: ["cdn.example.com"] },
};
export default nextConfig;

Fixed Code — Next.js middleware with security headers:

// middleware.ts — the file AI never creates
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const nonce = crypto.randomUUID();
  const csp = [
    `default-src 'self'`,
    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
    `style-src 'self' 'nonce-${nonce}'`,
    `img-src 'self' data: https:`,
    `font-src 'self' https://fonts.gstatic.com`,
    `connect-src 'self' https://api.example.com`,
    `frame-ancestors 'none'`,
    `upgrade-insecure-requests`,
  ].join("; ");

  const response = NextResponse.next();
  response.headers.set("Content-Security-Policy", csp);
  response.headers.set(
    "Strict-Transport-Security",
    "max-age=63072000; includeSubDomains; preload",
  );
  response.headers.set("X-Content-Type-Options", "nosniff");
  response.headers.set("X-Frame-Options", "DENY");
  response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
  response.headers.set(
    "Permissions-Policy",
    "camera=(), microphone=(), geolocation=()",
  );

  return response;
}

Для Vite-приложений заголовки безопасности нужно настраивать на уровне сервера (Nginx, Cloudflare или Node.js сервер), так как Vite — это инструмент сборки, а не runtime-сервер.

Просканируйте свои заголовки бесплатно — запустите аудит в WebValid

Как это ловит WebValid: Security Scanner проверяет каждый HTTP-ответ на наличие критических security-заголовков, подсвечивая отсутствие CSP, HSTS, X-Frame-Options и X-Content-Type-Options.

Wildcard CORS: “Быстрый фикс”, который открывает всё

🟠 High · Кража данных с авторизованных API · OWASP A01:2021 Broken Access Control

Любой разработчик, который боролся с ошибкой CORS, знает соблазн: просто добавь Access-Control-Allow-Origin: * и заставь красное сообщение в консоли исчезнуть. ИИ-ассистенты впитали этот ярлык из тысяч ответов на Stack Overflow. Когда вы пишете “исправь ошибку CORS”, модель тянется к «атомной кнопке».

Проблема не в wildcard на публичных read-only API. Проблема возникает, когда ИИ применяет этот алгоритм к авторизованным эндпоинтам — API, которые полагаются на cookies или токены для идентификации пользователей.

Bad AI Code — Express with wildcard CORS:

// AI-generated: "just add cors" to fix the error
const cors = require("cors");
app.use(cors()); // Access-Control-Allow-Origin: *

Even worse — reflected origin with credentials:

// AI-generated: bypasses wildcard + credentials restriction
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", req.headers.origin || "*");
  res.setHeader("Access-Control-Allow-Credentials", "true");
  next();
});

Второй паттерн особенно опасен: он сообщает браузеру “любой сайт может делать авторизованные запросы к этому API и читать ответы”. Хакер размещает скрипт на evil.com, жертва заходит на него, будучи залогиненной в вашем приложении, и скрипт скрытно вытягивает её профиль продаж или приватные данные.

Fixed Code — explicit allowlist:

const allowedOrigins = [
  "https://app.yourdomain.com",
  "https://staging.yourdomain.com",
];

app.use(
  cors({
    origin: (origin, callback) => {
      if (!origin || allowedOrigins.includes(origin)) {
        callback(null, true);
      } else {
        callback(new Error("Not allowed by CORS"));
      }
    },
    credentials: true,
  }),
);

WebValid обнаруживает кросс-доменные сетевые запросы при загрузке страницы через Network Scanner. Однако настройка CORS — это задача сервера: WebValid рапортует о симптомах (заблокированные запросы), а не анализирует сам конфиг сервера.

Сторонние скрипты без ограничений: Цепочка поставок в браузере

🟠 High · Доступ к DOM и эксфильтрация данных внешним кодом · OWASP A08:2021 Software and Data Integrity Failures

Когда вы просите ИИ “добавить Google Analytics” или “виджет чата”, он генерирует <script> тег, указывающий на внешний CDN. Просто, работает, но ужасно опасно.

Без Content Security Policy, ограничивающей директиву script-src, сторонний скрипт получает те же права, что и ваш собственный код. Он может читать инпуты, куки, изменять DOM и отправлять данные на любой сервер. Если CDN вендора взломают (атака Magecart) — вредоносный код выполнится в браузерах ваших пользователей без малейшего сопротивления.

Bad AI Code:

<!-- AI-generated: inject analytics with zero restrictions -->
<script src="https://cdn.analytics-vendor.com/tracker.js"></script>
<script src="https://widget.chat-service.io/embed.js"></script>

Fixed Code — CSP + Subresource Integrity (SRI):

<!-- Restrict script sources via CSP and verify integrity -->
<script
  src="https://cdn.analytics-vendor.com/tracker.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxGpTe3+lOBTrVQ8p1J7V9PoVb5rKN"
  crossorigin="anonymous"
></script>

В сочетании с script-src в CSP, который явно разрешает только надежные домены, этот подход гарантирует, что запускаются только проверенные скрипты.

Истинная проблема кроется глубже: маркетинговые команды (или ИИ-кодеры) часто встраивают десятки трекинг-пикселей в обход любых проверок. Как показал наш разбор ИИ-кода сайта Гарри Тана, сгенерированные проекты мгновенно обрастают огромным количеством сетевых запросов (в том случае их было 169) без малейшего контроля над тем, что именно делает каждый из них.

Молчаливые сетевые сбои: Невидимый налог на скорость

🟡 Medium · Битые ресурсы, лишний трафик, деградация UX · Performance degradation

Это самая коварная категория, потому что визуально ничего не ломается. Пользователи взаимодействуют со страницей, и все кажется нормальным. Но откройте вкладку Network в DevTools, и вы можете найти:

404 ошибки на изображениях, шрифтах или API-вызовах, потому что ИИ прописал кривые пути.
Дубликаты запросов, когда ИИ вызывает один и тот же API в разных местах без кеширования.
Несжатые ассеты, отдаваемые без gzip или Brotli, потому что ИИ так и не настроил пайплайн сборки сервера.
Цепочки (waterfalls), где ресурсы грузятся последовательно, а не параллельно.

Каждая битая картинка — это впустую потраченное соединение. Каждый дубль удваивает нагрузку на сервер. Каждый не пожатый JS-бандл заставляет мобильных пользователей ждать лишние 2-3 секунды.

Как это ловит WebValid: Network Scanner перехватывает все сетевые запросы при загрузке, подсвечивая статус-коды 4xx/5xx, экстремально тяжелые ресурсы и прерывания. Это ровно тот тип проблем, который не виден в вашем IDE линтере или окне чата редактора Cursor.

Факт-чек: Реальные данные

Заявления в этой статье основаны на проверяемых технических стандартах:

Факты: OWASP Top 10 (2021) классифицирует отсутствие security-заголовков как уязвимость A05:2021 Security Misconfiguration.
Факты: По документации MDN современные браузеры блокируют активный mixed content, подтверждая, что любые http:// ресурсы на HTTPS-сайтах сломаются.
Факты: Наш анализ vibe-кодинг сайта Гарри Тана задокументировал 169 сетевых запросов при первой загрузке, включая битые ссылки и подозрительные сторонние скрипты.
Факты: Chrome 124+ (2024 год) намертво апгрейдит весь mixed content до HTTPS. Если ресурса нет на HTTPS, он просто тихо отваливается без старых предупреждений “not secure”.
Опыт (от редакции): По нашему наблюдению, ИИ-сгенерированные приложения выходят в свет с нулем security-заголовков по умолчанию, так как конфигурация инфраструктуры и заголовков лежит вне контекста оптимизации текущего React-файла модулей.

Ваш чек-лист сетевой безопасности

Перед деплоем любого сгенерированного фронтенда проверяйте эти пункты:

Mixed Content — Ищите в кодовой базе http://. Замените на https://. Добавьте upgrade-insecure-requests в CSP для страховки.
Security Headers — Создайте middleware.ts (Next.js) или настройте сервер (Nginx) для выдачи CSP, HSTS, X-Content-Type-Options, X-Frame-Options и Referrer-Policy.
CORS Policy — Замените все cors()-wildcards на жесткий белый список (allowlist) доменов. Никакого отражения Origin хидера без валидации.
Third-Party Scripts — Добавьте SRI кэши (integrity) на все <script> элементы извне. Жестко пропишите script-src в CSP.
Сетевой аудит — Откройте вкладку Network в DevTools (или запустите WebValid) и ищите 4xx/5xx ошибки, дубликаты и “тяжелые” ответы сервера.

Что находит WebValid

Категория	Сканер	Что именно обнаруживает
Запросы Mixed content	Network Scanner	HTTP-обращения с HTTPS-страниц
Отсутствие security-заголовков	Security Scanner	Пустые или неполные CSP, HSTS, X-Frame-Options
4xx/5xx сетевые ошибки	Network Scanner	Битые ссылки на ассеты, упавшие вызовы API
Утекшие секреты в бандлах	Security Scanner	API-ключи, встроенные в публичные JS-компоненты
Медленные “тяжелые” ресурсы	Network Scanner	Несжатые файлы ассетов без минификации
Third-party трекинг	Network Scanner	Все запросы на незнакомые домены при загрузке

WebValid сканирует финальный собранный продукт. Он не внедряет заголовки сам. Используйте результаты сканирования напрямую в вашем AI-ассистенте — просто вставьте Markdown отчет в Cursor, и ИИ сам напишет фиксы.

Ваш ИИ-ассистент умеет писать безопасный код — он просто не знает, в каком месте он ошибся в прошлый раз. Дайте ему карту ошибок, и он всё исправит.

Запустите бесплатный аудит сетевой безопасности на вашем сайте:

→ https://webvalid.dev/

Есть вопросы по результатам проверки? Начать бесплатный аудит