بهبود حریم خصوصی کاربر و تجربه توسعه‌دهنده با User-Agent Client Hints

User-Agent Client Hints گسترش جدیدی برای Client Hints API است که توسعه دهندگان را قادر می سازد به اطلاعات مربوط به مرورگر کاربر به روشی ارگونومیک و حفظ حریم خصوصی دسترسی داشته باشند.

Rowan Merewood

Yoav Weiss

نکات کلاینت به برنامه نویسان این امکان را می دهد که به جای نیاز به تجزیه و تحلیل آن از رشته User-Agent (UA) به طور فعال اطلاعات مربوط به دستگاه یا شرایط کاربر را درخواست کنند. ارائه این مسیر جایگزین اولین گام برای کاهش در نهایت دانه بندی رشته User-Agent است.

بیاموزید که چگونه عملکرد موجود خود را که به تجزیه رشته User-Agent برای استفاده از User-Agent Client Hints متکی است، به روز کنید.

احتیاط: اگر قبلاً از User-Agent Client Hints استفاده می‌کنید، توجه داشته باشید که از Chrome 90، قالب سرصفحه تغییر کرده است، بنابراین نشانه‌های Accept-CH باید دقیقاً با سرصفحه‌های برگشتی مطابقت داشته باشند.

پس زمینه

هنگامی که مرورگرهای وب درخواست می کنند، اطلاعاتی در مورد مرورگر و محیط آن درج می کنند تا سرورها بتوانند تجزیه و تحلیل را فعال کرده و پاسخ را سفارشی کنند. این در سال 1996 تعریف شده بود (RFC 1945 برای HTTP/1.0)، جایی که می توانید تعریف اصلی رشته User-Agent را پیدا کنید که شامل یک مثال است:

User-Agent: CERN-LineMode/2.15 libwww/2.17b3

این سربرگ برای مشخص کردن محصول (مثلاً مرورگر یا کتابخانه) و یک نظر (مثلاً نسخه) به ترتیب اهمیت در نظر گرفته شده است.

وضعیت رشته User-Agent

در طول دهه‌های میانی، این رشته جزئیات بیشتری را در مورد مشتری درخواست‌کننده (و همچنین کرفت، به دلیل سازگاری با عقب) جمع‌آوری کرده است. با نگاه کردن به رشته فعلی User-Agent کروم، می‌توانیم ببینیم:

Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36

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

ترکیب این پارامترها با تنوع بسیار زیاد مقادیر ممکن به این معنی است که رشته User-Agent می تواند حاوی اطلاعات کافی باشد تا به کاربران اجازه دهد به طور منحصر به فرد شناسایی شوند.

رشته User-Agent بسیاری از موارد استفاده مشروع را فعال می کند و هدف مهمی را برای توسعه دهندگان و صاحبان سایت انجام می دهد. با این حال، محافظت از حریم خصوصی کاربران در برابر روش‌های ردیابی مخفی نیز بسیار مهم است و ارسال اطلاعات UA به‌طور پیش‌فرض برخلاف این هدف است.

همچنین در مورد رشته User-Agent نیاز به بهبود سازگاری وب وجود دارد. بدون ساختار است، بنابراین تجزیه آن منجر به پیچیدگی غیر ضروری می شود، که اغلب علت اشکالات و مشکلات سازگاری سایت است که به کاربران آسیب می رساند. این مسائل همچنین به طور نامتناسبی به کاربران مرورگرهای کمتر رایج آسیب می رساند، زیرا ممکن است سایت ها در آزمایش پیکربندی خود شکست خورده باشند.

معرفی نکات جدید User-Agent Client

User-Agent Client Hints دسترسی به اطلاعات یکسان را امکان پذیر می کند، اما به روشی حفظ حریم خصوصی بیشتر، به نوبه خود مرورگرها را قادر می سازد تا در نهایت رشته User-Agent را برای پخش همه چیز کاهش دهند. Client Hints مدلی را اعمال می‌کند که در آن سرور باید از مرورگر مجموعه‌ای از داده‌ها را در مورد مشتری بخواهد (اشاره‌ها) و مرورگر خط‌مشی‌ها یا پیکربندی کاربر خود را اعمال می‌کند تا تعیین کند چه داده‌هایی برگردانده می‌شوند. این بدان معناست که به جای افشای تمام اطلاعات User-Agent به صورت پیش‌فرض، اکنون دسترسی به صورت صریح و قابل بازرسی مدیریت می‌شود. توسعه‌دهندگان همچنین از یک API ساده‌تر سود می‌برند - بدون عبارات منظم!

