Brauzer xotirasi va xavfsizlik modeli: cookie, localStorage va sandbox

Qisqacha: Brauzer sayt ma'lumotlarini bir nechta omborda saqlaydi: cookie (kichik, har so'rovda serverga boradi), localStorage (doimiy), sessionStorage (tab yopilguncha), IndexedDB (katta hajm) va HTTP kesh (fayllar nusxasi). Har bir ombor origin bo'yicha ajratilgan — bir sayt boshqasining ma'lumotini o'qiy olmaydi. Buning ustiga har sayt alohida, huquqlari cheklangan jarayonda (sandbox) ishlaydi.

Bu darsda

• Beshta brauzer omborini farqlaysiz va har vaziyatga mosini tanlaysiz.
• Nega maxfiy tokenni localStorage'da saqlash xavfli ekanini tushuntirasiz.
• Sandbox va site isolation brauzerni qanday himoya qilishini ayta olasiz.
• Inkognito rejimi nimani yashiradi va nimani yashirmaydi — aniq bilasiz.
• Kengaytma so'raydigan ruxsatlarni o'qib, xavfini baholay olasiz.

Oldin bilishingiz kerak: HTTP sarlavhalari, MIME turlari, cookie va kesh, Origin va Same-Origin Policy, Brauzer tuzilishi va dvigatellar.

1. Nega bu kerak?

Malika IlmHamroh'da tungi rejimni yoqdi. Ertasi kuni saytga kirdi — tungi rejim o'z joyida. Telegram Web'ga kirganida esa har safar parol so'ralmaydi. Bu ma'lumotlar qayerda saqlanyapti?

Javob — Malikaning brauzerida. Lekin shu yerda xavotirli savol tug'iladi: sayt kompyuterda ma'lumot saqlay olsa, u boshqa fayllarni ham o'qiy oladimi? Bir tabdagi zararli sayt qo'shni tabdagi bank sahifasidan pul ma'lumotini o'g'irlay oladimi?

Yo'q. Brauzer ichida qat'iy devorlar bor. Bu darsda omborlarni ham, devorlarni ham ko'ramiz. Veb-dasturchi uchun bu ikki mavzu ajralmas: ma'lumotni noto'g'ri omborga qo'ysangiz, devor ham yordam bermaydi.

2. Brauzer omborlari: umumiy ko'rinish

2.1 Uy o'xshatishi

Brauzer omborlarini uydagi joylarga o'xshatamiz:

• Cookie — cho'ntakdagi kichik qog'oz. Joyi kam, lekin qayerga borsangiz, o'zingiz bilan olib yurasiz.
• localStorage — shkaf. Narsa uzoq saqlanadi, siz olib tashlamaguningizcha turadi.
• sessionStorage — stol ustidagi qog'oz. Xonadan chiqib ketsangiz, tozalab tashlanadi.
• IndexedDB — katta omborxona. Ko'p va murakkab narsalar uchun.
• HTTP kesh — muzlatkich. Bozordan olingan mahsulot — qayta bozorga bormaslik uchun.

2.2 Taqqoslash jadvali

Hajmlar taxminiy — ular brauzerga va diskdagi bo'sh joyga qarab farq qiladi.

2.3 Eng muhim qoida: har origin — alohida ombor

Origin darsida o'rgandik: origin = sxema + host + port. Brauzer har bir origin uchun alohida localStorage, sessionStorage va IndexedDB ochadi.

https://ilmhamroh.uz saqlagan ma'lumotni https://example.com o'qiy olmaydi. Hatto http://ilmhamroh.uz (sxemasi boshqa) ham o'qiy olmaydi. Xuddi ko'p qavatli uydagi kvartiralar kabi: har birining o'z kaliti, o'z shkafi.

Tekshirib ko'ring: https://shop.example.com localStorage'ga savat ma'lumotini yozdi. https://example.com sahifasi uni o'qiy oladimi?

3. Cookie: qisqa takror va xavfsizlik bayroqlari

Sarlavhalar darsida cookie bilan tanishdik: server javobida Set-Cookie sarlavhasini yuboradi, brauzer uni saqlaydi va shu saytga har keyingi so'rovda o'zi qo'shib yuboradi.

