HTML Navigator userAgent प्रॉपर्टी: ब्राउज़र पहचान स्ट्रिंग

HTML Navigator userAgent प्रॉपर्टी ब्राउज़र द्वारा सर्वर को भेजे जाने वाले User-Agent HTTP हेडर का मान लौटाती है। इसमें ब्राउज़र नाम, संस्करण, रेंडरिंग इंजन, ऑपरेटिंग सिस्टम, और डिवाइस जानकारी शामिल होती है। नोट: यह स्ट्रिंग स्पूफ करने योग्य है और पार्स करना जटिल है; आधुनिक विकल्प navigator.userAgentData (User-Agent Client Hints) है।

सिंटैक्स (Syntax)

navigator.userAgent

उदाहरण (Example)

यह उदाहरण User-Agent स्ट्रिंग प्रदर्शित करता है और उसके घटकों को पार्स करता है।

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      font-family: Arial, sans-serif;
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2.5rem;
      border-radius: 20px;
      width: 350px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1.5rem auto;
      font-size: 1rem;
      transition: background 0.3s;
    }
    .btn:hover { background: #b01030; }
    .show {
      font-size: 1.1rem;
      color: #fff;
      margin-top: 1rem;
      background: rgba(0,0,0,0.3);
      padding: 1.5rem;
      border-radius: 10px;
      display: inline-block;
      min-width: 90%;
      max-width: 700px;
      text-align: left;
      line-height: 1.6;
      white-space: pre-wrap;
      font-family: monospace;
    }
    .parsed {
      background: rgba(255,255,255,0.1);
      padding: 1rem;
      border-radius: 8px;
      margin-top: 1rem;
    }
    .parsed h3 { margin-top: 0; color: #ffeb3b; }
    .ua-string { word-break: break-all; }
  </style>
</head>
<body>
  <h1>HTML Navigator userAgent प्रॉपर्टी डेमो</h1>
  <button class="btn" onclick="showUserAgent()">User-Agent हेडर मान दिखाएं</button>
  <div class="show" id="uaDisplay"></div>

  <script>
    function showUserAgent() {
      const ua = navigator.userAgent;
      const display = document.getElementById('uaDisplay');
      
      // पार्सिंग प्रयास (सरल ह्यूरिस्टिक)
      let browser = 'अज्ञात', version = 'अज्ञात', engine = 'अज्ञात', os = 'अज्ञात', device = 'डेस्कटॉप';
      
      // ब्राउज़र पहचान
      if (ua.includes('Edg/')) {
        browser = 'Microsoft Edge';
        version = ua.match(/Edg\/(\d+\.\d+)/)[1];
        engine = 'Blink';
      } else if (ua.includes('OPR/') || ua.includes('Opera/')) {
        browser = 'Opera';
        version = ua.match(/(?:OPR|Opera)\/(\d+\.\d+)/)[1];
        engine = 'Blink';
      } else if (ua.includes('Chrome/') && !ua.includes('Edg/')) {
        browser = 'Google Chrome';
        version = ua.match(/Chrome\/(\d+\.\d+)/)[1];
        engine = 'Blink';
      } else if (ua.includes('Firefox/')) {
        browser = 'Mozilla Firefox';
        version = ua.match(/Firefox\/(\d+\.\d+)/)[1];
        engine = 'Gecko';
      } else if (ua.includes('Safari/') && !ua.includes('Chrome/')) {
        browser = 'Apple Safari';
        version = ua.match(/Version\/(\d+\.\d+)/)[1];
        engine = 'WebKit';
      } else if (ua.includes('Trident/') || ua.includes('MSIE')) {
        browser = 'Internet Explorer';
        version = ua.match(/(?:MSIE |rv:)(\d+\.\d+)/)[1];
        engine = 'Trident';
      }
      
      // OS पहचान
      if (ua.includes('Windows NT 10.0')) os = 'Windows 10/11';
      else if (ua.includes('Windows NT 6.3')) os = 'Windows 8.1';
      else if (ua.includes('Windows NT 6.2')) os = 'Windows 8';
      else if (ua.includes('Windows NT 6.1')) os = 'Windows 7';
      else if (ua.includes('Mac OS X')) os = 'macOS ' + (ua.match(/Mac OS X ([\d_]+)/) ? ua.match(/Mac OS X ([\d_]+)/)[1].replace(/_/g, '.') : '');
      else if (ua.includes('Linux')) os = 'Linux';
      else if (ua.includes('Android')) { os = 'Android ' + (ua.match(/Android (\d+\.\d+)/) ? ua.match(/Android (\d+\.\d+)/)[1] : ''); device = 'मोबाइल'; }
      else if (ua.includes('iPhone')) { os = 'iOS ' + (ua.match(/OS (\d+_\d+)/) ? ua.match(/OS (\d+_\d+)/)[1].replace(/_/g, '.') : ''); device = 'मोबाइल'; }
      else if (ua.includes('iPad')) { os = 'iPadOS ' + (ua.match(/OS (\d+_\d+)/) ? ua.match(/OS (\d+_\d+)/)[1].replace(/_/g, '.') : ''); device = 'टैबलेट'; }
      
      // मोबाइल डिटेक्शन
      if (/Mobi|Android|iPhone|iPad|Phone/i.test(ua)) device = 'मोबाइल';
      else if (/Tablet|iPad/i.test(ua)) device = 'टैबलेट';
      
      display.innerHTML = `
        <div class="ua-string">${ua}</div>
        
        <div class="parsed">
          <h3>🔍 पार्स की गई जानकारी (ह्यूरिस्टिक):</h3>
          <p><strong>ब्राउज़र:</strong> ${browser} ${version}</p>
          <p><strong>इंजन:</strong> ${engine}</p>
          <p><strong>ऑपरेटिंग सिस्टम:</strong> ${os}</p>
          <p><strong>डिवाइस प्रकार:</strong> ${device}</p>
        </div>
        
        <div class="parsed">
          <h3>📱 navigator.userAgentData (यदि उपलब्ध):</h3>
          <p id="uachData">जांच की जा रही है...</p>
        </div>
      `;
      
      // User-Agent Client Hints API (आधुनिक)
      if ('userAgentData' in navigator) {
        navigator.userAgentData.getHighEntropyValues(['platform', 'platformVersion', 'architecture', 'model', 'bitness'])
          .then(data => {
            document.getElementById('uachData').innerHTML = `
              <p><strong>ब्रांड्स:</strong> ${JSON.stringify(navigator.userAgentData.brands)}</p>
              <p><strong>मोबाइल:</strong> ${navigator.userAgentData.mobile}</p>
              <p><strong>प्लेटफ़ॉर्म:</strong> ${data.platform} ${data.platformVersion}</p>
              <p><strong>आर्किटेक्चर:</strong> ${data.architecture}</p>
              <p><strong>मॉडल:</strong> ${data.model || 'N/A'}</p>
            `;
          })
          .catch(() => {
            document.getElementById('uachData').textContent = 'उच्च एन्ट्रॉपी मान उपलब्ध नहीं (सुरक्षित संदर्भ आवश्यक)';
          });
      } else {
        document.getElementById('uachData').textContent = 'इस ब्राउज़र में User-Agent Client Hints API समर्थित नहीं है।';
      }
    }
  </script>
</body>
</html>

आउटपुट (Output)

"User-Agent हेडर मान दिखाएं" बटन पर क्लिक:

पार्स की गई जानकारी के साथ कच्चा User-Agent स्ट्रिंग:

User-Agent स्ट्रिंग संरचना

एक सामान्य User-Agent स्ट्रिंग:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

घटक:

• Mozilla/5.0 - ऐतिहासिक संगतता टोकन
• (Windows NT 10.0; Win64; x64) - प्लेटफ़ॉर्म/OS/आर्किटेक्चर
• AppleWebKit/537.36 - रेंडरिंग इंजन संस्करण
• (KHTML, like Gecko) - संगतता टोकन
• Chrome/120.0.0.0 - वास्तविक ब्राउज़र और संस्करण
• Safari/537.36 - सफारी संगतता टोकन

User-Agent Client Hints (आधुनिक विकल्प)

navigator.userAgentData API संरचित, गोपनीयता-सचेत डेटा प्रदान करता है:

// निम्न एन्ट्रॉपी (तुरंत उपलब्ध)
navigator.userAgentData.brands
// [{brand: "Google Chrome", version: "120"}, {brand: "Chromium", version: "120"}, {brand: "Not A Brand", version: "24"}]

navigator.userAgentData.mobile // false

// उच्च एन्ट्रॉपी (उपयोगकर्ता अनुमति/सुरक्षित संदर्भ आवश्यक)
await navigator.userAgentData.getHighEntropyValues([
  'platform', 'platformVersion', 'architecture', 'model', 'bitness'
]);
// {platform: "Windows", platformVersion: "15.0.0", architecture: "x86", model: "", bitness: "64"}

उपयोग के मामले और सर्वोत्तम प्रथाएं

✅ उचित उपयोग

• एनालिटिक्स/लॉगिंग: समग्र ब्राउज़र/OS सांख्यिकी (गोपनीयता-सचेत तरीके से)।
• फीचर डिटेक्शन फॉलबैक: जब फीचर डिटेक्शन विफल हो (दुर्लभ)।
• बॉट डिटेक्शन: संदिग्ध User-Agent पैटर्न पहचानना (सर्वर-साइड)।
• कॉम्पैटिबिलिटी वर्कअराउंड: विशिष्ट ब्राउज़र बग्स के लिए अंतिम उपाय।

❌ अनुचित उपयोग

• ब्राउज़र सूंघना (Browser Sniffing): फीचर डिटेक्शन का उपयोग करें ('fetch' in window)।
• सामग्री प्रतिबंध: User-Agent के आधार पर सामग्री ब्लॉक करना (स्पूफ करना आसान)।
• एनालिटिक्स में PII: User-Agent में व्यक्तिगत पहचान योग्य जानकारी हो सकती है।

गोपनीयता और भविष्य

• User-Agent रिडक्शन: ब्राउज़र User-Agent स्ट्रिंग में जानकारी कम कर रहे हैं (गोपनीयता/फिंगरप्रिंटिंग रोकथाम)।
• Client Hints माइग्रेशन: सर्वर्स को Sec-CH-UA-* हेडर्स का उपयोग करने के लिए माइग्रेट करना चाहिए।
• फ्रोजन: भविष्य में User-Agent स्ट्रिंग स्थिर हो सकती है (ब्राउज़र अपडेट पर संस्करण नहीं बदलेगा)।

ब्राउज़र समर्थन

• navigator.userAgent: सभी ब्राउज़र (सभी संस्करण)
• navigator.userAgentData: Chrome 89+, Edge 89+, Opera 75+ (केवल सुरक्षित संदर्भ में HTTPS पर)