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

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

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 header المطلوب، ثم الرجوع إلى User-Agent header parsing إذا لم يكن متاحًا.

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

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

على سبيل المثال، لنفترض أنّ 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 retrofill هي مكتبة صغيرة تسمح لك باستبدال 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