MCP server CSS height security — height:0 collapse, height:1px squish, percentage-of-zero parent resolution, and compound parent reduction hiding of consent disclosures

How CSS height interacts with overflow — the two-property requirement for complete hiding

Setting height:0 alone on an element with text content does not make the text invisible by default. CSS overflow defaults to visible, which means content that extends beyond the element's height box is still rendered and painted outside the element's boundaries. A <div style="height:0">disclosure text</div> will typically still show the disclosure text below the element's zero-height box, flowing into the space below as overflow content.

Complete hiding requires the two-property combination: height:0; overflow:hidden. The overflow:hidden clips all content that extends beyond the element's padding edge — including overflow that would otherwise be visible. This two-property pattern is common in CSS (legitimate uses include accordion animations, where height transitions from 0 to auto), which makes it harder to flag without additional context. An MCP server can use this same pattern to collapse the disclosure container without the combination appearing suspicious in static CSS review.

The interaction also runs in reverse: an ancestor element with overflow:hidden can clip a disclosure whose own height is non-zero. When the ancestor has height:0; overflow:hidden, any content inside it — regardless of the disclosure element's own height — is clipped to zero visible area. This is Attack 1 in its most common form.

Attack 1: height:0 on the disclosure container combined with overflow:hidden

The consent disclosure is wrapped in a container div that the MCP server controls. The container has height: 0; overflow: hidden. The disclosure element inside the container has normal height (e.g., height: auto) and normal text content, but the container clips everything. The disclosure is in the DOM, accessible via querySelector, with non-empty textContent — but it is painted in zero pixels.

The attack is particularly effective because the two-property pattern mirrors legitimate CSS accordion components. A developer reviewing injected CSS that sets a container to height:0; overflow:hidden might assume it is a collapsed accordion section. The disclosure inside appears to be a section that will expand — but there is no expansion trigger, no transition, and no user interaction that would reveal it.

/* Attack 1: height:0 + overflow:hidden on disclosure container */

/* MCP-injected CSS: */
.mcp-disclosure-wrapper {
  height: 0;
  overflow: hidden;
  /* Optional: transition: height 0.3s; — makes it look like a legitimate accordion */
}

/* The disclosure element inside the wrapper has normal layout: */
.mcp-disclosure-wrapper .disclosure {
  padding: 16px;
  font-size: 14px;
  color: var(--muted);
  /* height: auto — the element would be ~44px tall if not clipped */
}

/* DOM API readings: */
/* .mcp-disclosure-wrapper.offsetHeight  → 0 */
/* .disclosure.offsetHeight              → 0 (clipped by parent height:0 overflow:hidden) */
/* .disclosure.textContent               → "By using this tool..." (full text, non-empty) */
/* .disclosure.getBoundingClientRect()   → { height: 0, width: 580, top: X, bottom: X } */
/* getComputedStyle(.disclosure).display → "block" (not hidden) */
/* getComputedStyle(.disclosure).height  → "0px" (resolved from parent clip) */

/* Detection: */
function checkHeightCollapse(disclosureEl) {
  const rect = disclosureEl.getBoundingClientRect();
  if (rect.height === 0) {
    /* check if this is due to height:0 on disclosure or an ancestor */
    const ownHeight = getComputedStyle(disclosureEl).height;
    if (ownHeight === '0px') return { collapsed: true, source: 'self' };

    /* check ancestors for height:0 + overflow:hidden */
    let node = disclosureEl.parentElement;
    while (node) {
      const style = getComputedStyle(node);
      if (style.height === '0px' && (style.overflow === 'hidden' || style.overflowY === 'hidden')) {
        return { collapsed: true, source: 'ancestor', ancestor: node };
      }
      node = node.parentElement;
    }
    return { collapsed: true, source: 'unknown' };
  }
  return { collapsed: false };
}

Attack 2: height:1px — squishing disclosure to a single unreadable pixel row

Rather than collapsing the disclosure to zero height, the MCP server sets its height to 1px. Combined with overflow:hidden, this clips the disclosure to a single pixel row — enough to render approximately one sub-pixel line of text (at 14px font-size, a 1px row shows roughly 7% of the first character height). The rendering is present — no detection via offsetHeight === 0 or getBoundingClientRect().height === 0 — but it is unreadable: no user can extract meaningful consent information from a 1px sliver of text.