Server javobi:
Set-Cookie: sessiya=xyz789; HttpOnly; Secure; SameSite=Lax; Max-Age=86400

Keyingi har so'rovda brauzer qo'shadi:
Cookie: sessiya=xyz789

Cookie'ning asosiy vazifasi — serverga "bu o'sha foydalanuvchi" deb eslatish. Shuning uchun unda ko'pincha sessiya identifikatori saqlanadi — tizimga kirganingizni bildiruvchi takrorlanmas kod.

Bayroqlarni takrorlaymiz:

• HttpOnly — JavaScript bu cookie'ni o'qiy olmaydi. Uni faqat brauzer so'rovlarga qo'shadi.
• Secure — cookie faqat HTTPS orqali yuboriladi.
• SameSite — begona saytdan boshlangan so'rovlarga cookie qo'shiladimi (Strict, Lax, None). Yozilmasa, Chrome uni Lax deb hisoblaydi.
• Max-Age — necha soniya yashashi. 86400 soniya = 24 soat. Yozilmasa, cookie brauzer yopilganda o'chadi.

Bu bayroqlar sarlavhalar darsining "Hujumchi nigohi" bo'limida ko'rgan ikki hujumga qarshi turadi:

• XSS (Cross-Site Scripting) — saytga begona JavaScript kod "suqilib kirib", sayt nomidan ishlashi. HttpOnly shunday kodning cookie'ni o'g'irlashiga yo'l qo'ymaydi.
• CSRF (Cross-Site Request Forgery) — begona sayt sizning nomingizdan so'rov yuborishi. SameSite bunga to'sqinlik qiladi.

Ikkala hujumni ham kursda chuqur o'rganamiz: XSS va DOM xavfsizligi.

4. localStorage va sessionStorage

4.1 Kalit va qiymat

Ikkala ombor ham Web Storage deb ataladi. Ular ma'lumotni "kalit — qiymat" juftligi bilan saqlaydi, xuddi lug'at kabi:

