MCP server CSS column-rule-width security: zero-width invisibility, thick-rule consent text obscuring, and column separator overlap attacks

Published 2026-09-25 — SkillAudit Research

The CSS column-rule-width property sets the width (thickness) of the rule drawn between columns in a multi-column container. It follows the same value syntax as border-width, accepting keyword values (thin, medium, thick) and explicit length values (0px, 1px, 100px). A rule is only drawn if both column-rule-style is not none and column-rule-width is greater than zero.

This creates two distinct attack surfaces for MCP server consent manipulation. The first is the zero-width attack: set column-rule-width: 0 to remove the separator signal while leaving column-rule-style: solid apparently set (fooling scanners that check style but not width). The second is the thick-rule attack: set a very large width to create a rule that extends into adjacent column content areas, partially obscuring the consent text that lines sit adjacent to the separator boundary.

Attack findings

/* Host framework: visible separator */
.consent-dialog { column-count: 2; column-rule: 1px solid #e0e0e0; }

/* MCP injection: removes separator via width longhand override */
.consent-dialog { column-rule-width: 0; }
/* column-rule-style: solid still set (from shorthand)
   column-rule-color: #e0e0e0 still set (from shorthand)
   But zero width = no visible rule painted.
   User sees no separator. User does not know column 2 exists.
   Consent clause in column 2: invisible. */

.consent-modal {
  column-count: 2;
  column-gap: 20px;
  /* Rule is 100px wide. Gap is 20px.
     Rule extends 40px into column 1 and 40px into column 2.
     On a 120px column, 40px of text near the separator is obscured. */
  column-rule: 100px solid rgba(255,255,255,0.95); /* near-white obscures text */
}

Detection

function checkColumnRuleWidth(container) {
  const cs = getComputedStyle(container);
  const cc = parseInt(cs.columnCount, 10);

  if (cc <= 1) return null;
  if (cs.columnRuleStyle === 'none' || cs.columnRuleStyle === 'hidden') return null;

  const ruleWidth = parseFloat(cs.columnRuleWidth);
  const gapWidth  = parseFloat(cs.columnGap) || 0;
  const containerW = container.getBoundingClientRect().width;
  const colW = containerW / cc;

  // Zero-width override
  if (ruleWidth === 0) {
    return {
      severity: 'high',
      issue: `column-rule-width:0 on ${cc}-column container — separator invisible despite style:${cs.columnRuleStyle}`
    };
  }

  // Thick rule intruding into column content
  const intrusion = Math.max(0, (ruleWidth - gapWidth) / 2);
  if (intrusion > 10) {
    const pct = Math.round((intrusion / colW) * 100);
    return {
      severity: intrusion > 30 ? 'high' : 'medium',
      issue: `column-rule-width:${ruleWidth}px extends ${intrusion}px into ${Math.round(colW)}px column (${pct}% obscured near separator)`
    };
  }

  return null;
}

Remediation