Device information

Get information about your current device (screen size, pixel-ratio, user agent, ...)

Browser & Device Information Inspector: Navigator API, User-Agent Client Hints, WebGL Hardware Forensics, and Privacy Sandboxes

1. Quick Overview & Core Advantages

The Device Information Inspector is an in-browser diagnostic tool that inspects, analyzes, and decodes the full spectrum of client device capabilities, hardware specifications, browser environment parameters, network states, and graphic subsystem attributes. Powered by standardized W3C and WHATWG interfaces—including User-Agent Client Hints (UA-CH), the Navigator Interface, Screen API, Network Information API, and WebGL Context Queries—it offers a real-time forensic snapshot of the host operating environment.

Historically, web servers relied on parsing arbitrary, unstandardized HTTP User-Agent strings to deduce operating system versions and device profiles. This led to pervasive user tracking, fragile server-side regex heuristics, and spoofing vulnerabilities.

Core Architectural Advantages

  • 100% In-Browser Diagnostic Computation: All hardware detection queries, WebGL context probes, and viewport calculations execute locally in the user’s browser runtime. Zero device footprints, hardware serials, or fingerprint strings are uploaded to external tracking servers.
  • Hardware-Level Precision via WebGL / WebGPU: Queries unmasked GPU rendering hardware parameters (UNMASKED_RENDERER_WEBGL, UNMASKED_VENDOR_WEBGL, shader precision limits, max texture dimensions) to reveal the physical graphics silicon powering the client.
  • Privacy-Preserving User-Agent Client Hints: Demonstrates how modern privacy sandboxes replace legacy User-Agent strings with granular, privacy-budgeted HTTP headers that protect users against passive device fingerprinting.

2. Step-by-Step Custom Configuration Guide

Extracting full hardware and platform diagnostic data requires querying multiple browser APIs across synchronous DOM properties and asynchronous permission-guarded features.

Step 1: Querying Navigator & Client Hints

Modern Chromium browsers implement navigator.userAgentData to query low-entropy and high-entropy device hints securely:

export interface DeviceDiagnosticProfile {
  operatingSystem: string;
  osVersion: string;
  browserName: string;
  browserVersion: string;
  architecture: string;
  deviceModel: string;
  isMobile: boolean;
  logicalCores: number;
  deviceMemoryGb?: number;
  screenResolution: string;
  pixelRatio: number;
  colorDepth: number;
  gpuVendor: string;
  gpuRenderer: string;
}

export async function inspectDeviceProfile(): Promise<DeviceDiagnosticProfile> {
  const nav = navigator as any;
  let os = "Unknown";
  let osVersion = "Unknown";
  let browserName = "Unknown";
  let browserVersion = "Unknown";
  let architecture = "Unknown";
  let model = "Desktop";
  const isMobile = nav.userAgentData ? nav.userAgentData.mobile : /Mobi|Android/i.test(navigator.userAgent);

  // 1. High-Entropy User-Agent Client Hints (Chromium Standards)
  if (nav.userAgentData && nav.userAgentData.getHighEntropyValues) {
    try {
      const hints = await nav.userAgentData.getHighEntropyValues([
        "platform",
        "platformVersion",
        "architecture",
        "model",
        "uaFullVersion"
      ]);
      os = hints.platform || os;
      osVersion = hints.platformVersion || osVersion;
      architecture = hints.architecture || architecture;
      model = hints.model || model;
      
      const primaryBrand = nav.userAgentData.brands?.find((b: any) => !b.brand.includes("Not"));
      if (primaryBrand) {
        browserName = primaryBrand.brand;
        browserVersion = hints.uaFullVersion || primaryBrand.version;
      }
    } catch {
      // Fallback if rejected by permissions policy
    }
  }

  // 2. Hardware Capabilities
  const logicalCores = navigator.hardwareConcurrency || 0;
  const deviceMemoryGb = nav.deviceMemory || undefined; // Available in Chromium (RAM in GB)

  // 3. Display Metrics
  const screenResolution = `${window.screen.width} x ${window.screen.height}`;
  const pixelRatio = window.devicePixelRatio || 1;
  const colorDepth = window.screen.colorDepth || 24;

  // 4. WebGL GPU Graphics Probe
  const { vendor: gpuVendor, renderer: gpuRenderer } = inspectGpuHardware();

  return {
    operatingSystem: os,
    osVersion,
    browserName,
    browserVersion,
    architecture,
    deviceModel: model,
    isMobile,
    logicalCores,
    deviceMemoryGb,
    screenResolution,
    pixelRatio,
    colorDepth,
    gpuVendor,
    gpuRenderer
  };
}

