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

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

Rowan Merewood

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

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

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

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

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

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

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

ومن المحتمل أيضًا أنك تستخدم مكتبة أو خدمة تابعة لجهة خارجية لمعالجة وكيل المستخدم. في هذه الحالة، تأكَّد مما إذا كان يتم تحديثها لدعم "تلميحات برامج وكيل المستخدم".

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

تشمل المجموعة التلقائية من "تلميحات العميل لوكيل المستخدم" ما يلي:

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

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

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

على الرغم من أنّه يمكنك الانتقال إلى "تلميحات العميل لوكيل المستخدم" (User-Agent Client Hints) بل يجب عليك ذلك، إلا أنّه قد يكون لديك رموز برمجية قديمة أو قيود على الموارد تمنع ذلك. يهدف تقليل المعلومات في سلسلة وكيل المستخدم بهذه الطريقة المتوافقة مع الإصدارات القديمة إلى ضمان أنّ الرمز البرمجي الحالي ستتلقّى معلومات أقل تفصيلاً، ولكن يجب أن يحتفظ بالوظائف الأساسية.

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

إذا كنت تستخدم navigator.userAgent حاليًا، عليك الانتقال إلى اختيار 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 تلقائيًا، لذا تأكَّد من تحديد كل ما يحتاج إليه موقع 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

مزيد من الدعم

إذا لم تكن هذه الاستراتيجيات تتناول حالة استخدامك، يُرجى بدء مناقشة في privacy-sandbox-dev-support repo وسنتمكّن من استكشاف مشكلتك معًا.

صورة من تصوير ريكاردو روشا على Unسبل