الوصول غير المتزامن إلى ملفات تعريف ارتباط HTTP

ما هي واجهة برمجة التطبيقات Cookie Store API؟

تُعرِض Cookie Store API ملفات تعريف ارتباط HTTP لعمال الخدمة، وتوفر بديلاً غير متزامن document.cookie. تسهّل واجهة برمجة التطبيقات تنفيذ ما يلي:

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

قراءة الشرح

الوضع الحالي

كيف يمكنني استخدام ميزة تخزين ملفات تعريف الارتباط غير المتزامنة؟

تفعيل الفترة التجريبية الأصلية

لتجربة ذلك على الجهاز، يمكن تفعيل واجهة برمجة التطبيقات في سطر الأوامر:

chrome --enable-blink-features=CookieStore

يؤدي إدخال هذه العلامة في سطر الأوامر إلى تفعيل واجهة برمجة التطبيقات على مستوى العالم في Chrome للجلسة الحالية.

بدلاً من ذلك، يمكنك تفعيل #enable-experimental-web-platform-features العلامة في chrome://flags.

(على الأرجح) لا تحتاج إلى ملفات تعريف الارتباط

قبل الغوص في واجهة برمجة التطبيقات الجديدة، أودّ أن أشير إلى أنّ ملفات تعريف الارتباط لا تزال أسوأ عنصر تخزين أساسي من جهة العميل في Web platform، ويجب استخدامها كأحد موارد الدعم الأخيرة. وهذا ليس من قبيل الصدفة، فملفّات تعريف الارتباط كانت أوّل آلية تخزين على جانب العميل في الويب، وقد تعلّمنا الكثير منذ ذلك الحين.

في ما يلي الأسباب الرئيسية لتجنُّب ملفات تعريف الارتباط:

• تنقل ملفات تعريف الارتباط مخطّط التخزين إلى واجهة برمجة التطبيقات في الخلفية. يحمل كل طلب HTTP نبذة عن ملف تعريف الارتباط. يسهّل ذلك على مهندسي الخلفية إدخال التبعيات على تنسيق ملفّ تعريف الارتباط الحالي. بعد حدوث ذلك، لا يمكن للواجهة الأمامية تغيير مخطّط التخزين بدون نشر تغيير مطابق في الواجهة الخلفية.

• تعتمد ملفات تعريف الارتباط على نموذج أمان معقّد. تلتزم ميزات منصة الويب الحديثة بسياسة المصدر نفسها، ما يعني أنّه يحصل كل تطبيق على مساحة محاكاة خاصة به، ويكون مستقلاً تمامًا عن التطبيقات الأخرى التي قد يشغّلها المستخدم. تؤدي نطاقات ملفات تعريف الارتباط إلى تعقيد قصة الأمان بشكل كبير، ومجرد محاولة تلخيص ذلك سيؤدي إلى مضاعفة حجم هذه المقالة.

• تُكلّف ملفات تعريف الارتباط مبالغ عالية مقابل الأداء. يجب أن تتضمّن المتصفّحات لقطة ملف تعريف اتّصال في كل طلب HTTP، لذا يجب أن يتم مشاركة كل تغيير في ملفات تعريف الارتباط على مستوى حِزم التخزين والشبكة. تتضمّن المتصفّحات الحديثة عمليات تنفيذ محسّنة للغاية لميزة تخزين ملفات تعريف الارتباط، ولكن لن نتمكّن أبدًا من جعل ملفات تعريف الارتباط فعّالة مثل آليات التخزين الأخرى التي لا تحتاج إلى التفاعل مع حِزمة الشبكة.

لكل الأسباب المذكورة أعلاه، يجب أن تتجنّب تطبيقات الويب الحديثة ملفات تعريف الارتباط، وبدلاً من ذلك، يجب أن تخزِّن معرّف الجلسة في IndexedDB، وأن تُضيف المعرّف صراحةً إلى عنوان أو نص طلبات HTTP معيّنة، وذلك من خلال واجهة برمجة التطبيقات fetch.

مع ذلك، لا تزال تقرأ هذه المقالة لأنّ لديك سببًا جيدًا لاستخدام ملفات تعريف الارتباط.

