उपयोगकर्ता-एजेंट क्लाइंट हिंट पर माइग्रेट करना

आपकी साइट को उपयोगकर्ता-एजेंट स्ट्रिंग पर निर्भर रहने से नए यूज़र-एजेंट क्लाइंट हिंट.

Rowan Merewood

उपयोगकर्ता-एजेंट स्ट्रिंग यह होती है एक अहम पैसिव फ़िंगरप्रिंटिंग की है, जैसे कि साथ ही, उन्हें प्रोसेस करना मुश्किल हो. हालांकि, हमारे पास सभी तरह के मान्य कई वजहों से ग्राहक-एजेंट डेटा को इकट्ठा और प्रोसेस किया जाता है. इसलिए, ऐसी स्थिति में का रास्ता दिखाया जा रहा है. यूज़र-एजेंट क्लाइंट हिंट इन दोनों में साफ़ तौर पर जानकारी देते हैं के लिए आपकी ज़रूरत के बारे में बताया जा सकता है. साथ ही, यह भी बताया जा सकता है कि आसानी से इस्तेमाल किया जा सकता है.

इस लेख में, उपयोगकर्ता-एजेंट डेटा के लिए आपके ऐक्सेस के ऑडिट के बारे में बताया गया है. उपयोगकर्ता-एजेंट स्ट्रिंग के इस्तेमाल को उपयोगकर्ता-एजेंट क्लाइंट हिंट पर माइग्रेट करना.

ऑडिट के लिए, उपयोगकर्ता एजेंट का डेटा इकट्ठा करना और उसका इस्तेमाल करना

डेटा कलेक्शन के किसी भी अन्य तरीके की तरह, आपको हमेशा यह समझना चाहिए कि आपको क्यों इकट्ठा कर रहे हैं. पहला चरण, चाहे आप शामिल हों या न हों कोई कार्रवाई करने पर, यह समझना ज़रूरी है कि उपयोगकर्ता-एजेंट डेटा का इस्तेमाल कहां और क्यों किया जा रहा है.

अगर आपको नहीं पता कि उपयोगकर्ता-एजेंट डेटा का इस्तेमाल कहां किया जा रहा है या नहीं या इस्तेमाल कहां किया जा रहा है, तो navigator.userAgent के इस्तेमाल के लिए आपका फ़्रंट-एंड कोड और इसके लिए आपका बैक-एंड कोड User-Agent एचटीटीपी हेडर का इस्तेमाल करना होगा. आपको अपना फ़्रंट-एंड कोड भी देखना चाहिए पहले से ही काम नहीं करने वाली सुविधाओं का इस्तेमाल करने के लिए, जैसे कि navigator.platform और navigator.appVersion.

फ़ंक्शन के हिसाब से, अपने कोड में जहां भी आप हैं वहां के बारे में सोचें रिकॉर्ड या प्रोसेस करने के लिए:

• ब्राउज़र का नाम या वर्शन
• ऑपरेटिंग सिस्टम का नाम या वर्शन
• डिवाइस का ब्रैंड या मॉडल
• सीपीयू का टाइप, आर्किटेक्चर या बिटनेस (उदाहरण के लिए, 64-बिट)

यह भी हो सकता है कि आप किसी तृतीय-पक्ष लाइब्रेरी या सेवा का उपयोग इन कामों के लिए कर रहे हों उपयोगकर्ता-एजेंट को प्रोसेस करना. इस मामले में, यह देखने के लिए जांचें कि क्या वे यूज़र-एजेंट क्लाइंट हिंट के साथ काम नहीं करेगा.

क्या उपयोगकर्ता एजेंट के सिर्फ़ बेसिक डेटा का इस्तेमाल किया जा रहा है?

यूज़र-एजेंट क्लाइंट हिंट के डिफ़ॉल्ट सेट में ये चीज़ें शामिल हैं:

• Sec-CH-UA: ब्राउज़र का नाम और मेजर/अहम वर्शन
• Sec-CH-UA-Mobile: मोबाइल डिवाइस की बूलियन वैल्यू से पता चलता है
• Sec-CH-UA-Platform: ऑपरेटिंग सिस्टम का नाम
  • ध्यान दें कि इसे स्पेसिफ़िकेशन में अपडेट कर दिया गया है और इसे Chrome और Chromium-आधारित अन्य ब्राउज़र पर जल्द ही उपलब्ध होगी.

प्रस्तावित उपयोगकर्ता-एजेंट स्ट्रिंग के कम किए गए वर्शन में भी कोई बदलाव नहीं होगा इस बुनियादी जानकारी को पुराने सिस्टम के साथ काम करने की सुविधा देने के लिए तैयार किया है. उदाहरण के लिए, Chrome/90.0.4430.85 स्ट्रिंग में Chrome/90.0.0.0 शामिल होगा.

