النقل إلى تلميحات برنامج وكيل المستخدم

استراتيجيات لنقل موقعك الإلكتروني من الاعتماد على سلسلة وكيل المستخدم إلى تعديلات برنامج وكيل المستخدم الجديدة

Rowan Merewood

سلسلة وكيل المستخدم هي مساحة مهمة لجمع بصمة إصبع سلبي في المتصفّحات، بالإضافة إلى الصعوبة في معالجتها. ومع ذلك، هناك كل أنواع الأسباب ال válida لجمع بيانات وكيل المستخدم ومعالجتها، لذا ما عليك سوى البحث عن مسار يؤدي إلى حل أفضل. توفّر "ملاحظات العميل عن وكيل المستخدم" طريقة صريحة للإعلان عن حاجتك إلى بيانات وكيل المستخدم وأساليب لعرض البيانات بتنسيق سهل الاستخدام.

سترشدك هذه المقالة إلى عملية تدقيق إمكانية وصولك إلى بيانات وكيل المستخدم و نقل استخدام سلسلة وكيل المستخدم إلى "تعديلات برنامج وكيل المستخدم".

تدقيق جمع بيانات وكيل المستخدم واستخدامها

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

إذا لم تكن تعرف ما إذا كان يتم استخدام بيانات وكيل المستخدم أو مكان استخدامها، ننصحك بالبحث في رمز الواجهة الأمامية عن استخدام navigator.userAgent وفي رمز الواجهة الخلفية عن استخدام عنوان HTTP User-Agent. عليك أيضًا التحقّق من رمز الواجهة الأمامية للاستفادة من ميزات تم إيقافها نهائيًا، مثل navigator.platform وnavigator.appVersion.

من وجهة نظر وظيفية، ننصحك بالتفكير في أيّ مكان في الرمز البرمجي يتم فيه تسجيل البيانات أو معالجتها:

• اسم المتصفّح أو إصداره
• اسم نظام التشغيل أو إصداره
• العلامة التجارية للجهاز أو طراز الجهاز
• نوع وحدة المعالجة المركزية أو بنيتها أو عدد بتاتها (مثل 64 بت)

من المحتمل أيضًا أن تكون تستخدِم مكتبة أو خدمة تابعة لجهة خارجية لمعالجة وكيل المستخدم. في هذه الحالة، تحقّق ممّا إذا كان يتم تعديلها لتعمل مع ميزة User-Agent Client Hints.

هل تستخدِم بيانات وكيل المستخدم الأساسية فقط؟

تتضمّن المجموعة التلقائية من "تعديلات برنامج وكيل المستخدم" ما يلي:

• ‫Sec-CH-UA: اسم المتصفّح والإصدار الرئيسي/الهام
• Sec-CH-UA-Mobile: قيمة منطقية تشير إلى جهاز جوّال
• Sec-CH-UA-Platform: اسم نظام التشغيل
  • يُرجى العِلم أنّه تم تعديل هذا الإجراء في المواصفات، وسيتم تطبيقه في Chrome والمتصفّحات الأخرى المستندة إلى Chromium قريبًا.

سيحتفظ الإصدار المُقترَح والمُعدَّل من سلسلة وكيل المستخدم أيضًا بهذه المعلومات الأساسية بطريقة متوافقة مع الإصدارات القديمة. على سبيل المثال، بدلاً من Chrome/90.0.4430.85، ستتضمّن السلسلة Chrome/90.0.0.0.

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

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

الاستراتيجية: واجهة برمجة تطبيقات JavaScript للعملاء عند الطلب

إذا كنت تستخدِم حاليًا navigator.userAgent، عليك الانتقال إلى استخدام navigator.userAgentData بشكل مفضّل قبل الرجوع إلى تحليل navigator.userAgentDataسلسلة وكيل المستخدم.

if (navigator.userAgentData) {
  // use new hints
} else {
  // fall back to user-agent string parsing
}

إذا كنت تتحقّق من الأجهزة الجوّالة أو أجهزة الكمبيوتر المكتبي، استخدِم القيمة المنطقية mobile:

const isMobile = navigator.userAgentData.mobile;

userAgentData.brands هو صفيف من العناصر التي تحتوي على سمتَي brand وversion ، ويتيح للمتصفح إدراج توافقه مع تلك العلامات التجارية. يمكنك الوصول إليه مباشرةً كصفيف أو يمكنك استخدام طلب some() للتحقّق مما إذا كان هناك إدخال محدّد:

function isCompatible(item) {
  // In real life you most likely have more complex rules here
  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.some(isCompatible)) {
  // browser reports as compatible
}

