MCP server CSS border-block-start security: logical top border removal, transparent spacer displacement, and writing-mode edge swap attacks

Published 2026-09-26 — SkillAudit Research

CSS border-block-start is the logical shorthand for the border at the block-start edge of an element — in writing-mode: horizontal-tb, this is the physical top border. Like other logical border properties, it accepts the standard border sub-properties: border-block-start-width, border-block-start-style, and border-block-start-color. As a shorthand it can set all three at once: border-block-start: 2px solid transparent.

The attack surface is the same as other logical properties: audits that check border-top, border-top-color, and border-top-width will miss declarations that only set the logical equivalent. In vertical writing modes, the block-start edge is not the top — it is the right or left edge, depending on writing-mode — so the same logical declaration targets a completely different physical edge than the auditor expects.

Attack findings

.consent-dialog {
  /* Host sets: border-top: 2px solid #e0e0e0; */
  border-block-start: none; /* overrides border-top in cascade */
}

/* Computed border-top: 0px (logical wins)
   getComputedStyle(el).borderTop: "" or "0px none rgb(0,0,0)"
   getComputedStyle(el).getPropertyValue('border-block-start'): "none"
   String search for "border-top" in CSS source: finds host's "2px solid #e0e0e0"
   Audit based on source text: PASS (host value found)
   Audit based on computed style: correctly detects the override */

.consent-dialog {
  height: 200px;
  overflow: hidden;
  border-block-start: 60px solid transparent;
  /* In horizontal-tb: 60px transparent top border
     Box model:
     - border-top: 60px (transparent, invisible — looks like top padding/whitespace)
     - content height: 200px - 60px = 140px available
     - Permission list: ~120px → visible
     - Acceptance clause: ~60px → pushed to 200px bottom, clipped

     Checking for non-zero border: finds 60px ✓
     Checking for visible (non-transparent) border color: PASS (transparent OK)
     Only checking border-top in a fixed-height overflow:hidden context: FAIL */

/* Logical-to-physical mapping for border-block-start */
/*
   writing-mode: horizontal-tb → top edge (block-start = top)
   writing-mode: vertical-rl   → right edge (block-start = right)
   writing-mode: vertical-lr   → left edge (block-start = left)
   writing-mode: sideways-rl   → right edge
   writing-mode: sideways-lr   → left edge
*/

.consent-dialog {
  writing-mode: vertical-rl;
  border-block-start: none; /* removes RIGHT border in vertical-rl */
}
/* Auditor checking top border: finds it intact → PASS (wrong edge) */

.consent-dialog {
  background: #ffffff;
  height: 200px;
  overflow: hidden;
  border-block-start: 20px solid #ffffff; /* exact background color */
}

/* Checks:
   border-block-start-width: 20px → non-zero → "border present" PASS
   border-block-start-style: solid → non-none → "border has style" PASS
   border-block-start-color: #ffffff → same as background → visual border: ABSENT
   Effect: 20px invisible displacement at block-start edge
   Acceptance clause pushed 20px below height clip */

Detection

function checkBorderBlockStart(el) {
  const cs = getComputedStyle(el);
  const wm = cs.writingMode || 'horizontal-tb';
  const findings = [];

  /* Read the logical property */
  const bbs = cs.getPropertyValue('border-block-start') || '';
  const bbsWidth = parseFloat(cs.getPropertyValue('border-block-start-width') || '0');
  const bbsStyle = cs.getPropertyValue('border-block-start-style') || 'none';
  const bbsColor = cs.getPropertyValue('border-block-start-color') || '';

  /* Map to physical edge */
  const physicalEdge = wm === 'vertical-rl' || wm === 'sideways-rl'
    ? 'right'
    : wm === 'vertical-lr' || wm === 'sideways-lr'
      ? 'left'
      : 'top';

  /* Check for separator removal */
  if (bbsStyle === 'none' || bbsWidth === 0) {
    /* Compare with what border-top was before logical override */
    const borderTopWidth = parseFloat(cs.borderTopWidth || '0');
    if (physicalEdge === 'top' && borderTopWidth === 0) {
      /* Logical override may have removed the separator */
      findings.push({
        severity: 'medium',
        issue: `border-block-start:none removes ${physicalEdge} border separator in ${wm} — consent section boundary removed`
      });
    }
  }

  /* Check for thick transparent border displacing content */
  if (bbsWidth > 10 && bbsStyle !== 'none') {
    const isTransparent = !bbsColor || bbsColor.includes('rgba(0, 0, 0, 0)') ||
                          bbsColor === 'transparent';
    const bgColor = cs.backgroundColor;
    const colorMatchesBg = bbsColor === bgColor;

    if (isTransparent || colorMatchesBg) {
      findings.push({
        severity: 'high',
        issue: `border-block-start:${bbsWidth}px solid ${isTransparent ? 'transparent' : 'background-color'} — invisible ${bbsWidth}px border displaces consent text in ${physicalEdge} edge`
      });
    }
  }

  return findings.length ? findings : null;
}

Remediation