Cookie

Cookie'lar — brauzer tomonidan saqlanadigan kichik matnli ma'lumot bo'laklaridir. Ular HTTP protokolining bir qismi bo'lib, aksar hollarda foydalanuvchini tanib olish (autentifikatsiya) uchun ishlatiladi. Cookie odatda server tomonidan Set-Cookie sarlavhasi orqali o'rnatiladi, keyin brauzer har bir so'rovda ularni Cookie sarlavhasida serverga qaytaradi.

Cookie nima va qanday ishlaydi

Cookie nom=qiymat ko'rinishidagi juftlik bo'lib, brauzerda saqlanadi. U ma'lum bir domenga bog'langan holda saqlanadi va o'sha domenga yuborilgan har bir HTTP so'rovda avtomatik ravishda serverga qaytariladi. Aynan shu avtomatik qaytish xususiyati cookie'ni sessiyalarni saqlash uchun qulay qiladi.

Odatiy senariy quyidagicha: foydalanuvchi tizimga kiradi, server autentifikatsiya sessiya identifikatorini Set-Cookie sarlavhasi bilan o'rnatadi, keyin brauzer har bir so'rovda o'sha sessiya cookie'sini yuboradi va server foydalanuvchini tanib oladi.

document.cookie orqali o'qish

Brauzer JavaScript koddan cookie'ga document.cookie xususiyati orqali kirish mumkin. Uni o'qishimiz barcha cookie'larni bitta satr ko'rinishida beradi, bunda juftliklar ; (nuqta-vergul va probel) bilan ajratiladi:

// Brauzerda:
let all = document.cookie;
console.log(all);
// masalan: "user=Ali; theme=dark; sessionId=abc123"

Ko'rib turganingizdek, document.cookie — bu oddiy obyekt emas, balki maxsus formatdagi satr. Bitta cookie qiymatini olish uchun satrni ajratib olishimiz kerak. Quyida ma'lum nom bo'yicha qiymatni topuvchi funksiya:

function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    '(?:^|; )' + name.replace(/([.$?*|{}()\[\]\\/+^])/g, '\\$1') + '=([^;]*)'
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

// ishlatish:
let user = getCookie('user');
console.log(user); // "Ali" (agar mavjud bo'lsa)

document.cookie orqali yozish

document.cookiega yozish alohida xususiyatga ega: u o'zgartiruvchi (writable) bo'lsa-da, unga qiymat berish barcha cookie'larni almashtirmaydi, balki faqat siz ko'rsatgan bitta cookie'ni o'rnatadi yoki yangilaydi:

// Brauzerda:
document.cookie = 'user=Ali';
// endi document.cookie ichida user=Ali paydo bo'ladi,
// boshqa cookie'lar o'chib ketmaydi

Qiymatda maxsus belgilar bo'lsa, uni kodlash shart:

let name = 'user';
let value = 'Ali Valiyev'; // probel bor
document.cookie = name + '=' + encodeURIComponent(value);

path — cookie'ning yo'l ko'lami

path=/... parametri cookie ko'rinadigan URL yo'lini belgilaydi. Cookie faqat shu yo'l va uning ostki yo'llari uchun brauzerdan serverga yuboriladi:

document.cookie = 'user=Ali; path=/admin';
// bu cookie faqat /admin, /admin/panel kabi
// yo'llarda serverga yuboriladi, /shop'da yuborilmaydi

Odatda path=/ ishlatiladi — bu cookie'ni butun sayt bo'ylab ko'rinadigan qiladi. Agar path ko'rsatilmasa, u joriy sahifaning yo'liga sozlanadi, bu ko'pincha kutilmagan cheklovlarga olib keladi.

domain — cookie qaysi domenda ko'rinadi

domain parametri cookie qaysi domenda serverga yuborilishini belgilaydi. Standart holatda cookie faqat o'zi o'rnatilgan aniq domenda ko'rinadi va subdomen'larda ko'rinmaydi:

// site.com'da o'rnatilgan cookie standart holatda
// forum.site.com'da KO'RINMAYDI
document.cookie = 'user=Ali';

Subdomen'larga ham cookie'ni ulashish uchun asosiy domenni ko'rsatamiz:

// site.com'da:
document.cookie = 'user=Ali; domain=site.com';
// endi cookie forum.site.com, shop.site.com'da ham ko'rinadi

expires va max-age — amal qilish muddati

Standart holatda cookie sessiya cookie'si bo'ladi — brauzer yopilganda o'chib ketadi. Cookie'ni uzoqroq saqlash uchun expires yoki max-age ishlatiladi.

expires — aniq sana

expires cookie tugash sanasini GMT formatida (toUTCString()) belgilaydi:

let date = new Date(Date.now() + 86400e3); // +1 kun
date = date.toUTCString();
document.cookie = 'user=Ali; expires=' + date + '; path=/';

