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

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

روان ميروود

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

تقدّم لك هذه المقالة تدقيقًا بوصولك إلى بيانات وكيل المستخدم ونقل بيانات استخدام سلسلة وكيل المستخدم إلى أداة User-Agent Client Hints.

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

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

إذا لم تكن تعرف ما إذا كان يتم استخدام بيانات وكيل المستخدم أو مكان استخدامها، ننصحك بالبحث في رمز الواجهة الأمامية عن استخدام 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) إلى الإصدار 1.3 من بروتوكول أمان طبقة النقل (TLS) لإتاحة هذا التمرير المبكر للتلميحات في اتصالات 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

مزيد من الدعم

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

صورة من تصوير ريكاردو روشا على موقع UnLaunch