MCP server CSS env(titlebar-area) security — consent bypass via PWA Window Controls Overlay non-client area, OS window button overlap, -webkit-app-region: drag absorption, and non-PWA fallback positioning

CSS env(titlebar-area-*) — overview

The Window Controls Overlay (WCO) API is a PWA display mode that extends the web app's content into the title bar area of the application window. When a PWA declares "display_override": ["window-controls-overlay"] in its manifest and the user installs it, the browser exposes four CSS environment variables: env(titlebar-area-x), env(titlebar-area-y), env(titlebar-area-width), and env(titlebar-area-height). These describe the usable title bar rectangle — the space between the window control buttons on the left (macOS) or right (Windows, Android) and the edge of the window. Pages can use this region to render custom title bar content, app icons, or navigation. The values are non-zero only in installed PWA mode with WCO active. In a regular browser tab, all four values are 0px. Related: env(keyboard-inset) attacks, env(safe-area-inset) attacks.

Attack 1: consent placed in the title bar area — rendered below OS window controls

The title bar area in a Window Controls Overlay PWA is rendered in a separate compositing layer. The OS window control buttons (close, minimize, maximize) are drawn in a layer above the page's title bar content. An MCP server positions the consent banner to exactly fill the env(titlebar-area-*) rectangle. Visually, the consent is present and readable — but the OS buttons overlay it physically. On Windows, the three window control buttons occupy the rightmost ~150px of the title bar. On macOS, the traffic light buttons occupy the leftmost ~75px. A consent with its "Accept" button placed in these regions cannot be clicked — the click event is captured by the OS-level window chrome, not by the web content underneath.

/* Attack: consent positioned in titlebar-area geometry — OS controls block interaction */
.consent-titlebar {
  position: fixed;
  /* Exactly match the titlebar area geometry */
  left: env(titlebar-area-x, 0px);
  top: env(titlebar-area-y, 0px);
  width: env(titlebar-area-width, 100%);
  height: env(titlebar-area-height, 32px);
  /* OS window control buttons are rendered above this layer at OS level */
  /* Close/minimize/maximize physically cover the consent's action area */
  /* On Windows: rightmost ~150px blocked by [—] [□] [×] buttons */
  /* On macOS: leftmost ~75px blocked by [●] [●] [●] traffic lights */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Accept button at right — Windows close button area */
  background: rgba(255,255,255,0.95);
  z-index: 99999;
  /* High z-index only affects web content layers; OS chrome is above web z-index */
}

.consent-accept-btn {
  margin-right: 8px; /* Lands directly under Windows close button [×] */
}

// Detection: scan for env(titlebar-area-*) in consent element positioning
function auditTitlebarAreaConsent(consentEl) {
  for (const sheet of document.styleSheets) {
    try {
      for (const rule of sheet.cssRules) {
        if (rule.type !== CSSRule.STYLE_RULE) continue;
        try { if (!consentEl.matches(rule.selectorText)) continue; }
        catch (e) { continue; }
        const text = rule.cssText;
        if (/env\s*\(\s*titlebar-area/.test(text)) {
          console.warn('[SkillAudit] consent element uses env(titlebar-area-*) for positioning;',
            'in PWA Window Controls Overlay mode, OS window buttons render above this area;',
            'consent interaction may be blocked by OS-level close/minimize/maximize buttons;',
            'rule:', text.slice(0, 200), 'element:', consentEl);
        }
      }
    } catch (e) {}
  }
  // Check if running as installed PWA with WCO
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches) {
    console.warn('[SkillAudit] page is running in Window Controls Overlay PWA mode;',
      'titlebar-area env vars are active;',
      'titlebar-area-x:', getComputedStyle(document.documentElement)
        .getPropertyValue('env(titlebar-area-x)') || '(check via CSS)',
      'check all consent elements for titlebar-area positioning');
  }
}

Attack 2: macOS traffic light button zone covers consent "Accept" button

On macOS, the three traffic light buttons (close, minimize, zoom) are placed at the left side of the title bar with approximately 8px from the left edge and 12px vertical centering in a standard 28–32px tall title bar. An MCP server can target macOS specifically by placing the consent's "Decline" button in the right half of the titlebar area (safe from traffic lights) while placing the "Accept" button in the 75px leftmost region covered by the traffic lights. The visual design shows both buttons; only the Decline button is actually tappable. This is undetectable by any tool that does not simulate the macOS WCO layout.

/* Attack: Accept button placed under macOS traffic lights (left ~75px of titlebar) */
@media (display-mode: window-controls-overlay) {
  .consent-bar {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 300px);
    height: env(titlebar-area-height, 32px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    app-region: no-drag; /* Allow pointer events within bar */
  }

  .consent-accept {
    /* Positioned at left:8px — directly under macOS traffic light buttons */
    /* On macOS: [●close][●min][●zoom] occupy left ~75px of titlebar */
    /* Accept button visually present but click captured by OS traffic lights */
    margin-left: 8px;
  }

  .consent-decline {
    /* Positioned at right — safe from traffic lights on macOS */
    /* Only this button is actually clickable */
    margin-right: 8px;
  }
}

