Browser Headers Demo

Your Browser Headers

Below are the headers your browser sent with this request:

All Headers

Client Hints (SEC-CH-*)

Fetch Metadata

Header Name

Value

Header Name

Value

Header Name

Value

How These Headers Work

Modern browsers send special headers called Client Hints (prefixed with sec-ch-) that provide information about the user's device, preferences, and browser capabilities. These headers help websites deliver optimized content without having to use JavaScript for detection.

Client Hints Headers Include:

sec-ch-ua: Browser name and version information
sec-ch-ua-platform: Operating system platform (Windows, macOS, Android, etc.)
sec-ch-ua-mobile: Whether the device is mobile (?1) or not (?0)
sec-ch-ua-arch: Device CPU architecture (x86, arm, etc.)
sec-ch-prefers-color-scheme: User's color scheme preference (light/dark)
sec-ch-prefers-reduced-motion: User's motion preference

Fetch Metadata Headers:

sec-fetch-site: Indicates the relationship between request initiator and target
sec-fetch-mode: The request's mode (navigate, cors, no-cors, etc.)
sec-fetch-dest: The request's destination (document, image, script, etc.)
sec-fetch-user: Indicates if the request was initiated by user interaction

Implementation Guide

To detect and use these headers on your server:

Node.js/Express Example:

app.get('/detect-browser', (req, res) => {
  const browserInfo = {
    browser: req.headers['sec-ch-ua'],
    platform: req.headers['sec-ch-ua-platform'],
    isMobile: req.headers['sec-ch-ua-mobile'] === '?1',
    colorScheme: req.headers['sec-ch-prefers-color-scheme'],
    reducedMotion: req.headers['sec-ch-prefers-reduced-motion']
  };
  
  res.json(browserInfo);
});

PHP Example:

<?php
$browserInfo = [
  'browser' => $_SERVER['HTTP_SEC_CH_UA'] ?? 'Not available',
  'platform' => $_SERVER['HTTP_SEC_CH_UA_PLATFORM'] ?? 'Not available',
  'isMobile' => ($_SERVER['HTTP_SEC_CH_UA_MOBILE'] ?? '?0') === '?1',
  'colorScheme' => $_SERVER['HTTP_SEC_CH_PREFERS_COLOR_SCHEME'] ?? 'Not available',
  'reducedMotion' => $_SERVER['HTTP_SEC_CH_PREFERS_REDUCED_MOTION'] ?? 'Not available'
];

header('Content-Type: application/json');
echo json_encode($browserInfo);
?>