JavaScript'da bu shunday ko'rinadi (JS'ni 08-qismda o'rganamiz, hozir faqat ko'rinishiga qarang):

localStorage.setItem("mavzu", "qora");
localStorage.getItem("mavzu"); // "qora"

• setItem("mavzu", "qora") — "mavzu kaliti ostiga qora ni yoz".
• getItem("mavzu") — "mavzu kalitidagi qiymatni ber".

Bu kodni localStorage va sessionStorage darsida o'zingiz yozasiz.

Web Storage cookie'dan ikki jihatdan farq qiladi. Birinchidan, ma'lumot serverga o'z-o'zidan bormaydi — faqat brauzerda qoladi. Ikkinchidan, joyi ancha katta.

Diqqat: Web Storage faqat satr saqlaydi. Ro'yxat yoki murakkab ma'lumotni saqlash uchun uni avval JSON matniga aylantirish kerak. Aks holda qiymat o'rniga [object Object] degan ma'nosiz matn yozilib qoladi.

4.2 localStorage — doimiy

localStorage'dagi ma'lumot brauzer yopilsa ham, kompyuter o'chirilsa ham qoladi. Uni sayt kodi yoki foydalanuvchi o'zi o'chirmaguncha turadi.

Qayerda ishlatiladi: tanlangan til, tungi rejim, "bu oynani boshqa ko'rsatma" belgisi.

4.3 sessionStorage — bitta tab uchun

sessionStorage faqat shu tab uchun. Tab yopilsa — o'chadi. Sahifani yangilasangiz (F5) — saqlanib qoladi.

Muhim nozik joy: xuddi shu saytni ikkinchi tabda ochsangiz, u tabning sessionStorage'i alohida bo'ladi. Birinchi tabdagi ma'lumot u yerda ko'rinmaydi.

Qayerda ishlatiladi: bir necha qadamli forma (to'lov, ro'yxatdan o'tish) — sahifa tasodifan yangilansa, yozilganlar yo'qolmasin.

Tekshirib ko'ring: Ali saytda anketani yarim to'ldirdi va sahifani yangiladi. Yozganlari sessionStorage'da edi. Ular saqlanib qoladimi? Tabni yopib, qayta ochsa-chi?

5. IndexedDB va HTTP kesh

IndexedDB — brauzer ichidagi haqiqiy kichik ma'lumotlar bazasi. U minglab yozuv, rasm va fayllarni saqlay oladi va ular ichidan tez qidiradi. Oflayn ishlaydigan ilovalar — masalan, internet yo'qligida ham hujjat ochadigan tahrirlovchilar — ma'lumotini shu yerda ushlaydi. Hozircha nomini bilish yetarli, amalda IndexedDB darsida ishlaymiz.

HTTP kesh — sarlavhalar darsida ko'rgan kesh. Brauzer rasm, CSS va JS fayllarning nusxasini diskda saqlaydi. Server Cache-Control sarlavhasi bilan qancha saqlashni aytadi. Keyingi safar fayl tarmoqdan emas, keshdan olinadi.

Maslahat: Brauzerning har sayt uchun joy chegarasi (kvota) bor. Joy tugab qolsa, brauzer uzoq ishlatilmagan saytlarning ma'lumotini o'zi o'chirishi mumkin. Shuning uchun brauzerdagi ma'lumotga "abadiy" deb ishonmang: muhim narsa serverda ham saqlanishi kerak.

6. Xavfsizlik modeli: brauzer ichidagi devorlar

6.1 Sandbox

Oldingi darslarda ko'rdik: har sayt renderer jarayonida, sandbox ichida ishlaydi. Operatsion tizim bu jarayonning huquqlarini qattiq cheklaydi:

• U diskdagi fayllaringizni o'z-o'zidan o'qiy olmaydi. Fayl faqat siz uni o'zingiz tanlaganingizda saytga beriladi — masalan, "Rasm yuklash" tugmasi orqali.
• U kamera yoki mikrofonni so'ramasdan yoqa olmaydi. Brauzer avval sizdan so'raydi:

example.com wants to
  Use your camera
[Allow while visiting the site] [Allow this time] [Never allow]

Tarjimasi: "example.com kamerangizdan foydalanmoqchi. Saytda turganimda ruxsat berish / Faqat bu safar / Hech qachon".

• U boshqa dasturlarning xotirasiga tega olmaydi.

Zararli sayt renderer jarayonini buzib kirsa ham, u sandbox devoriga urilib qoladi.

6.2 Site isolation — saytlarni ajratish

2018-yilda protsessorlarda Spectre deb nomlangan zaiflik topildi. U bitta jarayon ichidagi kodga shu jarayonning boshqa xotirasini "mo'ralab" o'qish imkonini berardi. Agar bank sayti va zararli sayt bitta jarayonda bo'lsa, zararli sayt bank ma'lumotini ko'rishi mumkin edi.

Javob — site isolation (saytlarni ajratish). Har bir sayt albatta alohida jarayonga joylanadi. Hatto sahifa ichiga boshqa sayt joylansa ham — masalan, YouTube videosi (bunday "sahifa ichidagi sahifa oynachasi" iframe deb ataladi).

Chrome buni kompyuterlarda 2018-yildan, Firefox esa 2021-yildan barcha foydalanuvchilarga yoqqan.

flowchart TD
  B["Browser jarayoni"] --> R1["Bank sayti jarayoni, sandbox"]
  B --> R2["Shubhali sayt jarayoni, sandbox"]
  R1 --- S1[("Bank ombori: cookie, localStorage")]
  R2 --- S2[("Shubhali sayt ombori")]
  R2 -. "kira olmaydi" .-> S1

Uch qavat himoyani solishtiring:

Tekshirib ko'ring: Same-Origin Policy allaqachon bor ekan, site isolation nega yana kerak bo'ldi?

6.3 Inkognito rejimi: afsona va haqiqat

Inkognito (Chrome'da — Incognito, boshqa brauzerlarda "Private") rejimini ko'pchilik "meni hech kim ko'rmaydi" deb tushunadi. Bu noto'g'ri.

Inkognito nima qiladi:

• Alohida, bo'sh omborlar bilan ishlaydi: oddiy oynadagi cookie va localStorage u yerda ko'rinmaydi.
• Barcha inkognito oynalar yopilganda tarix, cookie, kesh va sayt ma'lumotlarini o'chiradi.
• Natija: shu kompyuterdan foydalanadigan boshqa odam nima qilganingizni ko'rmaydi.

Inkognito nima QILMAYDI:

• Internet provayderdan, ishxona yoki o'quv markazi tarmoq administratoridan yashirmaydi.
• Siz kirgan saytning o'zidan yashirmaydi — sayt IP manzilingizni ko'radi. Tizimga kirsangiz, sayt kimligingizni biladi.
• Yuklab olingan fayllar va xatcho'plar kompyuterda qoladi.

6.4 Kengaytmalar va ruxsatlar

Kengaytma (extension) — brauzerga qo'shimcha imkoniyat qo'shadigan kichik dastur: reklama to'suvchi, tarjimon, VPN.

Kengaytmalar oddiy saytdan ancha kuchli bo'lishi mumkin. O'rnatishda Chrome ruxsatlarni ko'rsatadi. Eng xavflisi:

Read and change all your data on all websites

Tarjimasi: "Barcha saytlardagi barcha ma'lumotlaringizni o'qish va o'zgartirish". Shu ruxsatli kengaytma siz ochgan har sahifadagi matnni, formaga yozgan parolingizni ko'rishi mumkin.

Qoidalar:

• Faqat kerakli va ishonchli kengaytmalarni o'rnating.
• Kengaytma vazifasiga to'g'ri kelmaydigan ruxsat so'rasa — o'rnatmang. Kalkulyatorga "barcha saytlar" ruxsati nega kerak?
• Ishlatilmaydiganlarini o'chiring. Ro'yxat: manzil satriga chrome://extensions yozing.

Hujumchi nigohi

Ali yangiliklar saytini yaratdi. Foydalanuvchi tizimga kirganda, uning maxfiy tokeni (kirganini tasdiqlovchi kalit) localStorage'ga yoziladi. Izohlar bo'limida esa xato bor: izoh matni tekshirilmasdan sahifaga chiqariladi.

Hujum: buzg'unchi izoh o'rniga JavaScript kod yozadi. Kod izoh sifatida saqlanadi va sahifani ochgan har bir kishining brauzerida bajariladi — bu XSS. Kod bitta ish qiladi: localStorage'dagi tokenni o'qib, buzg'unchining serveriga yuboradi. Endi buzg'unchi o'sha foydalanuvchilar nomidan saytga kira oladi.

Nega bu ishladi: begona kod sayt ichida bajarildi — demak origin bir xil. Same-Origin Policy ham, sandbox ham bu yerda yordam bermaydi. localStorage'ni shu origin'dagi har qanday JavaScript o'qiy oladi.

Himoya:

• Tokenni localStorage'da emas, HttpOnly; Secure; SameSite bayroqli cookie'da saqlash. JavaScript uni umuman ko'rmaydi — begona kod ham.
• Foydalanuvchi yozgan matnni sahifaga chiqarishdan oldin tozalash — buni XSS va DOM xavfsizligi darsida o'rganamiz.
• localStorage'da faqat sir bo'lmagan narsalar: til, mavzu, savatdagi mahsulotlar ro'yxati.

7. Ko'p uchraydigan xatolar

7.1 Tokenni localStorage'da saqlash

Nega xato: saytdagi bitta XSS zaifligi barcha foydalanuvchi tokenlarini o'g'irlashga yetadi (yuqoridagi hujumni ko'ring).

Tuzatish: maxfiy ma'lumot — HttpOnly cookie'da.

7.2 Ro'yxatni JSON'siz saqlash

Application panelida qiymat o'rnida shunday yozuv turadi:

[object Object]

Nega: Web Storage faqat satr saqlaydi. Murakkab ma'lumot to'g'ridan-to'g'ri berilsa, u shu ma'nosiz matnga aylanadi va asl ma'lumot yo'qoladi.

Tuzatish: saqlashdan oldin JSON matniga aylantirish, o'qigandan keyin qaytarish. Kodini localStorage va sessionStorage darsida yozamiz.

7.3 sessionStorage'ni tablar orasida umumiy deb o'ylash

Nega xato: har tabning sessionStorage'i alohida. Bir tabda saqlangan savat ikkinchi tabda bo'sh chiqadi.

Tuzatish: tablar orasida umumiy bo'lishi kerak bo'lsa — localStorage.

7.4 Inkognitoni to'liq maxfiylik deb bilish

Nega xato: inkognito faqat shu kompyuterdagi izlarni o'chiradi. Tarmoq administratori va provayder qaysi saytlarga kirilganini ko'radi.

Tuzatish: inkognitoni "qurilmada iz qoldirmaslik" vositasi deb biling, "yashirinish" emas.

7.5 Cookie'larni tozalab, "sayt buzildi" deb o'ylash

Nega: tozalangan cookie'lar orasida sessiya cookie'si ham bor edi. Server sizni tanimay qoldi.

Tuzatish: bu xato emas — shunchaki qayta kiring.

8. Mashqlar

1-mashq (oson): Omborni tanlang

Har ma'lumot uchun eng mos omborni tanlang (cookie, localStorage, sessionStorage):

1. Bank saytiga kirganingizni bildiruvchi sessiya kaliti:
2. Tanlangan tungi rejim:
3. Uch qadamli to'lov formasining oraliq ma'lumoti:

2-mashq (o'rta): Cookie'ni tekshiring

Server shunday sarlavha yubordi:

Set-Cookie: user_id=12345; Path=/

Bu cookie tizimga kirganlikni bildiradi. Qanday xavfsizlik kamchiliklari bor va to'g'ri variant qanday bo'lishi kerak?

Set-Cookie: user_id=12345; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=86400

3-mashq (qiyin): Internet-kafe vaziyati

Jasur internet-kafedagi kompyuterda inkognito oynasida Telegram Web'ga kirdi. Ishini tugatib, oynani yopmasdan turib ketdi. Kafe egasi tarmoqdagi barcha trafikni kuzatadi.

1. Keyingi mijoz Jasurning Telegram'iga kira oladimi?
2. Kafe egasi Jasur qaysi saytga kirganini bila oladimi?
3. Jasur qanday to'g'ri harakat qilishi kerak edi?

9. Real ishda

• Cookie banneri. Ko'p saytlarda "Accept cookies" oynasi chiqadi. Yevropa qonunlari (GDPR) foydalanuvchini kuzatuvchi cookie'lar uchun rozilik so'rashni talab qiladi.
• Autentifikatsiya. Real loyihalarda sessiya tokeni HttpOnly cookie'da saqlanadi — bu backend qismidagi Cookie chuqur darsining mavzusi.
• Frontend sozlamalari. Tungi rejim, til, "oxirgi ko'rilgan" ro'yxat — localStorage'ning odatiy ishi.
• Intervyu savoli: "Cookie, localStorage va sessionStorage farqi nima?" — frontend intervyularida deyarli har doim so'raladi. Javobda hajm, muddat, serverga borishi va xavfsizlikni ayting.

Xulosa

• Brauzerda beshta asosiy ombor bor: cookie, localStorage, sessionStorage, IndexedDB va HTTP kesh.
• Cookie har so'rovda serverga boradi. Web Storage faqat brauzerda qoladi va faqat satr saqlaydi.
• Har ombor origin bo'yicha ajratilgan: bir sayt boshqasinikini o'qiy olmaydi.
• Maxfiy token — HttpOnly cookie'da, localStorage'da emas.
• Sandbox saytni kompyuterdan, site isolation esa saytlarni bir-biridan jarayon darajasida ajratadi.
• Inkognito faqat shu qurilmadagi izlarni o'chiradi, tarmoqdan yashirmaydi.

Manbalar

• MDN: Web Storage API — localStorage va sessionStorage (ingliz tilida).
• Chromium: Site Isolation — saytlarni ajratish haqida rasmiy sahifa.

Keyingi dars: Veb standartlari va brauzer mosligi — brauzerlar qaysi qoidalar asosida ishlashini va yangi imkoniyat qaysi brauzerlarda borligini qanday tekshirishni ko'ramiz.