Cookie — o'qish, yozish, o'chirish

~15 daq · JavaScript · Brauzer API lari

Muammodan boshlaylik

Foydalanuvchi login qildi. Brauzer yopildi. Ertasi kuni saytga qaytdi — "Xush kelibsiz, Jasur!" deydi, parolni qaytadan kiritmasdan.

Local Storage ham saqlab qo'ya olardi. Lekin Local Storage ning bir kamchiligi bor: u faqat brauzerda saqlanadi, serverga ketmaydi. Har so'rovda server "bu kim?" deb bilmaydi.

Cookie esa har bir HTTP so'rovda avtomatik serverga yuboriladi. Server uni o'qiydi, "kim ekanini" biladi. Shuning uchun autentifikatsiya uchun cookie ishlatiladi.

Cookie nima?

Cookie — brauzer va server o'rtasidagi "eslatma qog'oz". Server cookie ni bir marta beradi, keyin brauzer uni har so'rovda serverga qaytaradi.

Hayotiy o'xshatma

Mehmonxona kaliti. Qabul stolida ro'yxatdan o'tdingiz — sizga plastik karta berdi. Har safar xonangizga kirganda kartani tutasiz — eshik "siz bu yerning mehmonisiz" deb biladi va ochiladi. Cookie — o'sha plastik karta. Bir marta beriladi, har safar ko'rsatiladi.

Cookie o'qish va yozish

JavaScript da document.cookie orqali ishlash mumkin:

// Cookie yozish
document.cookie = "ism=Jasur";
document.cookie = "til=uz";

// Cookie o'qish — hammasi bir qatorda
console.log(document.cookie); // "ism=Jasur; til=uz"

document.cookie ga yozish — mavjud cookie ni o'chmaydi. Har yozish yangi cookie qo'shadi yoki shu nomdagi cookie ni yangilaydi.

Cookie parametrlari — muddati, yo'l, xavfsizlik

Cookie ni yozish vaqtida bir nechta parametr berilishi mumkin. Ular aniqlamasa — brauzer yopilganda cookie o'chib ketadi.

expires — cookie qachon o'chadi:

const kun = new Date();
kun.setDate(kun.getDate() + 30); // ← 30 kundan keyin

document.cookie = `token=abc123; expires=${kun.toUTCString()}`;

max-age — nechi soniyadan keyin o'chadi (expires dan qulay):

document.cookie = "token=abc123; max-age=2592000"; // ← 30 kun (soniyada)

path — cookie qaysi sahifalarda ko'rinadi:

document.cookie = "ism=Jasur; path=/"; // ← butun saytda
document.cookie = "ism=Jasur; path=/admin"; // ← faqat /admin da

secure — faqat HTTPS da yuboriladi:

document.cookie = "token=abc123; secure";

httpOnly — JavaScript ko'ra olmaydi (faqat server orqali):

httpOnly ni JavaScript orqali qo'yib bo'lmaydi — bu faqat server o'rnatadi. Bu juda muhim xavfsizlik xususiyati: XSS hujumida JavaScript cookie ni o'qiy olmaydi.

Cookie o'qish — parsing

document.cookie — barcha cookie larni bitta matn sifatida beradi. Alohida cookie ni topish uchun ajratish kerak:

function cookieOl(nom) {
  const cookies = document.cookie.split("; ");

  for (const cookie of cookies) {
    const [kalit, qiymat] = cookie.split("=");
    if (kalit === nom) return qiymat;
  }

  return null;
}

console.log(cookieOl("ism")); // "Jasur"
console.log(cookieOl("til")); // "uz"

Cookie o'chirish — muddatini o'tkazib yuborish

Cookie ni o'chirish uchun — uning muddatini o'tgan vaqtga qo'ying:

function cookieOchir(nom) {
  document.cookie = `${nom}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
}

cookieOchir("token"); // ← token cookie o'chirildi

1970 yil — Unix epoch boshi. Bu vaqt allaqachon o'tgan, demak cookie darhol o'chadi.

Cookie, Local Storage, Session Storage — qaysi biri?

Uchala brauzer ombori bor. Qaysi birini qachon ishlatish kerak?

Hayotiy o'xshatma taqqoslash uchun

Cookie — pasport. Har yerda olib yurasiz, so'ralsa ko'rsatasiz.

Local Storage — uy daftarchasi. Faqat uyda, hech yerga olib bormaysiz.

Session Storage — samolyotdagi bilyet. Parvozda kerak, tushgach yo'q.

Tez-tez uchraydigan xatolar

Token ni JavaScript orqali o'qiladigan cookie da saqlash:

httpOnly flagsiz cookie — XSS hujumida o'g'irlanishi mumkin. Autentifikatsiya tokeni faqat server tarafidan httpOnly qilingan cookie da saqlanishi kerak.

// ❌ — JavaScript cookie o'qiy oladi → XSS xavfi
document.cookie = "token=abc123";

// ✅ — server Set-Cookie headerida httpOnly bilan o'rnatadi
// Set-Cookie: token=abc123; HttpOnly; Secure; SameSite=Strict

Path ni belgilasmaslik:

// ❌ — faqat hozirgi sahifada ko'rinadi
document.cookie = "ism=Jasur";

// ✅ — butun saytda
document.cookie = "ism=Jasur; path=/";

O'chirish vaqtida path ni eslab qolmaslik:

// ❌ — path mos kelmasa, o'chirmaydi
document.cookie = "ism=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

// ✅ — qo'shgan path bilan o'chirish
document.cookie = "ism=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Xulosa

Cookie — brauzer va server o'rtasidagi "eslatma". Har HTTP so'rovda avtomatik serverga ketadi.

document.cookie — yozish va o'qish. O'chirish — muddatni o'tkazish.

Autentifikatsiya tokeni uchun — server httpOnly cookie o'rnatishi kerak. JavaScript orqali o'rnatilgan cookie XSS ga zaif.

Hajm — atigi 4KB. Katta ma'lumot uchun Local Storage.

Keyingi dars

51-dars: WebSocket — real-time ulanish