قراءة ملف تعريف ارتباط وإزالة الارتباك

إنّ واجهة برمجة التطبيقات document.cookie القديمة هي مصدر مضمون إلى حدٍ ما للانقطاع في تطبيقك. على سبيل المثال، عند استخدام دالة الحصول على document.cookie، يجب أن يتوقف المتصفّح عن تنفيذ JavaScript إلى أن يحصل على معلومات ملف تعريف الارتباط التي طلبتها. ويمكن أن يستغرق ذلك قفزة عملية أو قراءة القرص، ما سيؤدي إلى حدوث تقطُّع في واجهة المستخدم.

لحلّ هذه المشكلة، يمكنك التبديل من document.cookie أداة الحصول إلى واجهة برمجة التطبيقات غير المتزامنة Cookie Store API.

await cookieStore.get('session_id');

// {
//   domain: "example.com",
//   expires: 1593745721000,
//   name: "session_id",
//   path: "/",
//   sameSite: "unrestricted",
//   secure: true,
//   value: "yxlgco2xtqb.ly25tv3tkb8"
// }

يمكن استبدال طريقة ضبط document.cookie بطريقة مشابهة. يُرجى العِلم أنّه لا يمكن ضمان تطبيق التغيير إلا بعد حلّ الوعد الذي يعرضه cookieStore.set.

await cookieStore.set({name: 'opt_out', value: '1'});

// undefined

راقِب الأداء، ولا تسأل عن آراء الآخرين.

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

توفّر واجهة برمجة التطبيقات Cookie Store API طريقة بديلة لرصد التغيُّرات في ملفات تعريف الارتباط، ولا تتطلّب هذه الطريقة إجراء عمليات استطلاع.

cookieStore.addEventListener('change', event => {
  for (const cookie of event.changed) {
    if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
  }
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') sessionCookieChanged(null);
  }
});

مرحبًا بمشغّلي الخدمات

بسبب التصميم المتزامن، لم يتم إتاحة واجهة برمجة التطبيقات document.cookie لعمال الخدمة. واجهة برمجة التطبيقات Cookie Store API غير متزامنة، وبالتالي يُسمح باستخدامها في عمال الخدمة.

يعمل التفاعل مع ملفات تعريف الارتباط بالطريقة نفسها في سياقات المستندات وفي خدمات workers.

// Works in documents and service workers.
async function logOut() {
  await cookieStore.delete('session_id');
}

ومع ذلك، يختلف رصد تغييرات ملفات تعريف الارتباط قليلاً في مهام الخدمة. يمكن أن يكون تنشيط عامل الخدمة مكلفًا جدًا، لذا علينا وصف تغييرات ملفات تعريف الارتباط التي تهمّ العامل صراحةً.

في المثال أدناه، يتتبّع تطبيق يستخدِم IndexedDB لتخزين بيانات المستخدم في ذاكرة التخزين المؤقت التغييرات في ملف تعريف ارتباط الجلسة، ويتخلّص من البيانات المخزّنة مؤقتًا عند تسجيل خروج المستخدم.

// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
  event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});

// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') {
      indexedDB.deleteDatabase('user_cache');
      break;
    }
  }
});

أفضل الممارسات

سيتوفر قريبًا.

ملاحظات

إذا جرّبت هذه الواجهة برمجة التطبيقات، يُرجى إعلامنا برأيك. يُرجى توجيه ملاحظاتك بشأن شكل واجهة برمجة التطبيقات إلى مستودع المواصفات، والإبلاغ عن أخطاء التنفيذ إلى Blink>Storage>CookiesAPI مكوّن Blink.

يهمّنا بشكل خاص التعرّف على قياسات الأداء وحالات الاستخدام بخلاف تلك الموضّحة في الشرح.

مراجع إضافية

• شرح موجز للجمهور العام
• المواصفات
• خطأ في التتبّع
• إدخال chromestatus.com
• سلسلة محادثات Discourse حول مجموعة عمل Web Interoperability (WICG)
• مكوّن Blink: Blink>Storage>CookiesAPI