WebValid
• WebValid Team

Ochiq sim: Sun'iy intellekt koderlari loyihaning tarmoq xavfsizligini qanday buzadi

AI Coding Security Mixed Content CSP Vibe Coding

Texnologiyalar: React, Next.js App Router, Vite. Muammo: SI tomonidan yaratilgan frontend kodi orqali loyihaga kiritilgan tarmoq darajasidagi xavfsizlik xatolari — mixed content, yetishmayotgan xavfsizlik sarlavhalari, CORS wildcardlari va nazorat qilinmagan tarmoq so’rovlari.

Sizning HTTPS “qulflash” belgisi (padlock) yolg’on bo’lishi mumkin. To’g’ri, server sertifikati joyidadir, lekin tarmoq xavfsizligi faqat qulflash belgisi bilan cheklanib qolmaydi. Bu sahifa yuklangandan keyin ilovangiz amalga oshiradigan har bir tarmoq so’roviga bog’liq. Aynan shu erda SI tomonidan yaratilgan kod sizning xavfsizlik perimetringizda ko’rinmas teshiklarni yaratadi.

SI yordamchisidan “to’lov formasini qo’shish” yoki “analitikani ulash”ni so’raganingizda, u soniyalarda ishlaydigan kodni taqdim etadi. Ammo u prototipni haqiqiy ishlab chiqarish ilovasidan ajratib turadigan tarmoq darajasidagi xavfsizlik infratuzilmasini yaratmaydi. Content Security Policy (CSP) yo’q. HSTS majburiyati yo’q. CORS cheklovlari yo’q. Faqat yashil qulflash belgisi orqasida yashiringan himoyalanmagan HTTP trafigi.

Ushbu maqola SI koderlari tomonidan e’tiborsizlik bilan kiritilgan 5 ta tarmoq darajasidagi xavfsizlik xatosini va ularni qanday aniqlashni ko’rib chiqadi. Agar siz mijoz paketlarida sizib chiqqan API kalitlari (leaked API keys) azobini boshdan kechirgan bo’lsangiz, buni keyingi bob deb hisoblang: sirlaringiz xavfsiz bo’lishi mumkin, ammo transport qatlami ochiq qolmoqda.

Mixed Content: Ko’rinmas funksiya qotili

🔴 Critical · Brauzer sahifa funksionalligini bloklaydi · OWASP A05:2021 Security Misconfiguration

Mixed content (aralash kontent) sizning HTTPS sahifangiz resurslarni oddiy HTTP orqali yuklaganda yuzaga keladi. Zamonaviy brauzerlar bunga toqat qilmaydi — ular faol aralash kontentni (skriptlar, uslublar, iframe) butunlay bloklaydi va passiv kontentni (tasvirlar, media) iloji bo’lsa avtomat yangilaydi.

SI yordamchilari bu naqshni muntazam ravishda yaratadilar, chunki ularning o’quv ma’lumotlari http:// URL manzillarini ishlatadigan eski Stack Overflow javoblari va darsliklar bilan to’la. Model sizning joylashtirish maqsadingiz HTTPS ekanligini tushunmaydi — u shunchaki millionlab marta ko’rgan narsasini nusxalaydi.

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();
};

Himoya choralari sifatida CSP-ga upgrade-insecure-requests direktivasini qo’shish tavsiya etiladi, bu brauzerga so’rovlarni yuborishdan oldin barcha HTTP URL manzillarini avtomatik ravishda HTTPS-ga qayta yozishni buyuradi. Ammo bu shunchaki xavfsizlik tarmog’i, xavfli kod yozish uchun ruxsatnoma emas — asosiy sabab manbada tuzatilishi kerak.

WebValid buni qanday aniqlaydi: Network Scanner sahifa yuklanishi paytida har bir so’rovni kuzatib boradi va HTTPS sahifasidan kelayotgan har qanday http:// so’rovlarini bayroq ostiga oladi, bu esa sizga aniq URL va uni keltirib chiqargan elementni ko’rsatadi.

Xavfsizlik sarlavhalari (Security Headers) yo’q: Ochiq qolgan eshik

🔴 Critical · XSS va clickjacking hujumlari yumshatilmagan · OWASP A05:2021 Security Misconfiguration

Har qanday SI yordamchisidan noldan Next.js ilovasini yaratishni so’rang. Siz sahifalar, tartiblar (layouts), API yo’nalishlari va hatto autentifikatsiyani olasiz. Ammo siz hech qachon — agar aniq so’ramasangiz — tarmoq xavfsizligi sarlavhalarini o’rnatadigan middleware.ts faylini olmaysiz.

Bu kichik xato emas. Content Security Policy (CSP) bo’lmasa, ilovangiz Cross-Site Scripting (XSS) hujumlariga qarshi mutlaqo himoyasiz bo’ladi. HSTS bo’lmasa, foydalanuvchilar HTTP-ga tushib qolishi mumkin. X-Frame-Options (yoki CSP frame-ancestors) bo’lmasa, login sahifangiz clickjacking uchun tajovuzkorning iframe-iga joylashtirilishi mumkin.

