MCP server CSS contain-intrinsic-inline-size security

Background: CSS Containment Level 2 and content-visibility

CSS Containment Level 2 (content-visibility) allows the browser to skip layout and rendering for off-screen elements as a performance optimization. The property has three values:

• visible (default) — normal rendering, no containment benefit.
• auto — the browser skips layout/rendering when the element is off-screen. When it enters the viewport, the browser renders it normally. While off-screen, the contain-intrinsic-size value is used as a placeholder to maintain scroll position.
• hidden — the browser always skips rendering, similar to visibility: hidden but more complete: it skips layout, paint, and compositing. The element's content is invisible and inaccessible. Unlike display: none, the element still occupies space in the document (defined by contain-intrinsic-size).

The contain-intrinsic-inline-size property (and its block-axis counterpart contain-intrinsic-block-size) are the per-axis versions of contain-intrinsic-size. Setting contain-intrinsic-inline-size: 0 tells the browser the element's inline (horizontal) size placeholder is 0px.

Attack 1 — content-visibility:auto with zero inline placeholder (SA-CSS-CIIS-001)

In a horizontal-scroll consent layout (consent text displayed in a horizontally scrollable container), content-visibility: auto; contain-intrinsic-inline-size: 0 on the consent paragraph tells the browser: "when this element is outside the visible area, reserve 0px of horizontal space for it." The consent container scrolls to show the consent, but the element's placeholder is 0px wide — when the browser's intersection observer determines the element is at the viewport edge (triggering content-visibility:auto rendering), it may allocate the actual width correctly. However, if combined with overflow: hidden on the parent and the parent's layout is based on the placeholder size, the consent text never gets a non-zero inline size during the layout phase when the button is clicked.

/* Attack */
.consent-dialog {
  overflow: hidden;
  width: 100vw;
}
.consent-text {
  content-visibility: auto;
  contain-intrinsic-inline-size: 0;
  /* browser reserves 0px horizontal for consent when off-screen */
  /* horizontal scroll shows "consent" at 0px width = zero content visible */
  /* display: block; visibility: visible; opacity: 1 — all pass */
}

/* Detection */
function checkContainIntrinsicInline(consentEl) {
  const cs = getComputedStyle(consentEl);
  const cv = cs.contentVisibility;
  if (!cv || cv === 'visible') return null;

  const ciis = cs.containIntrinsicInlineSize;
  if (!ciis) return null;

  const pxVal = parseFloat(ciis);
  if (pxVal === 0 || pxVal < 10) {
    return {
      vuln: 'SA-CSS-CIIS-001',
      severity: 'high',
      detail: `content-visibility: ${cv}; contain-intrinsic-inline-size: ${ciis} — zero/minimal inline placeholder collapses consent width`
    };
  }
  return null;
}

Attack 2 — content-visibility:hidden skips rendering entirely (SA-CSS-CIIS-002)

content-visibility: hidden is stronger than auto: the browser always skips layout and rendering for the element, regardless of its position relative to the viewport. The element's content is never painted. Unlike display: none, the element still participates in document flow and occupies the space defined by contain-intrinsic-size. Unlike visibility: hidden, the element cannot receive focus and is not accessible to assistive technologies.

An MCP server sets content-visibility: hidden on the consent paragraph. The consent area appears as blank space in the dialog. The install button — in a separate element without content-visibility: hidden — is fully visible and clickable. The check: getComputedStyle(el).display returns 'block'; visibility returns 'visible'; opacity returns '1'. None of these catch the attack. Only getComputedStyle(el).contentVisibility === 'hidden' reveals it.

/* Attack */
.consent-text {
  content-visibility: hidden;
  contain-intrinsic-inline-size: 0;
  /* element exists in DOM, occupies 0px inline space */
  /* rendering completely skipped */
  /* display: 'block', visibility: 'visible', opacity: '1' — all mislead */
}

/* Detection */
function checkContentVisibility(consentEl) {
  const cv = getComputedStyle(consentEl).contentVisibility;
  if (cv === 'hidden') {
    return {
      vuln: 'SA-CSS-CIIS-002',
      severity: 'critical',
      detail: `content-visibility: hidden — consent rendering permanently skipped; element not painted`
    };
  }
  return null;
}

Attack 3 — minimal 1px inline size reflows consent into single-character column (SA-CSS-CIIS-003)

Setting contain-intrinsic-inline-size: 1px (instead of 0) passes the width > 0 check but still collapses the inline size to 1px. A consent text with a 1px inline constraint reflows its text into a single-character-wide column that may be hundreds of pixels tall. BCR.width = 1, BCR.height = very large (all consent lines stacked in a 1px-wide column). The consent is technically visible (non-zero area, in-viewport) but practically unreadable. A BCR width check that only ensures width > 0 passes; a check for width < 20 catches it.

Attack 4 — JS mousedown content-visibility:hidden injection (SA-CSS-CIIS-004)

At page load, the consent element has content-visibility: visible (or unset). At mousedown, JS sets consentEl.style.contentVisibility = 'hidden'. The browser immediately stops painting the consent element. The click event fires with the consent hidden. MutationObserver on the consent element's style attribute catches the inline style change; re-checking contentVisibility on mutation detects the attack before the click event propagates.

/* Runtime monitor */
new MutationObserver((mutations) => {
  for (const m of mutations) {
    const cs = getComputedStyle(consentEl);
    const cv = cs.contentVisibility;
    if (cv === 'hidden' || cv === 'auto') {
      const ciis = parseFloat(cs.containIntrinsicInlineSize || '0');
      if (cv === 'hidden' || ciis < 10) {
        flagTampering('SA-CSS-CIIS-004');
        installBtn.disabled = true;
      }
    }
  }
}).observe(consentEl, { attributes: true, attributeFilter: ['style', 'class'] });