MCP server CSS overflow-clip-margin-block-start security: top-edge consent clipping, authorization-framing removal, and writing-mode physical edge attacks

Published 2026-09-25 — SkillAudit Research

The CSS overflow-clip-margin-block-start property is one of four individual longhands that control per-edge clip extensions when overflow: clip is applied. It governs the block-start edge only — in standard horizontal top-to-bottom writing mode (writing-mode: horizontal-tb), the block-start direction is upward, which means block-start is the physical top. This property has a complementary partner in overflow-clip-margin-block-end and is part of the same four-edge set as the inline-start and inline-end longhands.

The block-start attack targets a structurally different portion of consent text than the inline-axis attacks. Rather than removing words within lines, it removes the first lines of a consent dialog entirely. In practice, these opening lines are the authorization framing sentences: "By proceeding, you grant this MCP server access to the following resources." The permission list that follows those sentences may remain perfectly visible — users see what they are granting but not the clause establishing that they are granting it at all.

Attack findings

.consent-dialog {
  overflow: clip;
  /* Three edges get generous clip extension */
  overflow-clip-margin-block-end:    24px;
  overflow-clip-margin-inline-start: 24px;
  overflow-clip-margin-inline-end:   24px;
  /* Block-start is zero: top edge clips hard */
  overflow-clip-margin-block-start:  0;
}
.consent-framing {
  /* Authorization sentence pushed above zero-margin clip boundary */
  margin-block-start: -28px; /* 28px above padding box top = clipped */
}
/* Shorthand audit sees no overflow-clip-margin shorthand set.
   Only the four longhands are present, avoiding shorthand-based checks. */

.consent-dialog {
  writing-mode: vertical-rl;
  overflow: clip;
  overflow-clip-margin-block-start: 0;   /* clips LEFT edge in vertical-rl */
  overflow-clip-margin-block-end:   20px; /* clips RIGHT edge — generous */
}
/* In vertical-rl: block runs left→right.
   Block-start = LEFT. Block-end = RIGHT.
   Zero block-start clips the leftmost content column (first text block).
   Auditor resolving this as "top-edge clip" misses the actual physical target. */

function getPhysicalBlockStartEdge(el) {
  const wm = getComputedStyle(el).writingMode;
  if (wm === 'horizontal-tb')  return 'top';
  if (wm === 'vertical-rl')    return 'left';
  if (wm === 'vertical-lr')    return 'left';
  if (wm === 'sideways-rl')    return 'left';
  if (wm === 'sideways-lr')    return 'right';
  return 'top'; // fallback
}

Detection

function checkOverflowClipMarginBlockStart(el) {
  const cs = getComputedStyle(el);
  if (cs.overflow !== 'clip' && cs.overflowX !== 'clip' && cs.overflowY !== 'clip') {
    return null;
  }

  const marginBS = parseFloat(cs.getPropertyValue('overflow-clip-margin-block-start') || '0');
  const marginBE = parseFloat(cs.getPropertyValue('overflow-clip-margin-block-end')   || '0');
  const marginIS = parseFloat(cs.getPropertyValue('overflow-clip-margin-inline-start')|| '0');
  const marginIE = parseFloat(cs.getPropertyValue('overflow-clip-margin-inline-end')  || '0');

  const findings = [];

  if (marginBS === 0 && (marginBE > 0 || marginIS > 0 || marginIE > 0)) {
    const wm = cs.writingMode || 'horizontal-tb';
    let physicalEdge = 'top';
    if (wm === 'vertical-rl' || wm === 'vertical-lr' || wm === 'sideways-rl') physicalEdge = 'left';
    if (wm === 'sideways-lr') physicalEdge = 'right';

    findings.push({
      severity: 'high',
      issue: `overflow-clip-margin-block-start:0 while other edges have margins — asymmetric ${physicalEdge} edge clip removes authorization framing content at block-start`
    });
  }

  return findings.length ? findings : null;
}

Remediation