مجموعه فعلی Client Hints در درجه اول نمایشگر و قابلیت های اتصال مرورگر را توصیف می کند. می‌توانید جزئیات را در Automating Resource Selection با Client Hints کاوش کنید، اما در اینجا یک بازنگری سریع در مورد این فرآیند وجود دارد.

سرور از طریق یک هدر، راهنمایی های مشتری خاص را می خواهد:

⬇️ پاسخ از سرور

Accept-CH: Viewport-Width, Width

یا یک متا تگ:

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

سپس مرورگر می‌تواند انتخاب کند که سرصفحه‌های زیر را در درخواست‌های بعدی ارسال کند:

⬆️ درخواست بعدی

Viewport-Width: 460
Width: 230

سرور می تواند پاسخ های خود را تغییر دهد، به عنوان مثال با ارائه تصاویر با وضوح مناسب.

توجه: بحث‌های مداومی در مورد فعال کردن Client Hints در یک درخواست اولیه وجود دارد، اما قبل از رفتن به این مسیر باید طراحی واکنش‌گرا یا بهبود تدریجی را در نظر بگیرید.

User-Agent Client Hints دامنه ویژگی ها را با پیشوند Sec-CH-UA گسترش می دهد که می تواند از طریق هدر پاسخ سرور Accept-CH مشخص شود. برای همه جزئیات، با توضیح دهنده شروع کنید و سپس به پروپوزال کامل بپردازید.

توجه: نکات مشتری فقط از طریق اتصالات ایمن ارسال می شود، بنابراین مطمئن شوید که سایت خود را به HTTPS منتقل کرده اید.

نکات مشتری عامل کاربر از Chromium 89

User-Agent Client Hints از نسخه 89 به‌طور پیش‌فرض در Chrome فعال شده است.

به طور پیش فرض، مرورگر نام تجاری مرورگر، نسخه قابل توجه / اصلی، پلتفرم و نشانگر را در صورتی که مشتری یک دستگاه تلفن همراه است، برمی گرداند:

⬆️ تمامی درخواست ها

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"

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

هدرهای پاسخ و درخواست عامل کاربر

⬇️ پاسخ Accept-CH ⬆️ هدر درخواست	⬆️ درخواست مقدار نمونه	توضیحات
Sec-CH-UA	"Chromium";v="84", "Google Chrome";v="84"	لیست مارک های مرورگر و نسخه قابل توجه آنها.
Sec-CH-UA-Mobile	?1	Boolean نشان می دهد که آیا مرورگر روی دستگاه تلفن همراه است ( ?1 برای درست) یا نه ( ?0 برای نادرست).
Sec-CH-UA-Full-Version	"84.0.4143.2"	[ منسوخ شده ]نسخه کامل برای مرورگر.
Sec-CH-UA-Full-Version-List	"Chromium";v="84.0.4143.2", "Google Chrome";v="84.0.4143.2"	لیست مارک های مرورگر و نسخه کامل آنها.
Sec-CH-UA-Platform	"Android"	پلت فرم برای دستگاه، معمولا سیستم عامل (OS).
Sec-CH-UA-Platform-Version	"10"	نسخه برای پلتفرم یا سیستم عامل.
Sec-CH-UA-Arch	"arm"	معماری زیربنایی برای دستگاه در حالی که این ممکن است به نمایش صفحه مربوط نباشد، ممکن است سایت بخواهد دانلودی را ارائه دهد که به صورت پیش فرض با فرمت مناسب باشد.
Sec-CH-UA-Model	"Pixel 3"	مدل دستگاه
Sec-CH-UA-Bitness	"64"	بیتی معماری زیربنایی (یعنی اندازه در بیت یک عدد صحیح یا آدرس حافظه)

نکته کلیدی: ملاحظات حفظ حریم خصوصی و سازگاری به این معنی است که مقدار ممکن است خالی باشد، برگردانده نشود، یا با مقدار متفاوتی پر شود. این به عنوان GREASE نامیده می شود.

تبادل نمونه

یک مبادله نمونه به شکل زیر است:

⬆️ درخواست اولیه از مرورگر
مرورگر صفحه /downloads را از سایت درخواست می کند و User-Agent اصلی پیش فرض خود را ارسال می کند.

GET /downloads HTTP/1.1
Host: example.site

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"

⬇️ پاسخ از سرور
سرور صفحه را پس می فرستد و علاوه بر آن نسخه کامل مرورگر و پلتفرم را درخواست می کند.

HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List

