CSS Rendering Pipeline Architecture Attacks on MCP Consent

Why standard property audits fail these four families

Most MCP consent audits operate at the element property level: they call getComputedStyle(consentEl) and assert that display !== 'none', visibility !== 'hidden', opacity > 0, and that the element is not positioned entirely outside the viewport. This approach catches the majority of naïve consent-hiding attempts — setting display:none, using opacity:0, moving with position:absolute;left:-9999px.

The four families documented in this post do not modify any of those properties on the consent element itself. Instead they exploit structures upstream of the consent element in the rendering pipeline:

• writing-mode changes the direction of the block formatting context, causing text to render as vertical characters rotated 90° — physically unreadable, but with identical computed text properties
• multi-column layout distributes inline content into column boxes that extend horizontally beyond the viewport; the DOM text node is intact, but the text is rendered in off-screen columns
• content-visibility gates whether the element participates in the render tree at all; content-visibility:hidden removes the element from painting while display:block and visibility:visible remain in the accessibility API
• backdrop-filter operates on the backdrop rendering layer behind the element, not on the element’s own pixels; every property audit of the consent element passes, but the rendered result is an unreadable washed-out blur applied to the backdrop

/* SA-CSS-WMD-001: vertical text, unreadable in horizontal viewport */
.consent-text {
  writing-mode: vertical-rl; /* or vertical-lr, sideways-lr */
  /* Glyphs stacked vertically, reading top-to-bottom.
     In a fixed-height container, most characters rendered below fold.
     getComputedStyle().writingMode === 'vertical-rl' → CRITICAL */
}

/* SA-CSS-WMD-002: RTL + large text-indent pushes text off-screen */
.consent-text {
  direction: rtl;
  text-indent: 9999px; /* from right edge → 9999px left of container right edge */
  overflow: hidden;
  /* getComputedStyle().direction === 'rtl'
     AND parseFloat(textIndent) > viewport_width → CRITICAL */
}

/* SA-CSS-WMD-004: bidi-override renders string reversed */
.consent-text {
  unicode-bidi: bidi-override;
  direction: rtl;
  /* "By clicking Allow..." → "...wallA gnikcilc yB"
     Human cannot decode at reading speed; passes spell-check heuristics
     getComputedStyle().unicodeBidi === 'bidi-override' → HIGH */
}

Detection for writing-mode attacks requires checking three computed properties: writingMode (flag any non-horizontal-tb value), direction combined with an unusually large textIndent, and unicodeBidi for override values. See SA-CSS-WMD full finding catalogue for detection thresholds and browser support notes.

/* SA-CSS-MCL-001: micro-columns — all glyphs split across 1px-wide columns */
.consent-text {
  columns: 1px;       /* ~400 columns in 400px container */
  overflow: hidden;   /* clips columns 2-400 */
  /* Visible: 1px slice of first glyph.
     Detection: getComputedStyle().columnWidth parsed < 20px → CRITICAL */
}

/* SA-CSS-MCL-002: huge column-gap pushes second+ columns off-screen */
.consent-text {
  column-width: 100px;
  column-gap: 10000px;
  overflow: hidden;
  /* Column 2 at 10100px, column 3 at 20200px.
     Only first 100px (≈3-4 words) visible.
     Detection: getComputedStyle().columnGap > 500px → CRITICAL */
}

/* SA-CSS-MCL-003: 999 columns → one word per column, all but first clipped */
.consent-text {
  column-count: 999;
  overflow: hidden;
  /* Each column ≈ containerWidth/999 ≈ sub-pixel.
     Detection: getComputedStyle().columnCount > 50 with overflow:hidden → CRITICAL */
}

For complete attack signatures and detection algorithms across all four SA-CSS-MCL variants, see the SA-CSS-MCL finding page.

/* SA-CSS-CVS-001: content-visibility:hidden — rendered as blank, passes all property audits */
.consent-text {
  content-visibility: hidden;
  /* Render tree: element absent from paint output.
     getComputedStyle().display → 'block' ✓ (audit passes)
     getComputedStyle().visibility → 'visible' ✓ (audit passes)
     Rendered output: blank.
     Detection: getComputedStyle().contentVisibility === 'hidden' → CRITICAL */
}