OWASP HTTP Security Response Headers Cheat Sheet o’ndan ortiq tavsiya etilgan sarlavhalarni sanab o’tadi. SI tomonidan yaratilgan ilovalar odatda ularning nolga teng miqdori bilan yuboriladi.

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-ga asoslangan ilovalar uchun xavfsizlik sarlavhalari server darajasida (Nginx, Cloudflare yoki Node.js serveringiz) sozlanishi kerak, chunki Vite - bu runtime server emas, balki qurish vositasi.

Sarlavhalaringizni bepul tekshiring — WebValid xavfsizlik auditini ishga tushiring

WebValid buni qanday aniqlaydi: Security Scanner har bir HTTP javobini kritik xavfsizlik sarlavhalari mavjudligi va to’g’riligini tekshiradi, yetishmayotgan CSP, HSTS, X-Frame-Options va X-Content-Type-Options sarlavhalarini aniqlaydi.

Wildcard CORS: Hammasini ochib yuboradigan “tezkor tuzatish”

🟠 High · Avtorizatsiya qilingan API-lardan ma’lumotlarni o’g’irlash · OWASP A01:2021 Broken Access Control

CORS xatosi bilan kurashgan har bir dasturchi vasvasani biladi: shunchaki Access-Control-Allow-Origin: * ni qo’shing va qizil konsol xabarini yo’q qiling. SI yordamchilari ushbu yorliqni minglab Stack Overflow javoblaridan o’zlashtirgan. “CORS xatosini tuzatish” deb so’raganingizda, model “yadroviy variant”ga intiladi.

Muammo ochiq, faqat o’qish uchun mo’ljallangan API-larda emas. Muammo SI xuddi shu naqshni autentifikatsiya qilingan (authenticated endpoints) — foydalanuvchilarni aniqlash uchun cookie, token yoki sessiya sarlavhalariga tayanadigan API-larga qo’llaganida yuzaga keladi.

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();
});

Ushbu ikkinchi naqsh ayniqsa xavflidir: u brauzerga “har qanday veb-sayt ushbu API-ga avtorizatsiya qilingan so’rovlarni yuborishi va javobni o’qishi mumkin” deb aytadi. Tajovuzkor sahifani evil.com saytida joylashtiradi, foydalanuvchi unga tashrif buyurganida u sizning ilovangizga kirgan bo’lishi mumkin va tajovuzkorning JavaScript kodi foydalanuvchining profili yoki to’lov ma’lumotlarini yashirincha o’qishi mumkin.