⬆️ درخواست های بعدی
مرورگر به سرور اجازه دسترسی به اطلاعات اضافی را می دهد و نکات اضافی را در تمام درخواست های بعدی ارسال می کند.

GET /downloads/app1 HTTP/1.1
Host: example.site

Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Sec-CH-UA-Platform: "Android"

JavaScript API

در کنار سرصفحه ها، User-Agent همچنین در جاوا اسکریپت از طریق navigator.userAgentData قابل دسترسی است. اطلاعات پیش‌فرض Sec-CH-UA ، Sec-CH-UA-Mobile ، و Sec-CH-UA-Platform به ترتیب از طریق brands و ویژگی‌های mobile قابل دسترسی هستند:

// Log the brand data
console.log(navigator.userAgentData.brands);

// output
[
  {
    brand: 'Chromium',
    version: '93',
  },
  {
    brand: 'Google Chrome',
    version: '93',
  },
  {
    brand: ' Not;A Brand',
    version: '99',
  },
];

// Log the mobile indicator
console.log(navigator.userAgentData.mobile);

// output
false;

// Log the platform value
console.log(navigator.userAgentData.platform);

// output
"macOS";

مقادیر اضافی از طریق فراخوانی getHighEntropyValues() ​​قابل دسترسی هستند. اصطلاح "آنتروپی بالا" اشاره ای به آنتروپی اطلاعات است، به عبارت دیگر - مقدار اطلاعاتی که این مقادیر در مورد مرورگر کاربر نشان می دهد. همانند درخواست هدرهای اضافی، این به مرورگر بستگی دارد که چه مقادیری، در صورت وجود، برگردانده شوند.

// Log the full user-agent data
navigator
  .userAgentData.getHighEntropyValues(
    ["architecture", "model", "bitness", "platformVersion",
     "fullVersionList"])
  .then(ua => { console.log(ua) });

// output
{
   "architecture":"x86",
   "bitness":"64",
   "brands":[
      {
         "brand":" Not A;Brand",
         "version":"99"
      },
      {
         "brand":"Chromium",
         "version":"98"
      },
      {
         "brand":"Google Chrome",
         "version":"98"
      }
   ],
   "fullVersionList":[
      {
         "brand":" Not A;Brand",
         "version":"99.0.0.0"
      },
      {
         "brand":"Chromium",
         "version":"98.0.4738.0"
      },
      {
         "brand":"Google Chrome",
         "version":"98.0.4738.0"
      }
   ],
   "mobile":false,
   "model":"",
   "platformVersion":"12.0.1"
}

نسخه ی نمایشی

می‌توانید سرصفحه‌ها و API جاوا اسکریپت را در دستگاه خود در user-agent-client-hints.glitch.me امتحان کنید.

توجه: مطمئن شوید که از Chrome 89 یا بالاتر استفاده می‌کنید.

اشاره به طول عمر و تنظیم مجدد

نکات مشخص شده از طریق هدر Accept-CH در طول جلسه مرورگر یا تا زمانی که مجموعه دیگری از نکات مشخص شود ارسال می شود.

یعنی اگر سرور ارسال کند:

⬇️ پاسخ

Accept-CH: Sec-CH-UA-Full-Version-List

سپس مرورگر سرصفحه Sec-CH-UA-Full-Version-List روی تمام درخواست‌های آن سایت تا زمانی که مرورگر بسته شود ارسال می‌کند.

⬆️ درخواست های بعدی

Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"

با این حال، اگر هدر Accept-CH دیگری دریافت شود، به طور کامل جایگزین نکات فعلی مرورگر خواهد شد.

⬇️ پاسخگویی

Accept-CH: Sec-CH-UA-Bitness

⬆️ درخواست های بعدی

Sec-CH-UA-Platform: "64"

لیست درخواستی قبلی Sec-CH-UA-Full-Version-List ارسال نخواهد شد .

بهتر است هدر Accept-CH را به عنوان مشخص کننده مجموعه کامل نکات مورد نظر برای آن صفحه در نظر بگیرید، به این معنی که مرورگر نکات مشخص شده را برای تمام منابع فرعی در آن صفحه ارسال می کند. در حالی که نکات برای پیمایش بعدی ادامه خواهند داشت، سایت نباید متکی باشد یا فرض کند که آنها تحویل داده خواهند شد.

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

همچنین می‌توانید با ارسال یک Accept-CH خالی در پاسخ، از این برای پاک کردن مؤثر تمام نکات ارسال شده توسط مرورگر استفاده کنید. در نظر بگیرید که این مورد را در هر جایی که کاربر تنظیمات برگزیده را بازنشانی می کند یا از سایت شما خارج می شود، اضافه کنید.