अगर सिर्फ़ ब्राउज़र के नाम, मेजर वर्शन, ऑपरेटिंग सिस्टम पर स्विच करते हैं, तो आपका कोड भले ही संभावना है कि पर जाएं.

आपके पास उपयोगकर्ता-एजेंट क्लाइंट हिंट पर माइग्रेट करने का विकल्प है और ऐसा करना चाहिए भी, लेकिन हो सकता है कि आपके पास लेगसी कोड या रिसॉर्स पार्टियां जो इसे रोकती हैं. इस तरह की जानकारी में, इस पुराने-साथ काम करने वाले तरीके की उपयोगकर्ता-एजेंट स्ट्रिंग का मकसद यह पक्का करना है कि मौजूदा कोड के बारे में ज़्यादा जानकारी नहीं मिलेगी. हालांकि, यह ज़रूरी है कि बुनियादी फ़ंक्शन बनाए रखने के लिए.

रणनीति: मांग पर क्लाइंट-साइड JavaScript API

अगर आप अभी 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 यह काम नहीं करता को एचटीटीपी अनुरोध हेडर का ऐक्सेस चाहिए, इसलिए उपयोगकर्ता-एजेंट वैल्यू के लिए अनुरोध किया जा सकता है: किसी भी समय.

रणनीति: स्टैटिक सर्वर साइड हेडर

अगर सर्वर पर अपनी ज़रूरतों के लिए 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")

रणनीति: iframe को संकेत सौंपना

क्रॉस-ऑरिजिन iframe, क्रॉस-ऑरिजिन रिसॉर्स की तरह ही काम करते हैं. हालांकि, वे संकेत बताएं जिन्हें आप allow एट्रिब्यूट में सौंपना चाहते हैं.

⬇️ blog.site से मिला जवाब

Accept-CH: Sec-CH-UA-Model

blog.site के लिए ↪️ एचटीएमएल

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

⬆️ widget.site को भेजा गया अनुरोध

Sec-CH-UA-Model: "Pixel 5"

iframe में allow एट्रिब्यूट, ऐसे किसी भी 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

इससे पहले अनुरोध पर ही फिर से कोशिश करने पर अतिरिक्त खर्च करना पड़ेगा, लेकिन लागू करने पर खर्च बहुत कम होता है. अतिरिक्त हेडर और ब्राउज़र भेजें बाकी काम कर लेंगे.

ऐसी स्थितियों में जहां आपको वाकई अतिरिक्त संकेतों की आवश्यकता होती है पहला पेज लोड, क्लाइंट हिंट पर भरोसा प्रस्ताव कनेक्शन-लेवल सेटिंग में संकेत तय करने के लिए एक रूट तय किया जा रहा है. यह ऐप्लिकेशन-लेयर प्रोटोकॉल का इस्तेमाल करके TLS के लिए Settings(ALPS) एक्सटेंशन 1.3 का इस्तेमाल करें, ताकि एचटीटीपी/2 और एचटीटीपी/3 कनेक्शन पर पहले से इस तरह के संकेतों को लागू किया जा सके. यह अभी अपने शुरुआती चरण में है, लेकिन अगर आप सक्रिय रूप से अपना TLS और कनेक्शन सेटिंग देखें, तो यह योगदान देने का सही समय है.

रणनीति: लेगसी सपोर्ट

हो सकता है कि आपकी साइट पर लेगसी या तीसरे पक्ष का कोड मौजूद हो. यह कोड इन चीज़ों पर निर्भर करता है navigator.userAgent, जिसमें उपयोगकर्ता-एजेंट स्ट्रिंग के वे हिस्से शामिल हैं जिन्हें कम किया गया. लंबे समय के लिए, आपको navigator.userAgentData कॉल करता है, लेकिन फ़िलहाल इसका एक हल है.

UA-CH रेट्रोफ़िल एक छोटा सा इस लाइब्रेरी की मदद से, navigator.userAgent को नई स्ट्रिंग से ओवरराइट किया जा सकता है अनुरोध की गई navigator.userAgentData वैल्यू से बनाया गया.

उदाहरण के लिए, यह कोड एक उपयोगकर्ता एजेंट स्ट्रिंग जनरेट करेगा, जो इसमें "मॉडल" शामिल होता है संकेत:

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

नतीजे के तौर पर मिलने वाली स्ट्रिंग में Pixel 5 मॉडल दिखेगा, लेकिन कम की गई वैल्यू अब भी दिखेगी uaFullVersion संकेत के तौर पर 92.0.0.0 का अनुरोध नहीं किया गया:

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 रेपो आपकी समस्या को हल कर सकते हैं.

फ़ोटो: रिकार्डो रोशा Unस्प्लैश पर