إذا كنت بحاجة إلى إحدى قيم وكيل المستخدم الأكثر تفصيلاً وعالية القصور، ستحتاج إلى تحديدها والتحقق من النتيجة في Promise المعروضة:

navigator.userAgentData.getHighEntropyValues(['model'])
  .then(ua => {
    // requested hints available as attributes
    const model = ua.model
  });

يمكنك أيضًا استخدام هذه الاستراتيجية إذا أردت الانتقال من المعالجة من جهة الخادم إلى المعالجة من جهة العميل. لا تتطلّب واجهة برمجة التطبيقات JavaScript الوصول إلى رؤوس طلبات HTTP، لذا يمكن طلب قيم وكيل المستخدم في أي وقت.

الاستراتيجية: عنوان ثابت من جهة الخادم

إذا كنت تستخدِم عنوان الطلب User-Agent على الخادم وكانت احتياجاتك لهذه البيانات متسقة نسبيًا على مستوى موقعك الإلكتروني بالكامل، يمكنك تحديد إشارات العميل المطلوبة كمجموعة ثابتة في ردودك. هذه طريقة بسيطة نسبيًا لأنّك تحتاج بشكل عام إلى ضبطها في مكان واحد فقط. على سبيل المثال، قد يكون في إعدادات خادم الويب إذا كنت قد أضفت عناوين إليه بالفعل، أو إعدادات الاستضافة، أو إعدادات المستوى الأعلى لإطار العمل أو النظام الأساسي الذي تستخدمه لموقعك.

ننصحك باستخدام هذه الاستراتيجية إذا كنت بصدد تحويل أو تخصيص الردود المعروضة استنادًا إلى بيانات وكيل المستخدم.

قد يختار المتصفّحات أو العملاء الآخرون تقديم إشارات تلقائية مختلفة، لذا من الجيد تحديد كل ما تحتاجه، حتى إذا كان يتم تقديمه بشكل عام تلقائيًا.

على سبيل المثال، سيتم تمثيل الإعدادات التلقائية الحالية في Chrome على النحو التالي:

⬇️ عناوين الاستجابة

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

إذا أردت أيضًا تلقّي طراز الجهاز في الردود، عليك إرسال ما يلي:

⬇️ عناوين الاستجابة

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA

عند معالجة هذه العملية من جهة الخادم، عليك التأكّد أولاً مما إذا تم إرسال عنوان Sec-CH-UA المطلوب، ثم الرجوع إلى تحليل عنوان User-Agent إذا لم يكن متاحًا.

الاستراتيجية: تفويض التلميح إلى طلبات المصادر الخارجية

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

على سبيل المثال، لنفترض أنّ https://blog.site يستضيف موارد على https://cdn.site يمكنها عرض موارد محسّنة لجهاز معيّن. يمكن لـ https://blog.site طلب تلميح Sec-CH-UA-Model، ولكن يجب أن يفوّضه بوضوح إلى https://cdn.site باستخدام العنوان Permissions-Policy . تتوفر قائمة بالتلميحات التي تتحكم فيها السياسة في مسودة البنية الأساسية لتلميحات العملاء.

⬇️ ردّ من "blog.site" يفوّض التلميح

Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "https://cdn.site")

⬆️ يجب أن يتضمّن طلب الموارد الفرعية على cdn.site التلميح المفوَّض.

Sec-CH-UA-Model: "Pixel 5"

يمكنك تحديد إشارات متعددة لمصادر متعددة، وليس فقط من نطاق ch-ua:

⬇️ ردّ من "blog.site" بشأن تفويض عدة تلميحات إلى مصادر متعدّدة

Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
                    ch-dpr=(self "https://cdn.site" "https://img.site")

الاستراتيجية: تفويض التلميح إلى إطارات iframe

تعمل إطارات iframe من مصادر متعددة بالطريقة نفسها التي تعمل بها الموارد من مصادر متعددة، ولكن عليك تحديد التلميحات التي تريد تفويضها في سمة allow.

⬇️ رد من "blog.site"

Accept-CH: Sec-CH-UA-Model

↪️ تنسيق HTML لـ blog.site

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

⬆️ إرسال طلب إلى widget.site

Sec-CH-UA-Model: "Pixel 5"

ستلغي سمة allow في إطار iframe أي عنوان Accept-CH قد ترسلهwidget.site بنفسها، لذا تأكّد من تحديد كل ما يحتاجه الموقع الإلكتروني الذي يضمّwidget.site إطار iframe.

الاستراتيجية: تعديلات ديناميكية من جهة الخادم

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