Step 2: Extracting GPU Silicon Details via WebGL

By generating an off-screen canvas context and querying the WEBGL_debug_renderer_info extension, browsers reveal the physical graphics processing unit:

function inspectGpuHardware(): { vendor: string; renderer: string } {
  try {
    const canvas = document.createElement("canvas");
    const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    if (!gl) {
      return { vendor: "Unavailable", renderer: "Unavailable" };
    }

    const debugInfo = (gl as WebGLRenderingContext).getExtension("WEBGL_debug_renderer_info");
    if (!debugInfo) {
      return {
        vendor: (gl as WebGLRenderingContext).getParameter((gl as WebGLRenderingContext).VENDOR),
        renderer: (gl as WebGLRenderingContext).getParameter((gl as WebGLRenderingContext).RENDERER)
      };
    }

    const vendor = (gl as WebGLRenderingContext).getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
    const renderer = (gl as WebGLRenderingContext).getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);

    return { vendor, renderer };
  } catch {
    return { vendor: "Blocked by Privacy Policy", renderer: "Blocked by Privacy Policy" };
  }
}

3. Algorithmic Principles, W3C Specifications & Fingerprinting Entropy

The Shift: Legacy User-Agent vs Client Hints (UA-CH)

Under RFC 7231, browsers sent an exhaustive User-Agent header with every HTTP request:

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Because this header leaked high-entropy fingerprinting identifiers passively across all third-party resources, the W3C and Chromium consortium established User-Agent Client Hints (RFC 8942):

  1. Low-Entropy Hints (Sent by Default):
    • Sec-CH-UA: Brand and major version (e.g., "Chromium";v="124", "Google Chrome";v="124").
    • Sec-CH-UA-Mobile: Boolean flag (?0 or ?1).
    • Sec-CH-UA-Platform: High-level OS identifier (e.g., "Windows").
  2. High-Entropy Hints (On-Demand Opt-In): Servers must explicitly request detailed fields using the Accept-CH response header:
    Accept-CH: Sec-CH-UA-Platform-Version, Sec-CH-UA-Model, Sec-CH-UA-Arch, Sec-CH-UA-Bitness
    The browser checks its internal permissions policy and Privacy Sandbox budget before returning these values on subsequent requests.

Browser Fingerprinting Shannon Entropy

In security engineering, device attributes carry varying amounts of Shannon entropy ($H$), measured in bits: $H(X) = -\sum_{i=1}^n P(x_i) \log_2 P(x_i)$

  • Low Entropy (1–3 bits): OS family (Windows vs macOS vs Linux), screen color depth.
  • Medium Entropy (4–8 bits): Screen resolution, system time zone, browser language preferences.
  • High Entropy (10–18+ bits): WebGL unmasked renderer string, canvas 2D rendering noise, audio oscillator latency, installed font metrics.

When combined, unconstrained client device attributes can yield over 33–40 bits of entropy, allowing passive trackers to uniquely identify a single computer among billions of worldwide users without cookies. Modern browsers implement privacy protections (such as Safari’s fingerprinting defenses and Firefox’s Resist Fingerprinting mode) that deliberately spoof or quantize these values.