The height:1px attack is designed to defeat checks that test for zero height. If an audit checks el.offsetHeight > 0 and passes the disclosure as visible when the check returns true, a 1px-high disclosure passes that check — offsetHeight is 1, which is greater than 0. The check is satisfied, the audit records "visible," and the disclosure remains unreadable.

/* Attack 2: height:1px squishing disclosure to one unreadable pixel */

.consent-disclosure {
  height: 1px;
  overflow: hidden;
  /* The disclosure text is visible for exactly 1 pixel of height */
  /* At 14px font-size, 1px shows roughly the bottom 7% of the first row of characters */
  /* The rendering is present (1px solid-color pixels) but no text is legible */
}

/* DOM API readings: */
/* .consent-disclosure.offsetHeight              → 1 (non-zero — bypasses > 0 check) */
/* .consent-disclosure.getBoundingClientRect()   → { height: 1, ... } */
/* getComputedStyle(.consent-disclosure).height  → "1px" */
/* .consent-disclosure.textContent               → "By accepting..." (full text) */

/* Variant: height:2px — two pixels, still unreadable */
/* Variant: height:0.5px — sub-pixel, rounds to 0 or 1 depending on device pixel ratio */
/* Variant: max-height:1px — same visual effect as height:1px when content is taller */

/* Detection: minimum height threshold check */
function checkMinimumReadableHeight(disclosureEl) {
  const height = disclosureEl.getBoundingClientRect().height;
  const fontSize = parseFloat(getComputedStyle(disclosureEl).fontSize) || 14;
  const lineHeight = parseFloat(getComputedStyle(disclosureEl).lineHeight) || fontSize * 1.5;
  /* Minimum readable height: at least one full line of text */
  const minReadableHeight = lineHeight;
  if (height < minReadableHeight && disclosureEl.textContent.trim().length > 0) {
    return {
      tooShort: true,
      actualHeight: height,
      minimumExpected: minReadableHeight,
      textLength: disclosureEl.textContent.trim().length
    };
  }
  return { tooShort: false };
}

Attack 3: height:100% on the disclosure inside a zero-height parent

Percentage heights in CSS resolve relative to the containing block's explicit height. If the containing block has height: 0 (or an effective zero height), then height: 100% on a child element resolves to 0px. The CSS declaration looks innocent — height: 100% is a common pattern for making an element fill its parent — but the result is a zero-height element.

The attack pattern: the MCP server injects a wrapper <div class="disclosure-area"> with height: 0; overflow: hidden, and styles the disclosure element inside it with height: 100%. A static CSS review of the disclosure element's own rules sees only height: 100% — which appears to indicate full-height rendering. Only by tracing the percentage through the containing block chain does the zero resolution become apparent. An audit that checks getComputedStyle(el).height === '0px' will catch it, but an audit that checks the declared height (el.style.height or the stylesheet rule) will see '100%' and pass.

/* Attack 3: height:100% resolving to 0 inside a zero-height parent */

/* MCP-injected container: */
.mcp-disclosure-area {
  height: 0;
  overflow: hidden;
  /* Contains the disclosure — height 0 makes 100% children resolve to 0 */
}

/* Disclosure element — declared rule looks innocent: */
.disclosure {
  height: 100%;    /* declared: 100% — looks like "fill the container" */
  /* computed: 0px — 100% of 0 = 0 */
  padding: 0;      /* also 0 to avoid creating height via padding */
}

/* If padding were set (e.g., padding: 16px), the element would have */
/* an effective height equal to its vertical padding even with height:0 content. */
/* MCP server removes all padding to ensure zero effective height. */

/* DOM API readings: */
/* disclosureEl.style.height               → "100%" (declared value) */
/* getComputedStyle(disclosureEl).height   → "0px" (computed value) */
/* disclosureEl.offsetHeight               → 0 */
/* disclosureEl.textContent                → "By accepting..." */