/* SA-CSS-CVS-002: content-visibility:auto + off-screen placement */
.consent-wrapper {
  position: absolute;
  top: 999999px; /* never scrolled to */
}
.consent-text {
  content-visibility: auto;
  /* Browser never renders; 'auto' allows skip when not near viewport.
     Combine with negative-margin to keep near-viewport position in DOM
     while the contain:size collapses intrinsic size.
     Detection: contentVisibility !== 'visible' AND scrollHeight === 0 → HIGH */
}

/* SA-CSS-CVS-003: contain:strict — size containment collapses intrinsic dimensions */
.consent-text {
  contain: strict; /* implies size + layout + style + paint */
  /* el.scrollHeight → 0; el.offsetHeight → 0 even with text content.
     Size information blocked at containment boundary.
     Detection: contain includes 'size' AND scrollHeight < 2 → HIGH */
}

All four SA-CSS-CVS patterns are documented in full on the SA-CSS-CVS finding page, including the intersection with the Web Animations API and how animating content-visibility can create a brief visible window that satisfies human review but expires before the commit action.

/* SA-CSS-BDF-001: sibling inverts backdrop → text-coloured backdrop = invisible text */
.consent-wrapper {
  position: relative;
}
.backdrop-attacker {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: invert(1);
  /* invert(1): white page bg → black; dark consent text → dark on dark = invisible.
     No property of .consent-text is modified.
     Detection: check siblings/stacking context for backdrop-filter → CRITICAL */
}
.consent-text {
  position: relative;
  z-index: 1;
  color: #111; /* unchanged; audit passes */
}

/* SA-CSS-BDF-002: backdrop-filter:brightness(100) burns backdrop to white */
.backdrop-attacker {
  backdrop-filter: brightness(100);
  /* backdrop → white; white consent text → white on white.
     Dark text: still visible at 100×; use 0.01 for dark-on-dark.
     Detection: backdrop-filter includes brightness() with extreme value → HIGH */
}

/* SA-CSS-BDF-003: blur renders text as unreadable smear */
.backdrop-attacker {
  backdrop-filter: blur(20px);
  /* backdrop blurred 20px; text rendered over blurred region is illegible.
     Not invisible — illegible. Passes pixel-presence checks, fails readability.
     Detection: backdrop-filter includes blur() with value > 3px → HIGH */
}

The full SA-CSS-BDF catalogue — including the opacity(0.03) and contrast(0) variants, and the interaction with stacking contexts that scope backdrop effects — is on the SA-CSS-BDF finding page.

Unified rendering-architecture detector

Because each of the four families operates on a different architectural layer, no single computed-property check catches all four. The unified detector runs a targeted check for each family:

/**
 * Unified detector for CSS rendering-architecture consent attacks.
 * Covers SA-CSS-WMD, SA-CSS-MCL, SA-CSS-CVS, and SA-CSS-BDF finding families.
 * Returns an array of {id, severity, detail} findings.
 */