Fixed Code — aniq ruxsat berilganlar ro’yxati (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 sahifa yuklanishi paytida Network Scanner orqali kutilmagan cross-origin tarmoq so’rovlarini aniqlaydi. Biroq, CORS sozlamalari server tomonidagi masala — WebValid server konfiguratsiyasini emas, balki simptomlarni (bloklangan so’rovlar) hisobot qiladi.

Nazorat qilinmagan uchinchi tomon skriptlari: Brauzeringizdagi ta’minot zanjiri

🟠 High · Tashqi kod tomonidan DOM kirish va ma’lumotlarni o’g’irlash · OWASP A08:2021 Software and Data Integrity Failures

SI-dan “Google Analytics-ni qo’shish” yoki “chat vidjetini integratsiya qilish”ni so’raganingizda, u tashqi CDN-ga ishora qiluvchi <script> tegini yaratadi. Oddiy, lekin xavfli.

Content Security Policy (CSP) script-src ni cheklamasa, uchinchi tomon skripti sizning kodingiz bilan bir xil huquqlarga ega bo’ladi. U formalarga kiritilgan ma’lumotlarni, cookie-fayllarni o’qishi, DOM-ni o’zgartirishi va ma’lumotlarni istalgan serverga yuborishi mumkin. Agar sotuvchining CDN-si buzilgan bo’lsa (Magecart hujumi kabi), zararli kod foydalanuvchilaringiz brauzerlarida hech qanday qarshiliksiz ishga tushadi.

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>

SRI xeshlarini skriptlarga qo’shish va ularni CSP script-src direktivasi orqali cheklash orqali siz faqat tasdiqlangan va o’zgartirilmagan skriptlar ishga tushishiga ishonch hosil qilishingiz mumkin.

Haqiqiy muammo jarayon darajasida: marketing guruhlari ko’pincha sizning CI/CD quvuringizdan chetlab o’tib, tag menejerlari orqali kuzatuv piksellarini kiritadilar. Garry Tan-ning SI tomonidan qurilgan veb-sayt auditida hujjatlashtirilganidek, SI tomonidan yaratilgan loyihalar ko’pincha o’nlab nazorat qilinmagan tarmoq so’rovlarini to’playdi — o’sha holatda 169 ta — har bir so’rov nima qilayotgani ustidan nazorat yo’q.

Tarmoqning yashirin xatolari: Ko’rinmas samaradorlik solig’i

🟡 Medium · Buzilgan resurslar, isrof qilingan tarmoq tezligi · Performance degradation

Ushbu turdagi xatolar eng ayyorona hisoblanadi, chunki hech narsa vizual ravishda buzilmaydi. Sahifangiz yuklanadi, foydalanuvchilar undan foydalanishadi va hammasi yaxshi ko’rinadi. Ammo brauzerning Network tabini oching va siz quyidagilarni topishingiz mumkin:

Ushbu nosozliklar yashirincha to’planib boradi. Har bir buzilgan tasvir isrof qilingan ulanishdir. Har bir takroriy so’rov server yukini ikki baravar oshiradi. Har bir siqilmagan 500KB JS fayli mobil foydalanuvchilarni 3G orqali qo’shimcha 2-3 soniya kutishga majbur qiladi.

WebValid buni qanday aniqlaydi: Network Scanner sahifa yuklanishi paytida har bir tarmoq so’rovini qamrab oladi, 4xx/5xx xatolarini bayroq ostiga oladi, haddan tashqari og’ir resurslarni aniqlaydi va vaqt chegarasidan oshib ketgan so’rovlarni ko’rsatadi. Bu aynan faqat jonli tarmoq auditida yuzaga chiqadigan muammo.

Fakt-chek: Haqiqiy dalillar

Ushbu maqoladagi da’volar tasdiqlangan texnik standartlar va hujjatlashtirilgan hodisalarga asoslangan:

Sizning tarmoq xavfsizligi nazorat ro’yxatingiz

SI tomonidan yaratilgan har qanday frontend-ni joylashtirishdan oldin, ushbu bandlarni tekshiring:

  1. Mixed Content — Loyihangizda http:// URL manzillarini qidiring. Ularni https:// yoki muhit o’zgaruvchilari (environment variables) bilan almashtiring.
  2. Xavfsizlik sarlavhalari — middleware.ts (Next.js) yarating yoki serveringizni (Vite/Nginx) CSP, HSTS va boshqa sarlavhalarni o’rnatish uchun sozlang.
  3. CORS siyosati — cors() wildcardlarini aniq ruxsat etilgan domenlar ro’yxati bilan almashtiring. Hech qachon Origin sarlavhasini tekshirmasdan aks ettirmang.
  4. Uchinchi tomon skriptlari — Barcha tashqi <script> teglariga SRI xeshlarini qo’shing. CSP-da script-src ni faqat tasdiqlangan domenlar bilan cheklang.
  5. Tarmoq auditi — DevTools Network tabini oching (yoki WebValid skanini ishga tushiring) va 4xx/5xx xatolari, takroriy so’rovlar va siqilmagan resurslarni qidiring.

WebValid nimalarni aniqlaydi

KategoriyaSkanerNimalarni aniqlaydi
Mixed content so’rovlariNetwork ScannerHTTPS sahifalaridagi HTTP so’rovlari
Yetishmayotgan xavfsizlik sarlavhalariSecurity ScannerCSP, HSTS, X-Frame-Options sarlavhalari yo’qligi
4xx/5xx tarmoq xatolariNetwork ScannerBuzilgan resurs havolalari, muvaffaqiyatsiz API so’rovlari
Paketlarda sizib chiqqan sirlarSecurity ScannerAPI kalitlari, tokenlar mijoz JS-da ochiq qolishi
Sekin yoki og’ir resurslarNetwork ScannerSiqilmagan resurslar, juda katta hajmdagi ma’lumotlar
Uchinchi tomon so’rovlari nazoratiNetwork ScannerSahifa yuklanishi paytidagi tashqi domen so’rovlari

WebValid tarmoq darajasidagi xavfsizlik muammolarini aniqlaydi va hisobot beradi. U sizning server konfiguratsiyangizni o’zgartirmaydi yoki sarlavhalarni o’zi kiritmaydi. Skanerlash natijalaridan SI yordamchisiga ma’lumot sifatida foydalaning — Markdown hisobotini to’g’ridan-to’g’ri Cursor-ga joylashtiring va u tuzatishni o’zi yaratsin.

Sizning SI yordamchingiz xavfsiz kod yozishi mumkin — u shunchaki qaerdadir xatoga yo’l qo’yganini bilmaydi. Unga xatolar xaritasini bering va u hamma narsani o’zi tuzatadi.

O’z saytingizda yoki test muhitingizda bepul tarmoq xavfsizligi auditini o’tkazing:

→ https://webvalid.dev/

Audit natijalaringiz bo’yicha savollaringiz bormi? Bepul auditni boshlang

Rasmiy hujjatlar

Ushbu maqola foydali bo'ldimi?