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

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

Rowan Merewood

Yoav Weiss

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

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

बैकग्राउंड

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

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

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

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

उपयोगकर्ता-एजेंट स्ट्रिंग से, कई सही इस्तेमाल के उदाहरणों की सुविधा मिलती है. साथ ही, यह डेवलपर और साइट के मालिकों के लिए अहम काम करती है. हालांकि, यह भी ज़रूरी है कि उपयोगकर्ता की निजता को गुप्त ट्रैकिंग के तरीकों से सुरक्षित रखा जाए. साथ ही, 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"

उपयोगकर्ता एजेंट का जवाब और अनुरोध के हेडर

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

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

⬆️ ब्राउज़र से किया गया शुरुआती अनुरोध
ब्राउज़र, साइट से /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

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"
}

डेमो

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

संकेत लाइफ़-टाइम और रीसेट करें

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

यूज़र-एजेंट क्लाइंट हिंट का इस्तेमाल कहां करें?

इसका तुरंत जवाब यह है कि अगर आपको उपयोगकर्ता एजेंट हेडर को पार्स करना है या उसी जानकारी (जैसे कि navigator.userAgent, navigator.appVersion या navigator.platform) को ऐक्सेस करने वाले किसी भी JavaScript कॉल का इस्तेमाल करना है, तो यूज़र-एजेंट क्लाइंट हिंट का इस्तेमाल करें.

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

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

उपयोगकर्ता एजेंट स्ट्रिंग का क्या होता है?

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

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