من المهم تذكُّر أنّ كلّ نسخة من Accept-CH العنوان ستؤدّي إلى إلغاء المجموعة الحالية. لذلك، إذا كنت تضبط العنوان بشكل ديناميكي، حينئذٍ يجب أن تطلب كل صفحة المجموعة الكاملة من التلميحات المطلوبة.

على سبيل المثال، قد يكون لديك قسم واحد على موقعك الإلكتروني تريد فيه توفير رموز عناصر تحكّم تتطابق مع نظام التشغيل لدى المستخدم. لهذا الغرض، قد تحتاج إلى جلب Sec-CH-UA-Platform-Version أيضًا لعرض موارد فرعية مناسبة.

⬇️ عناوين الاستجابة لـ /blog

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

⬇️ عناوين الاستجابة لـ /app

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA

الاستراتيجية: يجب تقديم إشارات من جهة الخادم عند أول طلب

قد تكون هناك حالات تحتاج فيها إلى أكثر من مجموعة التلميحات التلقائية في الطلب الأول، ولكن هذا أمر نادر الحدوث، لذا تأكَّد من مراجعة الأسباب.

ويشير الطلب الأول إلى أول طلب من المستوى الأعلى تم إرساله في جلسة التصفّح هذه لجهة المصدر هذه. تتضمّن المجموعة التلقائية من التلميحات اسم المتصفّح مع الإصدار الرئيسي والنظام الأساسي ومؤشر الأجهزة الجوّالة. لذا، السؤال الذي ينبغي طرحه هو: هل تحتاج إلى بيانات موسّعة عند تحميل الصفحة لأول مرة؟

للحصول على نصائح إضافية حول الطلب الأول، هناك خياران. أولاً، يمكنك الاستفادة من العنوان Critical-CH. ويكون ذلك بالتنسيق نفسه المُستخدَم في Accept-CH، إلا أنّه يخبر المتصفّح بأنّه يجب على الفور إعادة محاولة الطلب إذا تم إرسال الطلب الأول بدون التلميح المهم.

⬆️ الطلب الأوّلي

[With default headers]

⬇️ عناوين الاستجابة

Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model

🔃 يعيد المتصفّح محاولة إرسال الطلب الأوّلي باستخدام العنوان الإضافي.

[With default headers + …]
Sec-CH-UA-Model: Pixel 5

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

في الحالات التي تحتاج فيها إلى الحصول على إشارات إضافية عند تحميل الصفحة لأول مرة، يوضّح اقتراح "موثوقية إشارات العميل" مسارًا لتحديد الإشارات في الإعدادات على مستوى الاتصال. والهدف من ذلك هو الاستفادة من إضافة إعدادات بروتوكول طبقة التطبيق (ALPS) إلى بروتوكول أمان طبقة النقل (TLS) 1.3 لتفعيل هذه التلميحات الأولية حول اتصالات HTTP/2 وHTTP/3. لا يزال هذا الإجراء في مرحلة مبكرة جدًا، ولكن إذا كنت تدير بشكل نشط إعدادات بروتوكول أمان طبقة النقل (TLS) و إعدادات الاتصال، هذا هو الوقت المثالي للمساهمة.

الاستراتيجية: دعم الإصدارات القديمة

قد يكون لديك رمز قديم أو تابع لجهة خارجية على موقعك الإلكتروني يعتمد على navigator.userAgent، بما في ذلك أجزاء من سلسلة وكيل المستخدم التي سيتم تقليلها. على المدى الطويل، عليك التخطيط للانتقال إلى المكالمات المكافئ navigator.userAgentData، ولكن هناك حلّ مؤقت.

الملء التلقائي UA-CH عبارة عن مكتبة صغيرة تتيح لك استبدال navigator.userAgent بسلسلة جديدة تم إنشاؤها من قيم navigator.userAgentData المطلوبة.

على سبيل المثال، ستُنشئ هذه التعليمة البرمجية سلسلة وكيل مستخدم تتضمن أيضًا تلميح "model":

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

ستعرض السلسلة الناتجة نموذج Pixel 5، ولكن سيظلّ 92.0.0.0 المُعدَّل معروضًا لأنّه لم يتم طلب التلميح uaFullVersion:

Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36

مزيد من الدعم

إذا لم تغطّ هذه الاستراتيجيات حالة الاستخدام الخاصة بك، يُرجى بدء مناقشة في ملف GitHub الخاص بمجموعة تطوير دعم "الصندوق الرمزي للخصوصية" لنتمكّن من استكشاف مشكلتك معًا.

صورة من تصوير ريكاردو روخا على Unsplash