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

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

Rowan Merewood

Yoav Weiss

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

अपने मौजूदा फ़ंक्शन को अपडेट करने का तरीका जानें. यह फ़ंक्शन, उपयोगकर्ता-एजेंट स्ट्रिंग को पार्स करने के बजाय, उपयोगकर्ता-एजेंट क्लाइंट हिंट का इस्तेमाल करता है.

बैकग्राउंड

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

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

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

उपयोगकर्ता-एजेंट स्ट्रिंग की स्थिति

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

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 स्ट्रिंग में इतनी जानकारी हो सकती है कि अलग-अलग उपयोगकर्ताओं की पहचान की जा सके.

उपयोगकर्ता-एजेंट स्ट्रिंग से, कई सही इस्तेमाल के उदाहरणों की सुविधा मिलती है. साथ ही, यह डेवलपर और साइट के मालिकों के लिए अहम काम करती है. हालांकि, यह भी ज़रूरी है कि उपयोगकर्ताओं की निजता को छिपे हुए ट्रैकिंग तरीकों से सुरक्षित रखा जाए. डिफ़ॉल्ट रूप से UA की जानकारी भेजना, इस लक्ष्य के ख़िलाफ़ है.

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

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

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

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

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

⬇️ सर्वर से जवाब

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

Unस्प्लैश पर सर्गेई ज़ोल्किन का थंबनेल