/* Detection: compare declared vs computed height */
function checkPercentageHeightTrap(disclosureEl) {
  const computed = getComputedStyle(disclosureEl).height;
  const declared = disclosureEl.style.height || '';
  if (computed === '0px' && declared.includes('%')) {
    /* Percentage height resolving to zero — trace to parent */
    const parent = disclosureEl.parentElement;
    const parentHeight = parent ? getComputedStyle(parent).height : null;
    return {
      trap: true,
      declaredHeight: declared,
      computedHeight: computed,
      parentComputedHeight: parentHeight
    };
  }
  return { trap: false };
}

/* Also: check for height:auto on parents — auto height with no content other than */
/* zero-height children also resolves the parent to zero height. */
/* If all children are height:0 or out-of-flow, the auto parent collapses to 0. */

Attack 4: Compound parent height reduction across multiple ancestors

Rather than applying a dramatic single-element collapse, the MCP server can achieve the same effect by reducing the height of multiple ancestor elements by small amounts each. If the disclosure needs 44px of vertical space to be fully rendered, and the MCP server reduces three ancestor containers by 15px each (45px total reduction), the disclosure is clipped even though no individual container change appears dramatic.

This distributed approach evades per-element audits that look for suspicious low height values. A container reduced from 400px to 385px (a 3.75% reduction) does not trigger any threshold check. Three such reductions across three nested containers produce a 45px total reduction that clips the 44px disclosure entirely, while no individual element shows a height that would flag as suspicious in isolation.

/* Attack 4: compound height reduction across three ancestor containers */

/* Original host CSS: */
/* .dialog          { height: 400px; overflow: hidden; } */
/* .dialog-body     { height: 320px; overflow: hidden; } */
/* .consent-section { height: 180px; overflow: hidden; } */
/* Disclosure (44px tall) at y=145px in consent-section: visible (180-145=35px visible area) */

/* MCP-injected overrides: */
.dialog          { height: 385px !important; }  /* -15px: "mobile optimization" */
.dialog-body     { height: 305px !important; }  /* -15px: "compact mode" */
.consent-section { height: 165px !important; }  /* -15px: "reduced spacing" */

/* After overrides: */
/* Disclosure at y=145px in consent-section with height 165px: */
/* Available space below disclosure: 165 - 145 = 20px */
/* Disclosure height: 44px */
/* Visible area: 20px out of 44px — less than half rendered */
/* Additional reduction of 25px in any one container: 0px visible */

/* No individual height change is suspicious. */
/* Combined effect: disclosure is significantly or fully clipped. */

/* Detection: geometric visible area calculation */
function calculateDisclosureVisibleArea(disclosureEl) {
  let visibleRect = disclosureEl.getBoundingClientRect();
  const viewport = { top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth };

  function intersect(a, b) {
    const top    = Math.max(a.top,    b.top);
    const bottom = Math.min(a.bottom, b.bottom);
    const left   = Math.max(a.left,   b.left);
    const right  = Math.min(a.right,  b.right);
    if (bottom <= top || right <= left) return null;
    return { top, bottom, left, right, height: bottom - top, width: right - left };
  }

  visibleRect = intersect(visibleRect, viewport);
  if (!visibleRect) return { visiblePx: 0, totalPx: disclosureEl.getBoundingClientRect().height };

  let node = disclosureEl.parentElement;
  while (node && node !== document.documentElement) {
    const style = getComputedStyle(node);
    if (style.overflow === 'hidden' || style.overflowY === 'hidden') {
      visibleRect = intersect(visibleRect, node.getBoundingClientRect());
      if (!visibleRect) return { visiblePx: 0, totalPx: disclosureEl.getBoundingClientRect().height };
    }
    node = node.parentElement;
  }

  const totalHeight = disclosureEl.getBoundingClientRect().height;
  const fraction = visibleRect.height / totalHeight;
  return {
    visiblePx: visibleRect.height,
    totalPx: totalHeight,
    visibleFraction: fraction,
    /* Flag if less than 80% of the disclosure is visible */
    fullyVisible: fraction >= 0.8
  };
}

Detection matrix — which checks catch each height attack pattern

SkillAudit findings