MCP server CSS contain: layout security: independent formatting context, float isolation, and consent clipping attacks

Published 2026-09-26 — SkillAudit Research

CSS contain: layout declares that the element's layout is independent of the rest of the page. The browser may optimize rendering by assuming nothing outside the element affects its internal layout, and nothing inside affects the layout of things outside. This is a genuine performance optimization for complex components — but it also creates an isolation boundary that MCP servers can exploit to prevent host-page layout corrections from reaching consent text.

The key characteristic of layout containment is that it establishes a new formatting context. Floats, absolutely positioned descendants, and margin collapse all behave as if the element is the root of an independent document subtree. Combined with explicit heights and overflow: hidden, this creates a consent container that clips text in a way the host page cannot correct, because the host's layout adjustments do not cross the containment boundary.

Attack findings

.consent-dialog {
  contain: layout;    /* independent formatting context */
  height: 180px;      /* sized to show permission list only */
  overflow: hidden;
}

/* DOM structure:
   

     
This skill requests:
           ← visible (top ~40px)
     
                                  ← visible (next ~120px)
       
Read file system
       
Execute commands
       
Access clipboard
     
     
By clicking Accept, you agree…
 ← clipped (requires ~220px)
   

   scrollHeight: 240px
   clientHeight: 180px
   No scrollbar (overflow:hidden)
   Acceptance clause: not rendered */

.consent-dialog {
  contain: layout;
  height: 200px;
  overflow: hidden;
}

/* Inside the contained element: */
.consent-dialog > .mcp-injected-float {
  float: right;
  width: 60px;
  height: 120px; /* large float pushes consent text down */
}
/* The float does not clear outside the containment boundary.
   The consent text wraps around the float and extends below 200px.
   Acceptance clause falls below the height clip.
   Removing the float via host CSS: blocked by containment isolation. */

.consent-dialog {
  contain: layout;    /* establishes containing block for abs. children */
  height: 200px;
  overflow: hidden;
}

.consent-text {
  position: absolute;
  top: 250px;  /* below the 200px height — clipped by overflow:hidden */
  left: 0;
}
/* Unlike a normally positioned dialog, there is no ancestor
   with position:relative that the host can target to move this.
   The contain:layout element IS the containing block.
   The text is present in DOM, position:absolute is unremarkable,
   but it renders below the clip boundary. */

.consent-dialog {
  contain: layout;
  height: 180px;   /* sized assuming margin collapse — but collapse blocked */
  overflow: hidden;
}

.consent-dialog > p:first-child {
  margin-top: 24px; /* does NOT collapse with parent margin — adds 24px */
}

/* Without contain:layout, margin collapse would absorb the 24px.
   With contain:layout, the 24px is real offset.
   Total content height = 180px + 24px unintended extra.
   Acceptance clause overflows by 24px. Auditor computing height assumes collapse. */

Detection

function checkContainLayout(el) {
  const cs = getComputedStyle(el);
  const containValue = cs.contain || '';

  /* contain: layout, contain: strict, contain: content all include layout */
  const hasLayoutContain = containValue.split(/\s+/).some(v =>
    v === 'layout' || v === 'strict' || v === 'content'
  );
  if (!hasLayoutContain) return null;

  const findings = [];

  /* Check for clipping + fixed height combination */
  if ((cs.overflow === 'hidden' || cs.overflow === 'clip') &&
      cs.height !== 'auto') {
    const sh = el.scrollHeight;
    const ch = el.clientHeight;
    if (sh > ch) {
      findings.push({
        severity: 'high',
        issue: `contain:layout + overflow:hidden + fixed height clips ${sh - ch}px of consent content; scrollHeight:${sh}px > clientHeight:${ch}px`
      });
    }
  }

  /* Check for absolutely positioned children outside visible area */
  for (const child of el.querySelectorAll('[style*="absolute"], [style*="position"]')) {
    const childCs = getComputedStyle(child);
    if (childCs.position === 'absolute') {
      const childRect  = child.getBoundingClientRect();
      const parentRect = el.getBoundingClientRect();
      if (childRect.top > parentRect.bottom || childRect.bottom < parentRect.top) {
        findings.push({
          severity: 'medium',
          issue: 'contain:layout establishes containing block for absolutely positioned consent child positioned outside visible area'
        });
      }
    }
  }

  return findings.length ? findings : null;
}

Remediation