البرمجة

كوكيز جافاسكربت: ضبط مثالي

جدول المحتوى

مقدّمة شاملة حول ملفات تعريف الارتباط (Cookies) في الويب

تُعَدّ ملفات تعريف الارتباط (أو ما يُعرف بالكوكيز) إحدى الركائز التقنية التي بُنيت عليها معظم خدمات الويب الحديثة؛ فهي تمثِّل آليةً بسيطةً نسبيًّا لتخزين معلومات صغيرة على جهاز المستخدم، لكنّ تأثيرها يتّسع ليشمل جوانب تتعلّق بالأداء والأمان وخصوصيّة البيانات وتجربة التصفّح وعمليات التحليل والتسويق الرقمي. يهدف هذا المقال المطوَّل إلى معالجة ملفّات تعريف الارتباط بمنظورٍ موسَّع، مع التركيز على كيفية إنشائها وضبطها والتعامل معها في لغة JavaScript، مع مراعاة أفضل الممارسات الأمنيّة وأحدث التطوّرات في سياسات المتصفّحات.


1. جذور تقنية ملفات تعريف الارتباط

1.1 السياق التاريخي

ظهرت فكرة ملفات تعريف الارتباط عام 1994 على يد لو مونتولي (Lou Montulli) أثناء عمله في شركة «نتسكايب» بهدف تمكين المواقع من الحفاظ على حالة الجلسة (Session) بين الطلبات المتعاقبة لبروتوكول HTTP، الذي صُمِّم في الأصل عديم الحالة (Stateless). ومنذ ذلك الحين، تطوّرت الكوكيز لتلعب أدوارًا متشعّبة في المصادقة (Authentication)، وتخصيص الواجهة (Personalization)، وتتبع التحليلات (Analytics Tracking)، وغيرها.

1.2 البنية العامة للكوكي

يتألّف كل كوكي من زوج مفتاح/قيمة، مرفق بعدد من السمات (Attributes) تُحدِّد مجاله الزمني (Expires/Max‑Age)، ونطاقه (Domain)، ومساره (Path)، وسياسته في النقل الآمن (Secure)، ومحدد SameSite الذي يضبط سلوكه عبر المواقع التقاطعيّة (Cross‑Site).


2. آليات تخزين الكوكيز في المتصفّحات الحديثة

2.1 التخزين في القرص مقابل الذاكرة

  • كوكيز الجلسة (Session Cookies): تُخزَّن في الذاكرة volatile ويُتخلَّص منها عند إغلاق نافذة المتصفّح.

  • كوكيز دائمة (Persistent Cookies): تُكتَب على القرص المحلي ويُحتفظ بها حتى انتهاء تاريخ الصلاحية أو حذفها يدويًّا.

2.2 حدود السعة وعدد الكوكيز

يحدّد معيار RFC 6265 سقفًا نظريًّا يبلغ 4096 بايت لكل كوكي، مع حدّ أقصى 180 كوكي لكل نطاق. إلا أنّ بعض المتصفّحات الأكثر تشدّدًا قد تفرض حدودًا أقلّ لتحقيق أداء أعلى وأمان أفضل.


3. إنشاء وضبط الكوكيز في JavaScript

3.1 الكتابة المباشرة لسلسلة الوثيقة (document.cookie)

js
// مثال أساسي document.cookie = "username=Moade3User; expires=Tue, 31 Dec 2025 23:59:59 GMT; path=/";

السطر أعلاه يحرّر رأس Set‑Cookie عند الطلب التالي، إذ تُضيف المتصفّحات القيمة إلى مخزن الكوكيز المرتبط بالنطاق والمسار.

شرح السمات:

