الوصول غير المتزامن إلى ملفات تعريف ارتباط 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"
// }

يمكن استبدال أداة setter 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