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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

Rowan Merewood

تاريخ النشر: 19 أيار (مايو) 2021

سلسلة User-Agent هي مساحة مهمة لجمع بصمة إصبع سلبي في المتصفّحات، بالإضافة إلى الصعوبة في معالجتها. ومع ذلك، هناك كل أنواع الأسباب ال válida لجمع بيانات وكيل المستخدم ومعالجتها، لذا ما عليك سوى تحديد مسار يؤدي إلى حل أفضل. توفّر إشارات عملاء وكيل المستخدم طريقة صريحة للتعبير عن حاجتك إلى بيانات وكيل المستخدم و methods لعرض البيانات بتنسيق سهل الاستخدام.

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

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

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

إذا لم تكن تعرف ما إذا كان يتم استخدام بيانات وكيل المستخدم أو مكان استخدامها، ننصحك بالبحث في رمز الواجهة الأمامية عن استخدام 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/90.0.4430.85، ستتضمّن السلسلة Chrome/90.0.0.0.

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

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

الاستراتيجيات

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

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

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

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 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 وسنتمكن من استكشاف مشكلتك معًا.