السمة الغرض أمثلة لأفضل الممارسات
expires تاريخ مطلق لانتهاء الصلاحية (UTC) استخدم تاريخًا معقولًا عند الحاجة إلى التذكر طويل الأمد (≤ عامين)
max‑age مدة البقاء بالثواني بديل مفضّل على expires لأنه أقلّ عرضة لاختلاف المناطق الزمنية
path يقيد إرسال الكوكي إلى مسار محدّد داخل الموقع اجعله أقصر ما يمكن لتقليل احتمالات التسرّب
domain يسمح بمشاركة الكوكي بين النطاقات الفرعيّة استخدمها بحذر لتجنّب الثغرات بين النطاقات
secure يضمن إرسال الكوكي عبر HTTPS فقط فعِّلها دائمًا في البيئات الإنتاجية
sameSite يحدّ من إرسال الكوكي في السياقات الخارجيّة القيم: Lax (افتراضي)، Strict، None

ملاحظة أمنيّة: المتصفّحات الحديثة تشترط أن تُضبط sameSite=None مع secure وإلا تُحجب الكوكي آليًّا.

3.2 استخدام واجهة CookieStore API (تجريبيًا)

js
if ('cookieStore' in window) { await cookieStore.set({ name: 'theme', value: 'dark', expires: Date.now() + 60 * 60 * 24 * 365, // عام واحد sameSite: 'strict', secure: true }); }

توفر CookieStore واجهةً مبنيّة على الوعود (Promises) للتلاعب المتزامن بالكوكيز، وتسهل مراقبتها عبر الأحداث.


4. قراءة الكوكيز ومعالجتها

4.1 تفكيك document.cookie يدويًّا

js
function getCookie(name) { return document.cookie .split('; ') .find(row => row.startsWith(name + '=')) ?.split('=')[1] ?? null; }

4.2 الاعتماد على مكتبات جاهزة

  • js‑cookie: مكتبة خفيفة (< 3 KB بعد الضغط) توفر واجهة سلسة للإعداد والقراءة والحذف مع معالجة تلقائية لترميز URI.

js
Cookies.set('session_id', '12345', { secure: true, sameSite: 'strict' }); const sid = Cookies.get('session_id'); Cookies.remove('session_id');

5. حذف الكوكيز

يُحذف الكوكي بإعادة ضبطه بتاريخ صلاحية منتهي أو Max‑Age=0:

js
document.cookie = "username=; Max-Age=0; path=/";

تذكّر أن تتطابق قيم path وdomain مع تلك المستخدمة عند الإنشاء، وإلا سيظل الكوكي الأصلي فعّالًا.


6. القضايا الأمنيّة والخصوصيّة

6.1 هجمات تزوير الطلب عبر المواقع (CSRF)

ضبط SameSite=Strict أو Lax يخفّف بدرجة كبيرة احتمالات استغلال الكوكي في هجمات CSRF.

6.2 هجمات استيلاء الجلسة (Session Hijacking)

  • Secure Flag: منع نقل الكوكي عبر HTTP غير مشفَّر.

  • HttpOnly Flag: يمنع الوصول إلى الكوكي من جافاسكربت، فيُعرقل استغلال XSS.

js
// يُضاف من الخادم في رأس HTTP: Set-Cookie: auth_token=abc; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=7200

6.3 القوانين والامتثال

  • اللائحة العامة لحماية البيانات (GDPR) في أوروبا.

  • قانون خصوصية المستهلك في كاليفورنيا (CCPA).

يُلزِم كلا الإطارين بإشعارات واضحة وإمكانية الانسحاب (Opt‑Out) من التتبع غير الضروري.


7. تأثير التغيّرات الأخيرة في المتصفّحات

7.1 متصفّح Chrome ومبادرة Privacy Sandbox

يجري حاليًّا استبدال ملفات الطرف الثالث (Third‑Party Cookies) بواجهات Topics وFLEDGE لتسويق يستند إلى الاهتمامات بدون كشف الهويّة الفرديّة.

7.2 حظر التطبيقات التلقائية لملفات الطرف الثالث

Safari وFirefox أغلقا الطرف الثالث افتراضيًّا، ما دفع المطوّرين إلى الاتجاه نحو حلول تعتمد على التخزين المحلي المجمّع (First‑Party Sets) أو تقنيات جانب الخادم.


8. بدائل وتقنيات مكمّلة

التقنية السعة التقريبية النطاق مثال الاستخدام
LocalStorage 5–10 MB نفس النطاق الأصل تفضيلات واجهة المستخدم
SessionStorage مماثل لـLocalStorage، يُمسح مع التبويب تبويب واحد حالة التنقّل المرحلي
IndexedDB مئات الميغا بايت نفس النطاق تطبيقات الويب التقدميّة (PWA)
Web SQL (موقوف)

رغم سعتها الأعلى، لا تُرسَل هذه الآليات في كل طلب HTTP، ما يقلل عبء الشبكة ويعزّز الخصوصيّة.


9. أفضل الممارسات لتطوير يعتمد على الكوكيز

  1. التقليل لأدنى حد: خزِّن أقلّ قدر ممكن من البيانات في الكوكي لتقليل السطح المعرض للهجمات.

  2. التجزئة: استخدم معرّفات عشوائيّة بدلاً من تخزين بيانات شخصيّة مباشرة.

  3. الدورة الزمنيّة القصيرة: عيّن مدة حياة تتوافق مع احتياجات الجلسة.

  4. المراجعة الدوريّة: أزل الكوكيز غير الضروريّة في تحديثات المنتج.

  5. التشفير: عند الضرورة، شفّر المحتوى أو استخدم توقيعات رقمية للتحقق من سلامة البيانات.


10. دراسة حالة عملية

لنفرض منصة تجارة إلكترونية تحتاج إلى:

  • جلسة مصادقة (auth_token)

  • تفضيل اللغة (lang)

  • عربة التسوّق (cart_id)

js
// تهيئة التفضيل Cookies.set('lang', 'ar', { maxAge: 60 * 60 * 24 * 365, sameSite: 'strict' }); // إنشاء جلسة مصادقة بعد تسجيل الدخول Cookies.set('auth_token', generateJWT(), { httpOnly: true, // يُضبط من الخادم secure: true, sameSite: 'lax', maxAge: 60 * 60 * 2 }); // حفظ معرف عربة التسوق Cookies.set('cart_id', uuidv4(), { sameSite: 'strict', maxAge: 60 * 60 * 24 });

يُلاحظ الفصل الواضح بين الحسّاس (auth_token) وغير الحسّاس (lang)، واستخدام أوقات حياة مختلفة.


11. مستقبل الكوكيز في بيئة تتزايد فيها متطلبات الخصوصيّة

مع تزايد القيود على الطرف الثالث، ستظلّ الكوكيز ذات الطرف الأول حاسمة لتجارب الجلسات. غير أنّ المطوّرين يُدعون إلى:

  • التحوّل إلى هوية قائمة على المحيط المصدري (Origin‑Bound).

  • استثمار واجهات التخزين المحلي لتخفيف الاعتماد على نقل الكوكي.

  • موازنة المتطلبات القانونية مع الاحتياجات التجارية بطريقة شفافة ومبنية على الموافقة.


خاتمة

إنّ فهم ملفات تعريف الارتباط بعمق، ومعرفة كيفية إنشائها وضبطها بأفضل وجه في JavaScript، لا يُعَدّ رفاهية تقنيّة بل ضرورة لحماية المستخدمين وضمان توافق المشاريع الرقمية مع المتصفّحات المستقبلية والتشريعات المتنامية. التزامك بالممارسات الواردة هنا سيُفضي إلى تجربة مستخدم أكثر أمانًا وكفاءة، ويحافظ على ثقة جمهورك في محتوى الويب الذي تقدّمه.


المراجع

  1. RFC 6265: HTTP State Management Mechanism, IETF, 2011.

  2. MDN Web Docs: CookieStore.