این الگو همچنین با نحوه کار نکات از طریق تگ <meta http-equiv="Accept-CH" …> مطابقت دارد. نکات درخواستی فقط در صورت درخواست‌هایی که توسط صفحه آغاز شده است ارسال می‌شوند و نه در پیمایش بعدی.

دامنه اشاره و درخواست های متقاطع

به‌طور پیش‌فرض، راهنمایی‌های مشتری فقط در درخواست‌های یکسان ارسال می‌شوند. این بدان معناست که اگر نکات خاصی را در https://example.com بخواهید، اما منابعی را که می خواهید بهینه کنید در https://downloads.example.com هستند، هیچ راهنمایی دریافت نخواهند کرد.

برای اجازه دادن به راهنمایی در مورد درخواست های متقاطع، هر اشاره و مبدا باید توسط یک سرصفحه Permissions-Policy مشخص شود. برای اعمال این مورد در یک راهنمای کاربر-عامل مشتری، باید راهنمایی را کوچک کرده و پیشوند sec- را حذف کنید. به عنوان مثال:

⬇️ پاسخ از example.com

Accept-CH: Sec-CH-UA-Platform-Version, DPR
Permissions-Policy: ch-ua-platform-version=(self "downloads.example.com"),
                    ch-dpr=(self "cdn.provider" "img.example.com");

⬆️ درخواست به downloads.example.com

Sec-CH-UA-Platform-Version: "10"

⬆️ درخواست به cdn.provider یا img.example.com

DPR: 2

از راهنمایی های کاربر-عامل مشتری کجا استفاده کنیم؟

پاسخ سریع این است که شما باید هر نمونه‌ای را که در آن هدر User-Agent را تجزیه می‌کنید یا از هر یک از فراخوان‌های جاوا اسکریپت استفاده می‌کنید که به همان اطلاعات دسترسی دارند (به عنوان مثال navigator.userAgent ، navigator.appVersion ، یا navigator.platform ) را تغییر دهید. به جای آن از راهنمای کاربر-عامل مشتری استفاده کنید.

با برداشتن یک قدم جلوتر، باید استفاده خود از اطلاعات User-Agent را مجدداً بررسی کنید و در صورت امکان آن را با روش‌های دیگر جایگزین کنید. اغلب، می‌توانید با استفاده از بهبود پیشرونده، تشخیص ویژگی یا طراحی واکنش‌گرا به همان هدف دست یابید. مشکل اصلی تکیه بر داده‌های User-Agent این است که شما همیشه نقشه‌ای بین ویژگی‌هایی که در حال بررسی آن هستید و رفتاری که آن را فعال می‌کند حفظ می‌کنید. برای اطمینان از اینکه تشخیص شما جامع است و به روز می ماند، هزینه تعمیر و نگهداری است.

با در نظر گرفتن این اخطارها، مخزن User-Agent Client Hints برخی موارد استفاده معتبر از سایت ها را فهرست می کند .

چه اتفاقی برای رشته User-Agent می افتد؟

این طرح برای به حداقل رساندن توانایی ردیابی مخفی در وب با کاهش میزان اطلاعات شناسایی که توسط رشته User-Agent موجود در معرض دید قرار می‌گیرد، در حالی که باعث ایجاد اختلال در سایت‌های موجود نمی‌شود، است. معرفی User-Agent Client Hints اکنون به شما فرصتی می دهد تا قبل از اعمال هر گونه تغییری در رشته های User-Agent، قابلیت جدید را درک کرده و آزمایش کنید.

در نهایت ، اطلاعات موجود در رشته User-Agent کاهش می‌یابد، بنابراین فرمت قدیمی را حفظ می‌کند در حالی که فقط همان مرورگر سطح بالا و اطلاعات نسخه قابل توجه را طبق نکات پیش‌فرض ارائه می‌کند. در Chromium، این تغییر حداقل تا سال 2022 به تعویق افتاده است تا زمان اضافی برای اکوسیستم برای ارزیابی قابلیت‌های جدید User Agent Client Hints فراهم شود.

می‌توانید با فعال کردن پرچم about://flags/#reduce-user-agent از Chrome 93 نسخه‌ای از آن را آزمایش کنید (توجه: نام این پرچم about://flags/#freeze-user-agent در نسخه‌های Chrome 84 است - 92). این یک رشته با ورودی های تاریخی به دلایل سازگاری، اما با مشخصات پاکسازی شده، برمی گرداند. به عنوان مثال، چیزی شبیه به:

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36

تصویر کوچک توسط سرگئی زولکین در Unsplash