O'tmishdagi sanani berish cookie'ni o'chiradi:

// cookie'ni o'chirish:
document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

max-age — soniyalardagi muddat

max-age — hozirgi vaqtdan boshlab soniyalarda ifodalangan muddat. U expiresga qulay muqobil:

// 1 soatga:
document.cookie = 'user=Ali; max-age=3600; path=/';

// darhol o'chirish (0 yoki manfiy qiymat):
document.cookie = 'user=Ali; max-age=0; path=/';

secure va samesite — xavfsizlik bayroqlari

secure bayrog'i cookie'ni faqat HTTPS ulanishida yuborishga majbur qiladi. Bu cookie'ning shifrlanmagan HTTP orqali oshkor bo'lishining oldini oladi:

// faqat HTTPS orqali yuboriladi:
document.cookie = 'user=Ali; secure; path=/';

samesite bayrog'i — CSRF (cross-site request forgery) hujumlaridan himoya qiluvchi muhim mexanizm. U cookie'ning boshqa saytdan kelgan so'rovlarda yuborilishini boshqaradi:

• samesite=strict — cookie boshqa saytdan kelgan har qanday so'rovda umuman yuborilmaydi. Hatto foydalanuvchi tashqi havoladan saytga kirsa ham, birinchi so'rovda cookie ketmaydi;
• samesite=lax — muvozanatli rejim (aksar brauzerlarda standart). Cookie xavfsiz, yuqori darajali navigatsiya so'rovlarida (masalan havolaga bosishda, GET metodida) yuboriladi, ammo tashqi saytdagi POST forma yoki rasm/iframe kabi ichki so'rovlarda yuborilmaydi;
• samesite=none — cookie barcha holatlarda yuboriladi. Bu qiymat faqat secure bilan birga ishlaydi.

document.cookie = 'sessionId=abc123; samesite=strict; secure; path=/';

httpOnly — faqat serverdan

httpOnly bayrog'i — bu JavaScript orqali emas, faqat server tomonidan Set-Cookie sarlavhasida o'rnatiladigan xususiyat. U cookie'ga JavaScript koddan (document.cookie orqali) kirishni butunlay taqiqlaydi:

// Bu server sarlavhasi (JavaScript emas!):
// Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

// Brauzerda:
console.log(document.cookie);
// httpOnly cookie bu yerda KO'RINMAYDI

Cookie cheklovlari

Cookie'lar hajm va son jihatidan qattiq cheklangan:

• Bitta cookie'ning nom=qiymat juftligi taxminan 4 KBdan oshmasligi kerak;
• Bitta domen uchun cookie'lar soni cheklangan (brauzerga qarab ~20-50 ta atrofida);
• Cookie har bir HTTP so'rovda serverga yuboriladi — ko'p yoki katta cookie'lar tarmoq trafigini oshiradi;
• Cookie faqat matn saqlaydi — obyekt saqlash uchun uni JSON.stringify bilan satrsizlantirish kerak.

To'liq yordamchi funksiyalar

Amalda cookie bilan ishlashni osonlashtirish uchun uchta funksiya to'plami odatda yetarli: o'qish, yozish (parametrlar bilan) va o'chirish.

// O'qish
function getCookie(name) {
  let matches = document.cookie.match(new RegExp(
    '(?:^|; )' + name.replace(/([.$?*|{}()\[\]\\/+^])/g, '\\$1') + '=([^;]*)'
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

// Yozish (options bilan)
function setCookie(name, value, options = {}) {
  options = {
    path: '/',
    ...options
  };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  let updated = encodeURIComponent(name) + '=' + encodeURIComponent(value);

  for (let key in options) {
    updated += '; ' + key;
    let val = options[key];
    if (val !== true) {
      updated += '=' + val;
    }
  }

  document.cookie = updated;
}

// O'chirish
function deleteCookie(name) {
  setCookie(name, '', { 'max-age': -1 });
}

// ishlatish:
setCookie('user', 'Ali', { 'max-age': 3600, samesite: 'strict' });
console.log(getCookie('user')); // "Ali"
deleteCookie('user');

Xulosa

• Cookie — brauzerda saqlanadigan kichik matnli juftliklar bo'lib, har bir HTTP so'rovda avtomatik serverga yuboriladi;
• document.cookie orqali o'qiladi (satr) va yoziladi (bir vaqtda bitta cookie);
• path va domain cookie'ning ko'rinish ko'lamini belgilaydi;
• expires yoki max-age amal qilish muddatini beradi; bularsiz cookie sessiya bilan o'chadi;
• secure, samesite va httpOnly — xavfsizlik uchun kalit bayroqlar (httpOnly faqat serverdan);
• Cookie hajmi ~4 KB, uning asosiy vazifasi — autentifikatsiya, katta ma'lumot uchun localStorage qulayroq.