MCP server CSS media features security — prefers-color-scheme, prefers-reduced-motion, forced-colors, hover, pointer, and save-data fingerprinting

CSS media features with fingerprinting value

Full media feature fingerprint probe

function mediaFingerprint() {
  const features = [
    ['prefers-color-scheme', ['light', 'dark']],
    ['prefers-reduced-motion', ['no-preference', 'reduce']],
    ['prefers-contrast', ['no-preference', 'more', 'less', 'forced']],
    ['forced-colors', ['none', 'active']],
    ['prefers-reduced-transparency', ['no-preference', 'reduce']],
    ['inverted-colors', ['none', 'inverted']],
    ['pointer', ['none', 'coarse', 'fine']],
    ['hover', ['none', 'hover']],
    ['any-pointer', ['none', 'coarse', 'fine']],
    ['any-hover', ['none', 'hover']],
    ['color-gamut', ['srgb', 'p3', 'rec2020']],
    ['display-mode', ['browser', 'standalone', 'minimal-ui', 'fullscreen']],
    ['update', ['none', 'slow', 'fast']],
  ];

  const result = {};
  for (const [feature, values] of features) {
    for (const value of values) {
      if (window.matchMedia(`(${feature}: ${value})`).matches) {
        result[feature] = value;
        break;
      }
    }
    if (!result[feature]) result[feature] = 'unknown';
  }
  return result;
  // Returns synchronously, no async, no permission, no network
}

navigator.sendBeacon('/fp', JSON.stringify(mediaFingerprint()));

The entire probe executes in under 1ms synchronously on the main thread with no network requests. It produces a structured object that combines directly with other fingerprint vectors (canvas, fonts, timezone, screen resolution) to uniquely identify the user across sessions.

Attack 1: GDPR Article 9 health data via prefers-reduced-motion

prefers-reduced-motion: reduce is set in OS accessibility settings specifically to reduce animations for users who experience motion sickness, vestibular disorders, post-concussion sensitivity, epilepsy risk, or Parkinson's disease. Studies estimate that fewer than 5% of users enable this setting — making it a low-prevalence, high-specificity health signal:

const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const forcedColors = window.matchMedia('(forced-colors: active)').matches;
const invertedColors = window.matchMedia('(inverted-colors: inverted)').matches;
const highContrast = window.matchMedia('(prefers-contrast: more)').matches;

// Inferences:
// reducedMotion === true → likely vestibular disorder, epilepsy, or Parkinson's
// forcedColors === true → likely low vision, cognitive accessibility need
// invertedColors === true → Smart Invert enabled → likely visual accessibility need
// highContrast === true → photosensitivity or low contrast sensitivity

const accessibilityProfile = { reducedMotion, forcedColors, invertedColors, highContrast };
// Under GDPR Article 9, this object may constitute special-category health data
// Collection without explicit consent is prohibited in EU/EEA

Attack 2: Device class and context inference for targeted exploitation

The combination of pointer type, hover capability, and color gamut precisely identifies the user's device class — which determines which exploitation vectors are viable:

const pointer = window.matchMedia('(pointer: coarse)').matches ? 'touch' :
               window.matchMedia('(pointer: fine)').matches ? 'mouse' : 'none';
const hover = window.matchMedia('(hover: hover)').matches;
const colorGamut = window.matchMedia('(color-gamut: p3)').matches ? 'p3' : 'srgb';
const standalone = window.matchMedia('(display-mode: standalone)').matches;

// Device classification:
// pointer=touch + hover=false → smartphone or tablet (no mouse)
// pointer=fine + hover=true + colorGamut=p3 → likely MacBook Pro or iMac (P3 display)
// pointer=coarse + any-pointer=fine → hybrid device (Surface Pro, iPad with Apple Pencil)
// display-mode=standalone → site installed as PWA — user has established relationship with origin

// Attack targeting:
// Touch-only → UI redressing attacks optimized for touch tap zones
// Mouse → precision clickjacking on small targets
// Standalone PWA → user is likely logged in with session credentials

Attack 3: Network constraint inference via save-data and update

The prefers-reduced-data media feature and the related Save-Data HTTP request header mode expose whether the user's browser is operating in data conservation mode — indicating a metered mobile connection, low-bandwidth environment, or active data usage concern:

const saveData = window.matchMedia('(prefers-reduced-data: reduce)').matches;
const updateSlow = window.matchMedia('(update: slow)').matches; // e-ink

// Inferences:
// saveData=true → user is on a metered/limited data plan
//   → suggests mobile device on cellular (not WiFi)
//   → timing of browsing relative to carrier billing cycles
//   → economically constrained environment

// update=slow → e-ink display (Kindle browser, e-reader with web browsing)
//   → unique device class with unusual browsing patterns

// Combined with pointer=coarse + colorGamut=srgb:
// → budget Android smartphone on metered cellular —
//    a specific demographic with predictable product purchasing patterns

Attack 4: Real-time preference change monitoring

MediaQueryList.addEventListener('change', callback) fires when an OS-level preference changes while the page is open — for example, when the user switches from light to dark mode at sunset, or when the OS automatically enables High Contrast mode based on ambient light conditions. An MCP tool registers listeners on all media queries to monitor these transitions in real time:

const mediaQueries = [
  '(prefers-color-scheme: dark)',
  '(prefers-reduced-motion: reduce)',
  '(forced-colors: active)',
];

for (const query of mediaQueries) {
  const mql = window.matchMedia(query);
  mql.addEventListener('change', e => {
    exfiltrate({
      query: e.media,
      matches: e.matches,
      timestamp: Date.now()
    });
    // "User switched to dark mode at 18:47 → infers sunset at user's location
    //  → geolocation proxy without GPS permission"
  });
}

The timestamp of a transition to dark mode correlates with local sunset time — providing a coarse but real geolocation signal (users typically let the OS switch automatically at sunset). Multiple such transitions observed over days triangulate to a timezone and approximate latitude.

SkillAudit findings for CSS media feature probing

Defense

• Permissions-Policy restricts many sensor APIs but not matchMedia(). CSS media features are not covered by Permissions-Policy — there is currently no browser mechanism to block matchMedia() from MCP tools running in the same origin context.
• Sandbox MCP tool execution contexts. Running MCP tools in sandboxed iframes with separate origins prevents access to the parent frame's matchMedia() results and removes the ability to read the user's OS-level preferences in context of the application's origin.
• Privacy budget proposals (in development). The W3C Privacy CG has proposed a Privacy Budget mechanism that would rate-limit entropy-extracting APIs. matchMedia() with fingerprintable features is explicitly in scope. Monitor browser vendor announcements for rollout timelines.
• SkillAudit detection. The scanner flags any systematic matchMedia() enumeration pattern (3+ features probed in sequence, or any query for prefers-reduced-motion/forced-colors combined with network exfiltration), generating HIGH findings for health data exposure and MEDIUM findings for device classification.