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

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

Rowan Merewood

Yoav Weiss

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

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

बैकग्राउंड

जब वेब ब्राउज़र अनुरोध करते हैं, तो उनमें ब्राउज़र और इसलिए, ताकि सर्वर आंकड़ों को चालू कर सकें और रिस्पॉन्स को कस्टमाइज़ कर सकें. इसे 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"
}

डेमो

आप अपने डिवाइस पर हेडर और 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

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

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

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

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

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

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

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

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