Vibe Coding tuzoqlari: React-dagi top 6 ta yashirin zaiflik

Ushbu maqola React + Next.js App Router bilan qurilgan loyihalarni ko’rib chiqadi. Xavfsizlik tamoyillari umumiy, ammo kod misollari va sozlamalar (next.config.js, vercel.json) ushbu texnologiyalar to’plamiga xosdir.

Siz AI yordamchisidan komponent yozishni so’radingiz. U yozdi. U ishlayapti. Testlar yashil. Siz Merge tugmasini bosdingiz.

Va keyin — ma’lumotlar sizib chiqishi, Google PageSpeed-da nol ball, ko’zi ojiz foydalanuvchidan shikoyat va savol: “Nega bizda xavfsizlik sarlavhalari (security headers) yo’q?”.

AI kodlash vositalari sizning ishlab chiqarish (production) kontekstingizni bilmaydi. Ular uchun yangi o’rganuvchilar uchun qo’llanma va haqiqiy foydalanuvchilarga ega moliyaviy ilova o’rtasida farq yo’q. Natija — ular “ishlaydigan” ko’rinadigan, ammo OWASP Top 10 qoidalarini yashirincha buzadigan kod yozadilar.

Mana AI yordamchilari React + Next.js kodiga yashirincha kiritadigan 6 ta zaiflik. Va ularni 10 soniyada topishning yo’li.

Fakt-chek: AI qanday qilib zaif kodni yaratadi

🔍 Dalillar · O’qitishdagi xatoliklar · Kontekstga nisbatan ko’rlik

GitHub-ning ommaviy omborlarni tahlil qilish natijalariga ko’ra, React loyihalaridagi xavfsizlik sizib chiqishlarining katta qismi o’quv ma’lumotlarida uchraydigan namunalar — masalan, sanitarizatsiyasiz dangerouslySetInnerHTML dan foydalanish yoki frontendda muhit o’zgaruvchilarini qattiq kodlash (hardcoding) bilan bog’liq.

WebValid-dagi ichki testlarimizda AI kodlash yordamchilari (Cursor, Copilot, ChatGPT) zaifliklarni faqat tashqi skanerdan tuzilmaviy hisobot taqdim etilgandagina muvaffaqiyatli aniqladi va tuzatdi. Kontekstsiz “ushbu kodni xavfsizlik uchun ko’rib chiqing” deb so’ralganda, modellar arxitekturaviy sizib chiqishlarning (masalan, quyida keltirilgan API kalitlari bilan bog’liq muammolar) 68% qismini o’tkazib yubordi.

Sanitarizatsiyasiz dangerouslySetInnerHTML

🔴 Kritik · Foydalanuvchi sessiyasini o’g’irlash, GDPR jarimalari · OWASP A03:2021 Injection

AI yordamchilari ushbu naqshni yaxshi ko’radilar. Siz “HTML-ni API-dan render qilishni” so’raysiz — ular shunday yozadilar:

// ❌ Yomon AI kodi
function UserBio({ bio }: { bio: string }) {
  return <div dangerouslySetInnerHTML={{ __html: bio }} />;
}

Agar bio foydalanuvchidan kelsa — tabriklaymiz, sizda XSS bor. Hujumchi <script>document.cookie</script> kodini yuboradi va foydalanuvchilaringizning sessiyalarini o’g’irlaydi.

// ✅ Tuzatish: DOMPurify orqali sanitarizatsiya
import DOMPurify from "dompurify";

function UserBio({ bio }: { bio: string }) {
  const sanitizedBio = DOMPurify.sanitize(bio);
  return <div dangerouslySetInnerHTML={{ __html: sanitizedBio }} />;
}

GitHub ommaviy omborlarini qidirish ma’lumotlariga ko’ra, sanitarizatsiyasiz dangerouslySetInnerHTML minglab React loyihalarida uchraydi. AI yordamchilari o’quv ma’lumotlaridan ushbu namunani “ushbu HTML qayerdan kelgan?” degan savolni bermasdan takrorlaydilar.

Client bundle ichidagi API kalitlari

🔴 Kritik · To’g’ridan-to’g’ri moliyaviy yo’qotishlar · OWASP A02:2021 Cryptographic Failures

Vibe Coding-ning eng keng tarqalgan “gunohi”. AI yordamchisi ko’pincha yashirin kalitlaringizga NEXT_PUBLIC_ prefiksini qo’shish orqali buzilgan mijoz (client) tomonidagi API chaqiruvini “tuzatadi”. Bu so’rovni ishlashiga majbur qiladi — lekin maxfiy kalitingizni ochiq JavaScript to’plamiga (bundle) kiritadi, bu har qanday foydalanuvchi uchun DevTools-da ko’rinadi.