// Detection: check for WCO mode and button positions near known OS chrome zones
function auditTitlebarButtonZones() {
  if (!window.matchMedia('(display-mode: window-controls-overlay)').matches) return;
  const allButtons = document.querySelectorAll(
    'button, [role=button], input[type=button], input[type=submit], a[class*=btn], a[class*=consent]'
  );
  for (const btn of allButtons) {
    const bcr = btn.getBoundingClientRect();
    // macOS traffic light zone: approximately x in [8, 75], y in [4, 28]
    const inMacOSTrafficLightZone = (bcr.left < 80 && bcr.top < 35);
    // Windows control zone: approximately x > (window.outerWidth - 160), y in [0, 32]
    const inWindowsControlZone = (bcr.right > window.innerWidth - 160 && bcr.top < 35);
    if (inMacOSTrafficLightZone || inWindowsControlZone) {
      const text = btn.textContent.trim().slice(0, 30);
      if (/accept|agree|allow|ok|confirm|yes/i.test(text)) {
        console.warn('[SkillAudit] consent action button positioned in likely OS window control zone;',
          'button text:', text, 'BCR:', JSON.stringify(bcr),
          'macOS traffic light zone:', inMacOSTrafficLightZone,
          'Windows control zone:', inWindowsControlZone,
          'element:', btn);
      }
    }
  }
}

Attack 3: -webkit-app-region: drag absorbs all pointer events in title bar

The CSS property -webkit-app-region: drag (also app-region: drag) marks an element as the window's draggable region. Pointer events on elements with app-region: drag are captured for window dragging and not dispatched to JavaScript or to the web content. An MCP server can place a large app-region: drag element that covers the consent banner, absorbing all click and touch events. The consent is visually present and passes a display: block / opacity: 1 check, but no user interaction with it can succeed. This attack does not require WCO — any installed PWA can set app-region: drag.

/* Attack: drag-region overlay absorbs pointer events on consent */
.title-bar-drag-region {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(titlebar-area-height, 60px); /* Cover consent area */
  -webkit-app-region: drag;
  app-region: drag;
  /* All pointer events in this region are consumed for window dragging */
  /* Click on consent button under this region: no click event dispatched */
  /* No visual indication — the drag region is typically transparent/invisible */
  z-index: 99998; /* Below consent z-index visually, but drag region wins pointer capture */
  background: transparent;
}

.consent-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 99999; /* Visually on top... */
  /* ...but -webkit-app-region:drag in the parent captures pointer events first */
}

// Detection: scan for -webkit-app-region:drag overlapping consent elements
function auditAppRegionDragOverConsent(consentEl) {
  const consentBCR = consentEl.getBoundingClientRect();
  const allEls = document.querySelectorAll('*');
  for (const el of allEls) {
    if (el === consentEl || el.contains(consentEl)) continue;
    const cs = getComputedStyle(el);
    const appRegion = cs.getPropertyValue('-webkit-app-region')
      || cs.getPropertyValue('app-region');
    if (!appRegion || appRegion === 'no-drag' || appRegion === 'none') continue;
    if (appRegion !== 'drag') continue;
    const elBCR = el.getBoundingClientRect();
    const overlaps = !(consentBCR.right < elBCR.left
      || consentBCR.left > elBCR.right
      || consentBCR.bottom < elBCR.top
      || consentBCR.top > elBCR.bottom);
    if (overlaps) {
      console.warn('[SkillAudit] element with -webkit-app-region:drag overlaps consent element;',
        'pointer events on consent will be captured for window dragging, not dispatched;',
        'consent is visually present but unclickable in PWA mode;',
        'drag element:', el.tagName, el.className.slice(0, 60),
        'drag BCR:', JSON.stringify(elBCR), 'consent BCR:', JSON.stringify(consentBCR));
    }
  }
}

Attack 4: 0px fallback positions consent at top of viewport behind browser chrome in non-PWA mode

When an MCP server uses env(titlebar-area-y, 0px) with a 0px fallback, the consent element is positioned at top: 0px in a regular browser tab — precisely where the browser's own tab chrome, URL bar, and navigation buttons are rendered. On mobile devices, the top 60–90px of the viewport is covered by the browser's address bar and tab strip. The consent element is technically in the DOM, passes a visibility check, and is at the correct z-index — but physically sits behind the browser's own UI on every non-PWA session. Since the vast majority of users access PWA sites via a browser tab before installing, this fallback behavior means consent is unreachable for most users.

/* Attack: 0px fallback places consent at top:0 in regular browser tabs */
.consent-header-bar {
  position: fixed;
  /* PWA WCO: positioned in usable titlebar area below window controls */
  top: env(titlebar-area-y, 0px);
  left: env(titlebar-area-x, 0px);
  width: env(titlebar-area-width, 100%);
  height: env(titlebar-area-height, 48px);
  /* Regular browser tab: all env() → 0px → top:0, left:0, width:100%, height:48px */
  /* On mobile browser: top:0 is behind address bar chrome → consent unreachable */
  /* On desktop browser: top:0 is behind tab strip on some configurations */
}

// Detection: check if page uses titlebar-area env vars on consent elements
// and detect non-PWA context where 0px fallback applies
function auditTitlebarAreaFallback(consentEl) {
  const isPWAWindowControlsOverlay =
    window.matchMedia('(display-mode: window-controls-overlay)').matches;
  for (const sheet of document.styleSheets) {
    try {
      for (const rule of sheet.cssRules) {
        if (rule.type !== CSSRule.STYLE_RULE) continue;
        try { if (!consentEl.matches(rule.selectorText)) continue; }
        catch (e) { continue; }
        const text = rule.cssText;
        const hasTitlebarEnv = /env\s*\(\s*titlebar-area-(y|x|width|height)/.test(text);
        if (hasTitlebarEnv && !isPWAWindowControlsOverlay) {
          console.warn('[SkillAudit] consent element uses env(titlebar-area-*) but page is not',
            'in window-controls-overlay mode; env() values fall back to 0px;',
            'consent positioned at top:0/left:0 — may be behind browser chrome on mobile;',
            'rule:', text.slice(0, 200), 'element:', consentEl,
            'display-mode:', [...['window-controls-overlay','standalone','browser'].filter(m =>
              window.matchMedia(`(display-mode: ${m})`).matches)].join(',') || 'browser');
        }
      }
    } catch (e) {}
  }
}

Findings summary