انتقال به «اشاره‌های کارخواه نماینده کاربر»

راهبردهای انتقال سایت شما از تکیه بر رشته نماینده کاربر به «اشاره‌های کارخواه نماینده کاربر» جدید.

Rowan Merewood

تاریخ انتشار: ۱۹ مه ۲۰۲۱

رشته نماینده کاربر یک سطح انگشت‌نگاری منفعل مهم در مرورگرها است و پردازش آن نیز دشوار است. بااین‌حال، انواع دلایل معتبر برای جمع‌آوری و پردازش داده‌های نماینده کاربر وجود دارد، بنابراین آنچه موردنیاز است، مسیری به‌سوی راه‌حل بهتر است. اشاره‌های کارخواه نماینده کاربر هم روشی صریح برای اعلام نیاز شما به داده‌های نماینده کاربر ارائه می‌دهد و هم روش‌هایی برای برگرداندن داده‌ها در قالبی با استفاده آسان.

در اینجا، شما را با حسابرسی دسترسی به داده‌های نماینده کاربر و انتقال استفاده از رشته نماینده کاربر به «اشاره‌های کارخواه نماینده کاربر» آشنا می‌کنیم.

Browser Support

  • Chrome: 90.
  • Edge: 90.
  • Firefox: not supported.
  • Safari: not supported.

Source

ممیزی جمع‌آوری و استفاده از داده‌های نماینده کاربر

مانند هر نوع جمع‌آوری داده، همیشه باید بدانید چرا آن را جمع‌آوری می‌کنید. اولین قدم، صرف‌نظر از اینکه اقدامی انجام خواهید داد یا نه، این است که بدانید کجا و چرا از داده‌های نماینده کاربر استفاده می‌کنید.

اگر نمی‌دانید داده‌های نماینده کاربر کجا استفاده می‌شود، کد پیش‌نمای خود را برای استفاده از navigator.userAgent و کد پس‌نمای خود را برای استفاده از سرایند HTTP‏ User-Agent جستجو کنید. همچنین باید کد پیش‌نمای خود را بررسی کنید تا مطمئن شوید از ویژگی‌های منسوخ‌شده، مانند navigator.platform و navigator.appVersion، استفاده نمی‌کند.

از دیدگاه عملکردی، به هر جایی در کدتان که درحال ضبط یا پردازش هستید فکر کنید:

  • نام یا نسخه مرورگر
  • نام یا نسخه سیستم‌عامل
  • ساخت یا مدل دستگاه
  • نوع، معماری، یا بیت‌گرایی واحد پردازش مرکزی (برای مثال، ۶۴ بیتی)

همچنین ممکن است از کتابخانه یا سرویس شخص ثالثی برای پردازش نماینده کاربر استفاده کنید. در این مورد، بررسی کنید که آیا آن‌ها برای پشتیبانی از «اشاره‌های کارخواه نماینده کاربر» به‌روزرسانی می‌شوند یا نه.

آیا فقط از داده‌های پایه نماینده کاربر استفاده می‌کنید؟

مجموعه پیش‌فرض «اشاره‌های کارخواه نماینده کاربر» شامل موارد زیر است:

  • ‫Sec-CH-UA: نام مرورگر و نسخه اصلی / مهم
  • ‫Sec-CH-UA-Mobile: مقدار بولی که نشان‌دهنده دستگاه همراه است
  • ‫Sec-CH-UA-Platform: نام سیستم‌عامل

نسخه کاهش‌یافته رشته نماینده کاربر که پیشنهاد شده است نیز این اطلاعات پایه را به‌روشی سازگار با نسخه‌های قدیمی حفظ خواهد کرد. برای مثال، به‌جای Chrome/90.0.4430.85 رشته شامل Chrome/90.0.0.0 خواهد بود.

اگر فقط رشته نماینده کاربر را برای نام مرورگر، نسخه عمده، یا سیستم‌عامل بررسی می‌کنید، کد شما همچنان کار خواهد کرد، هرچند احتمالاً هشدارهای منسوخ شدن را خواهید دید.

درحالی‌که می‌توانید و باید به «اشاره‌های کارخواه نماینده کاربر» مهاجرت کنید، ممکن است کد قدیمی یا محدودیت‌های منابعی داشته باشید که مانع از این کار شود. کاهش اطلاعات در رشته نماینده کاربر به این روش سازگار با نسخه‌های قدیمی با این هدف انجام می‌شود که مطمئن شویم کد موجود اطلاعات با جزئیات کمتری دریافت می‌کند، اما همچنان عملکرد اصلی خود را حفظ می‌کند.

استراتژی‌ها

چندین استراتژی وجود دارد که می‌توانید برای انتقال استفاده از رشته نماینده کاربر به «اشاره‌های کارخواه نماینده کاربر» اتخاذ کنید.

میانای برنامه‌سازی کاربردی جاوا اسکریپت سمت کارخواه درخواستی

اگر از 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 API به دسترسی به سرایندهای درخواست 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 راهنمایی درخواست کند، اما باید آن را صریحاً بااستفاده از سرصفحه Permissions-Policy به https://cdn.site واگذار کند. فهرست نکات کنترل‌شده با خط‌مشی در پیش‌نویس زیرساخت نکات کارخواه دردسترس است

⬇️ پاسخ از 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")

واگذار کردن راهنمایی‌ها به iframes

میان‌مبدئی iframes به روشی مشابه منابع میان‌مبدئی کار می‌کند، اما شما نکاتی را که می‌خواهید در مشخصه 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 درخواست‌شده ساخته شده است بازنویسی کنید.

برای مثال، این کد رشته نماینده کاربر تولید می‌کند که علاوه‌براین شامل اشاره «مدل» است:

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 شروع کنید تا بتوانیم مشکل شما را باهم بررسی کنیم.