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

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

Rowan Merewood

Yoav Weiss

क्लाइंट से जुड़ी संकेत की मदद से डेवलपर, उपयोगकर्ता के डिवाइस या शर्तों की जानकारी का अनुरोध कर सकते हैं, न कि उसे User-Agent (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

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

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

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

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

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

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

हेडर के साथ-साथ, User-Agent को navigator.userAgentData से भी JavaScript में ऐक्सेस किया जा सकता है. 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 एपीआई, दोनों को आज़माया जा सकता है.

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

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 कॉल का इस्तेमाल किया जा रहा है, ताकि इसके बजाय उपयोगकर्ता-एजेंट क्लाइंट हिंट का इस्तेमाल किया जा सके.

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

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

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

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

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