// ❌ Yomon AI kodi — kalit JS bundle-ga sizib chiqadi
"use client";
const response = await fetch("https://api.openai.com/v1/chat/completions", {
  headers: {
    Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`, // ❌ SIZIB CHIqISH
  },
});

Tuzatish: Barcha nozik mantiqni Server Action yoki Route Handler-ga o’tkazing, bu yerda muhit o’zgaruvchilari qat’iy ravishda serverda qoladi.

Bundle sizib chiqishi mexanikasi va Next.js Taint API kabi ilg’or himoyadan foydalanish bo’yicha batafsil ma’lumot olish uchun bizning qo’llanmani ko’ring: API kalitlari sizib chiqishi qo’llanmasi.

Agar siz SaaS-ni ishga tushirsangiz, JS bundle ichidagi kalit har qanday brauzerning DevTools-da ko’rinadi. WebValid bu kabi sizib chiqishlarni hackerlar topishidan oldin aniqlash uchun ommaviy to’plamlaringizni avtomatik ravishda skanerlaydi.

Ko’rinmas muammolar ko’rinadigan hisobotlarni talab qiladi

WebValid kabi vositalar AI yordamchilari ko’pincha e’tibordan chetda qoldiradigan ushbu arxitekturaviy xatolarni aniqlash uchun ilovangizni skanerlaydi.

Xavfsizlik sarlavhalari (CSP, X-Frame-Options, HSTS) yo’qligi

🟠 Yuqori · Clickjacking, MitM orqali tokenni o’g’irlash · OWASP A05:2021 Security Misconfiguration

AI yordamchilari HTTP sarlavhalarini sozlamaydilar. Bu tushunarli — ular server sozlamalarini emas, balki komponentlarni yozadilar. Natijada sizning saytingiz zararli domenning <iframe> ichiga joylashtirilishi mumkin, bu esa clickjacking hujumiga imkon beradi.

Next.js + Vercel uchun sarlavhalarni qo’shishning ikki yo’li mavjud:

1-usul — next.config.js (self-hosting uchun):

// ✅ next.config.js
const securityHeaders = [
  { key: "X-Frame-Options", value: "SAMEORIGIN" },
  { key: "X-Content-Type-Options", value: "nosniff" },
  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
  {
    key: "Content-Security-Policy",
    value: "default-src 'self'; script-src 'self';",
  },
];

module.exports = {
  async headers() {
    return [{ source: "/(.*)", headers: securityHeaders }];
  },
};

2-usul — vercel.json (Vercel-da deplo qilish uchun — tavsiya etiladi):

{
  "headers": [
    {
      "source": "/:path*",
      "headers": [
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=63072000; includeSubDomains; preload"
        },
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "SAMEORIGIN" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
      ]
    }
  ]
}

CSP-da script-src 'unsafe-inline' dan foydalanmang — bu inline script XSS hujumlaridan himoyani nolga tushiradi. Agar Next.js inline skriptlarni talab qilsa — nonce-based CSP dan foydalaning.

WebValid bir marta skanerlash orqali HTTP javobida barcha sarlavhalar mavjudligini tekshiradi.

console.log orqali maxfiy ma’lumotlarning ishlab chiqarishga (production) sizib chiqishi

🟡 O’rta · PII-ning tashqi log agregatorlariga sizib chiqishi · OWASP A09:2021 Security Logging Failures

Vibe Coding sessiyalari paytida, disk raskadrovka loglari tabiiy ravishda qolib ketishi mumkin:

// ❌ Yomon AI kodi
async function loginUser(credentials: Credentials) {
  console.log("Login attempt:", credentials); // logda parol qoldi!
  const user = await authService.login(credentials);
  console.log("User logged in:", user); // logda token qoldi!
  return user;
}

Agar ishlab chiqarish loglaringiz Sentry, Datadog yoki Logtail kabi vositalarda yig’ilsa — siz foydalanuvchilaringizning parollarini tashqi xizmatga yubordingiz.

// ✅ Tuzatish: faqat nozik bo'lmagan ma'lumotlarni loglash
import { createLogger } from "@your-scope/logger";

const logger = createLogger({ scope: "AuthService" });

async function loginUser(credentials: Credentials) {
  logger.info("Login attempt", { email: credentials.email }); // faqat email
  const user = await authService.login(credentials);
  logger.info("Login successful", { userId: user.id }); // faqat ID
  return user;
}

Bu shunchaki taxmin emas. Twitter (2018), GitHub (2018), Facebook (2019) kabi yirik kompaniyalarda parollarning loglar orqali sizib chiqishi bilan bog’liq haqiqiy hodisalar sodir bo’lgan. AI yordamchilari ma’lumotlarni filtrlamaydilar — ular siz so’ragan narsani aniq yaratadilar.

Buzilgan semantika va ARIA

🟡 O’rta · Yo’qotilgan SEO trafigi, ADA muvofiqligi buzilishi · Accessibility Violation (WCAG 2.1)

AI yordamchilari <div> ga onClick ishlov beruvchisini (handler) o’rnatish orqali hamma narsani bosiladigan (clickable) qiladilar. Bu vizual jihatdan tez va ishlaydi — lekin crawlability va accessibility-ni o’ldiradi:

// ❌ Yomon AI kodi
function ProductCard({ product }: { product: Product }) {
  return (
    <div onClick={() => navigate(`/products/${product.id}`)}>
      <div>{product.name}</div>
      <div>{product.price}</div>
    </div>
  );
}

Muammolar:

• Screen reader-lar interaktiv elementni tanimaydi — ko’zi ojiz foydalanuvchi mahsulotga kira olmaydi.
• Googlebot onClick orqali havolalar grafigini tuzmaydi — faqat <a href> orqali.
• Sahifalar orasidagi PageRank oqimi yo’qoladi.

// ✅ Tuzatish: semantik HTML
function ProductCard({ product }: { product: Product }) {
  return (
    <article>
      <a href={`/products/${product.id}`}>
        <h2>{product.name}</h2>
        <span>{product.price} $</span>
      </a>
    </article>
  );
}

Server Actions-da avtorizatsiya yo’qligi

🔴 Kritik · Har qanday foydalanuvchi nomidan harakatlarni amalga oshirish · OWASP A01:2021 Broken Access Control

AI yordamchilari ko’pincha Server Action-larni yaratadilar — ammo avtorizatsiya tekshiruvlarini kiritishni e’tibordan chetda qoldiradilar.

// ❌ Yomon AI kodi
"use server";

export async function deleteAccount(userId: string) {
  await db.user.delete({ where: { id: userId } });
}

Har kim POST so’rovini yuborishi va boshqa birovning hisobini o’chirib tashlashi mumkin.

// ✅ Tuzatish: mantiq ichida avtorizatsiya tekshiruvi
"use server";

import { getServerSession } from "next-auth";

export async function deleteAccount(userId: string) {
  const session = await getServerSession();

  if (!session || session.user.id !== userId) {
    throw new Error("Unauthorized");
  }

  await db.user.delete({ where: { id: userId } });
}

6 ta zaiflikning barchasini 10 soniyada qanday topish mumkin

Siz kodni qo’lda ko’rib chiqishingiz yoki to’liq auditga bir kun sarflashingiz mumkin. Ammo tezroq yo’li bor:

1. Ommaviy URL manzilini olish uchun mahalliy loyihangizni ngrok orqali ishga tushiring.
2. Uni WebValid-ga joylashtiring.
3. Markdown formatidagi tayyor ai-fix-prompt-ni oling — uni AI yordamchingizga joylashtiring va 2 daqiqada hammasini tuzating.

Sizning 6-bo’limdan iborat Generativ Xavfsizlik Tekshiruvi

1. Ma’lumotlarni kiritish: AI dangerouslySetInnerHTML-dan foydalandimi?
2. Muhit o’zgaruvchilari: Yashirin kalitlar bormi?
3. Xavfsizlik sarlavhalari: vercel.json ni sozlaganmisiz?
4. Ma’lumotlar oqishi: To’g’ridan-to’g’ri console.log bayonotlari mavjudmi?
5. Interaktiv SEO: Yagona bossa bo’ladigan elementlaringizni ko’rib chiqing.
6. Harakatlarni tekshirish: Har bir 'use server' harakati avtorizatsiya tekshiruvi bilan boshlanadimi?

→ WebValid-da loyihangizni bepul sinab ko’ring

Rasmiy hujjatlar

Security

• OWASP Top 10
• OWASP XSS Prevention Cheat Sheet
• MDN: Content Security Policy (CSP)

Next.js

• Next.js: Security Headers
• Next.js: Environment Variables
• Next.js: Taint API
• Next.js: Server Actions Security

Vercel

• Vercel: Security Headers via vercel.json

Accessibility

• WCAG 2.1 Quick Reference

SEO

• Google: Crawlable Links