4. Production Architecture & Systems Engineering Use Cases

Architecture: Adaptive Web Performance & Asset Serving

High-traffic digital platforms use device diagnostic data to deliver dynamically optimized web assets at the edge:

                      [Incoming HTTP Request]
                                |
                                v
                   [Cloudflare / Fastly CDN Edge]
                                |
                     Evaluate Client Hints:
               - Sec-CH-UA-Mobile: ?1
               - Sec-CH-Viewport-Width: 390
               - Device-Memory: 4
               - Downlink: 1.5 Mbps
                                |
                +---------------+---------------+
                |                               |
        Low-Power Mobile Device          High-Performance Desktop
                |                               |
        - Serve 1x AVIF image           - Serve 2x WebP / PNG
        - Defer heavy Three.js          - Load full 3D WebGL scenes
        - Disable blur backdrops        - Enable full CSS blur filters

Real-World Engineering Applications

  1. Adaptive 3D Rendering Quality: WebGL and WebGPU applications (CAD software, Three.js 3D configurators) inspect UNMASKED_RENDERER_WEBGL. If an integrated Intel GPU is detected, the engine disables dynamic shadows, reduces anti-aliasing passes, and limits texture sizes to prevent frame drops.
  2. Crash & Telemetry Correlation: Error tracking platforms (Sentry, Datadog) attach device profiles to crash logs. If a memory leak occurs only on devices where navigator.deviceMemory <= 2, engineers can isolate low-RAM garbage collection bottlenecks immediately.
  3. Responsive Media Layouts: Using window.devicePixelRatio, websites load high-DPI @2x and @3x retina graphics only for screens that can physically render them, conserving mobile bandwidth.

5. Frequently Asked Questions (FAQs)

Why does my GPU Renderer show “SwiftShader” or “Apple M1 / ANGLE” instead of my exact graphics card?

Browsers deliberately abstract or virtualize graphics hardware in several scenarios:

  • SwiftShader: A software rasterizer used when hardware GPU acceleration is disabled, unsupported, or blocked due to buggy graphic drivers.
  • ANGLE (Almost Native Graphics Layer Engine): Translates WebGL OpenGL ES calls into native Direct3D (Windows) or Metal (macOS) calls.
  • Fingerprinting Countermeasures: Privacy-focused browsers (such as Tor or Brave) mask exact GPU names with generic labels to prevent browser fingerprinting.

Can website scripts access my computer’s serial number, MAC address, or private IP address?

No. Standard browser JavaScript runs inside a sandboxed security perimeter. Browsers provide zero APIs for accessing host hardware serial numbers, hard drive UUIDs, motherboard IDs, or network MAC addresses. Local private LAN IP addresses (192.168.x.x) are also shielded by WebRTC mDNS anonymization, where local ICE candidates are masked behind generated UUIDs.

Why is navigator.hardwareConcurrency capped at 8 or 16 on modern high-core CPUs?

Many 32-core and 64-core workstation processors (such as AMD Threadripper or high-end Intel i9s) report fewer cores in navigator.hardwareConcurrency. Major browsers intentionally clamp this property to a maximum boundary (usually 8 or 16) to limit the amount of identifying hardware entropy exposed to third-party ad trackers.

How does Dark Mode detection work programmatically?

Browsers expose operating system color scheme preferences through CSS media queries and the window.matchMedia() JavaScript API:

const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
  console.log("System theme changed to:", e.matches ? "Dark" : "Light");
});

6. Client-Side Privacy & Security Guarantee

This Device Information Inspector tool is designed with strict respect for user privacy:

  • Zero Server Uploads: None of your detected system properties, screen dimensions, GPU vendor strings, or user agent headers are transmitted to our servers or third-party analytics services.
  • Pure Local Execution: All diagnostics are calculated on-the-fly directly inside your local browser context. When you close or refresh this tab, all diagnostic state in memory is instantly and completely discarded.