function detectRenderingArchitectureAttacks(consentEl) {
  const findings = [];
  const cs = getComputedStyle(consentEl);

  /* ── SA-CSS-WMD: writing-mode / direction / unicode-bidi ── */
  if (cs.writingMode && cs.writingMode !== 'horizontal-tb') {
    findings.push({
      id: 'SA-CSS-WMD-001',
      severity: 'CRITICAL',
      detail: `writing-mode:${cs.writingMode} rotates block flow axis — text unreadable`
    });
  }
  if (cs.direction === 'rtl') {
    const indent = parseFloat(cs.textIndent) || 0;
    if (Math.abs(indent) > 200) {
      findings.push({
        id: 'SA-CSS-WMD-002',
        severity: 'CRITICAL',
        detail: `direction:rtl + text-indent:${cs.textIndent} displaces text off-screen`
      });
    }
  }
  if (cs.unicodeBidi === 'bidi-override') {
    findings.push({
      id: 'SA-CSS-WMD-004',
      severity: 'HIGH',
      detail: 'unicode-bidi:bidi-override reverses glyph order — text unreadable'
    });
  }

  /* ── SA-CSS-MCL: multi-column layout ── */
  const colWidth = parseFloat(cs.columnWidth);
  if (!isNaN(colWidth) && colWidth < 20) {
    findings.push({
      id: 'SA-CSS-MCL-001',
      severity: 'CRITICAL',
      detail: `column-width:${cs.columnWidth} — glyphs split across micro-columns, all clipped`
    });
  }
  const colGap = parseFloat(cs.columnGap);
  if (!isNaN(colGap) && colGap > 500) {
    findings.push({
      id: 'SA-CSS-MCL-002',
      severity: 'CRITICAL',
      detail: `column-gap:${cs.columnGap} — all columns beyond first pushed off-screen`
    });
  }
  const colCount = parseInt(cs.columnCount);
  if (!isNaN(colCount) && colCount > 5 && cs.overflow === 'hidden') {
    findings.push({
      id: 'SA-CSS-MCL-003',
      severity: colCount > 50 ? 'CRITICAL' : 'HIGH',
      detail: `column-count:${cs.columnCount} with overflow:hidden — most words in off-screen columns`
    });
  }

  /* ── SA-CSS-CVS: content-visibility / contain ── */
  if (cs.contentVisibility === 'hidden') {
    findings.push({
      id: 'SA-CSS-CVS-001',
      severity: 'CRITICAL',
      detail: 'content-visibility:hidden removes element from paint tree; display:block in CSSOM (false negative)'
    });
  }
  if (cs.contentVisibility === 'auto' && consentEl.scrollHeight < 2) {
    findings.push({
      id: 'SA-CSS-CVS-002',
      severity: 'HIGH',
      detail: 'content-visibility:auto + scrollHeight≈0 — element may never be rendered'
    });
  }
  const contain = (cs.contain || '').split(' ');
  if ((contain.includes('size') || contain.includes('strict')) &&
      consentEl.scrollHeight < 2) {
    findings.push({
      id: 'SA-CSS-CVS-003',
      severity: 'HIGH',
      detail: `contain:${cs.contain} collapses intrinsic size — content not measurable`
    });
  }

  /* ── SA-CSS-BDF: backdrop-filter on stacking context siblings ── */
  const parent = consentEl.parentElement;
  if (parent) {
    const siblings = Array.from(parent.children).filter(c => c !== consentEl);
    for (const sib of siblings) {
      const sibCs = getComputedStyle(sib);
      const bf = sibCs.backdropFilter || sibCs.webkitBackdropFilter || '';
      if (bf && bf !== 'none') {
        // Check for dangerous filter functions
        if (/invert\([^)]*[1-9]/.test(bf)) {
          findings.push({ id: 'SA-CSS-BDF-001', severity: 'CRITICAL',
            detail: `sibling backdrop-filter:invert() inverts backdrop behind consent text` });
        } else if (/blur\([^)]*[5-9]|blur\([^)]*[0-9]{2}/.test(bf)) {
          findings.push({ id: 'SA-CSS-BDF-003', severity: 'HIGH',
            detail: `sibling backdrop-filter:blur(>5px) renders backdrop illegible behind consent` });
        } else if (/brightness\([^)]*(?:0\.[0-9]{2}|[5-9][0-9])/.test(bf)) {
          findings.push({ id: 'SA-CSS-BDF-002', severity: 'HIGH',
            detail: `sibling backdrop-filter:brightness() extreme value makes backdrop unreadable` });
        } else if (bf !== 'none') {
          findings.push({ id: 'SA-CSS-BDF-000', severity: 'MEDIUM',
            detail: `sibling backdrop-filter:${bf} — manual review required` });
        }
      }
    }
  }

  return findings;
}

Summary table and related research

All four families share the same evasion structure: the consent element itself passes every standard property check. The attack happens outside the element’s own computed style — in the containing block’s layout axis, in the column distribution layer, in the render-tree participation gate, or in the GPU compositing layer behind the element. Catching these attacks requires targeted checks for each property that controls the architectural behaviour, not just a generic computed-style sweep.

If you’re building or reviewing an MCP server that presents consent dialogs, run SkillAudit’s automated scanner to get a full SA-CSS-WMD, SA-CSS-MCL, SA-CSS-CVS, and SA-CSS-BDF report in under 60 seconds.

Related research

• SA-CSS-WMD: CSS writing-mode and direction consent attack catalogue
• SA-CSS-MCL: CSS multi-column layout consent attack catalogue
• SA-CSS-CVS: CSS content-visibility and containment consent attack catalogue
• SA-CSS-BDF: CSS backdrop-filter consent attack catalogue
• CSS Layout Displacement Attacks on MCP Consent: Grid, Flex, and Table
• CSS Timing Attack Synthesis: when consent is shown but not long enough to read
• All SkillAudit security research