उपयोगकर्ता-एजेंट क्लाइंट हिंट की मदद से, उपयोगकर्ता की निजता और डेवलपर के अनुभव को बेहतर बनाना

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

Rowan Merewood

Yoav Weiss

क्लाइंट हिंट की मदद से, डेवलपर उपयोगकर्ता के डिवाइस या स्थितियों के बारे में जानकारी का अनुरोध कर सकते हैं. इसके लिए, उन्हें User-Agent (UA) स्ट्रिंग से जानकारी पार्स करने की ज़रूरत नहीं होती. यह वैकल्पिक तरीका उपलब्ध कराना, User-Agent स्ट्रिंग की बारीकी से जानकारी को कम करने का पहला चरण है.

उपयोगकर्ता एजेंट क्लाइंट हिंट का इस्तेमाल करने के लिए, उपयोगकर्ता एजेंट स्ट्रिंग को पार्स करने पर आधारित अपनी मौजूदा सुविधा को अपडेट करने का तरीका जानें.

बैकग्राउंड

जब वेब ब्राउज़र अनुरोध करते हैं, तो वे ब्राउज़र और उसके एनवायरमेंट की जानकारी शामिल करते हैं, ताकि सर्वर आंकड़े चालू कर सकें और रिस्पॉन्स को पसंद के मुताबिक बना सकें. इसकी परिभाषा साल 1996 में तय की गई थी (एचटीटीपी/1.0 के लिए आरएफ़सी 1945). यहां आपको User-Agent स्ट्रिंग की मूल परिभाषा मिल सकती है. इसमें एक उदाहरण भी शामिल है:

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

इस हेडर का मकसद, प्रॉडक्ट (उदाहरण के लिए, ब्राउज़र या लाइब्रेरी) और टिप्पणी (उदाहरण के लिए, वर्शन) की जानकारी को ज़रूरत के हिसाब से बताना था.

User-Agent स्ट्रिंग की स्थिति

पिछले दशकों में, इस स्ट्रिंग में अनुरोध करने वाले क्लाइंट के बारे में कई तरह की अतिरिक्त जानकारी इकट्ठा हो गई है. साथ ही, इसमें पुराने सिस्टम के साथ काम करने की वजह से, ग़ैर-ज़रूरी जानकारी भी शामिल हो गई है. Chrome की मौजूदा 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 स्ट्रिंग के मामले में, वेब के साथ काम करने की सुविधा को भी बेहतर बनाने की ज़रूरत है. यह स्ट्रक्चर्ड नहीं होता, इसलिए इसे पार्स करने में ग़ैर-ज़रूरी जटिलताएं आती हैं. अक्सर, इन जटिलताओं की वजह से गड़बड़ियां और साइट के साथ काम करने से जुड़ी समस्याएं आती हैं. इनसे उपयोगकर्ताओं को परेशानी होती है. इन समस्याओं से, कम इस्तेमाल होने वाले ब्राउज़र के उपयोगकर्ताओं को ज़्यादा परेशानी होती है. ऐसा इसलिए, क्योंकि हो सकता है कि साइटें उनके कॉन्फ़िगरेशन के हिसाब से टेस्ट न कर पाएं.

पेश है यूज़र-एजेंट क्लाइंट के नए हिंट

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

क्लाइंट हिंट के मौजूदा सेट में, मुख्य तौर पर ब्राउज़र के डिसप्ले और कनेक्टिविटी की सुविधाओं के बारे में बताया गया है. क्लाइंट हिंट की मदद से, अपने-आप संसाधन चुनने की सुविधा में इस बारे में ज़्यादा जानकारी दी गई है. हालांकि, यहां इस प्रोसेस के बारे में खास जानकारी दी गई है.

सर्वर, हेडर के ज़रिए खास क्लाइंट हिंट के लिए अनुरोध करता है:

⬇️ सर्वर से मिला जवाब

Accept-CH: Viewport-Width, Width

या मेटा टैग:

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

इसके बाद, ब्राउज़र अगले अनुरोधों में ये हेडर भेज सकता है:

⬆️ अगला अनुरोध

Viewport-Width: 460
Width: 230

सर्वर, अपने जवाबों में बदलाव कर सकता है. उदाहरण के लिए, इमेज को सही रिज़ॉल्यूशन में दिखाकर.

उपयोगकर्ता एजेंट क्लाइंट के संकेत, Sec-CH-UA प्रीफ़िक्स की मदद से प्रॉपर्टी की रेंज को बड़ा करते हैं. Accept-CH सर्वर रिस्पॉन्स हेडर की मदद से, प्रीफ़िक्स तय किया जा सकता है. पूरी जानकारी के लिए, एक्सप्लेनर से शुरुआत करें. इसके बाद, पूरे प्रस्ताव को पढ़ें.

Chromium 89 में यूज़र-एजेंट क्लाइंट हिंट

Chrome के वर्शन 89 से, उपयोगकर्ता एजेंट क्लाइंट के संकेत डिफ़ॉल्ट रूप से चालू हैं.

डिफ़ॉल्ट रूप से, ब्राउज़र ब्रैंड, अहम / मेजर वर्शन, प्लैटफ़ॉर्म, और यह इंडिकेटर दिखाता है कि क्लाइंट मोबाइल डिवाइस है या नहीं:

⬆️ सभी अनुरोध

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"

User-Agent के जवाब और अनुरोध के हेडर

एक्सचेंज का उदाहरण

एक्सचेंज का उदाहरण कुछ ऐसा दिखेगा:

⬆️ ब्राउज़र से किया गया शुरुआती अनुरोध
ब्राउज़र, साइट से /downloads पेज का अनुरोध कर रहा है और अपना डिफ़ॉल्ट बुनियादी उपयोगकर्ता एजेंट भेज रहा है.

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 को JavaScript में 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"
}

डेमो

अपने डिवाइस पर हेडर और JavaScript API, दोनों को आज़माने के लिए, user-agent-client-hints.glitch.me पर जाएं.

लाइफ़टाइम और रीसेट करने के बारे में जानकारी

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 हेडर को पार्स किया जा रहा है या किसी ऐसे JavaScript कॉल का इस्तेमाल किया जा रहा है जो एक ही जानकारी (जैसे कि navigator.userAgent, navigator.appVersion या navigator.platform) को ऐक्सेस करता है. इसके बजाय, User-Agent क्लाइंट हिंट का इस्तेमाल करें.

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

इन बातों को ध्यान में रखते हुए, User-Agent क्लाइंट हिंट के रिपॉज़िटरी में, साइटों के लिए इस्तेमाल के कुछ मान्य उदाहरणों की सूची दी गई है.

User-Agent स्ट्रिंग का क्या होता है?

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

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

Chrome 93 में about://flags/#reduce-user-agent फ़्लैग को चालू करके, इस सुविधा के किसी वर्शन को टेस्ट किया जा सकता है. ध्यान दें: Chrome 84 से 92 के वर्शन में, इस फ़्लैग का नाम about://flags/#freeze-user-agent था. इससे, काम करने से जुड़ी वजहों से, पुरानी एंट्री वाली एक स्ट्रिंग दिखेगी. हालांकि, इसमें संवेदनशील जानकारी को हटा दिया जाएगा. उदाहरण के लिए, कुछ ऐसा:

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

Unsplash पर, Sergey Zolkin का दिया गया थंबनेल