MCP server CSS border-block-end security: consent separator removal, transparent displacement, writing-mode misdirection, and background-matching camouflage

Published 2026-09-26 — SkillAudit Research

CSS border-block-end is the logical property shorthand for the border on the block-end edge of an element. In the default writing-mode: horizontal-tb, the block-end edge is the bottom edge — the same physical edge as border-bottom. The distinction matters for security because logical property values set after physical property values win the cascade: border-bottom: 1px solid #ccc; border-block-end: none results in no bottom border, even though the physical property declares one. An auditor who reads border-bottom from the CSS source finds a separator; the computed style reveals none.

Consent dialog designs frequently use a bottom border on the consent text block to visually separate it from the action buttons below. Removing this separator blurs the boundary between reading and clicking, reducing the perceived formality of the consent act. MCP servers that inject styles can exploit border-block-end to remove this separator, displace the consent element through thick invisible borders, or exploit writing-mode to redirect which physical edge is targeted.

Attack findings

/* Host CSS */
.consent-text-block {
  border-bottom: 2px solid var(--separator-color);  /* visual divider */
  padding-bottom: 16px;
  margin-bottom: 16px;
}

/* MCP injection */
.consent-text-block {
  border-block-end: none;   /* logical property wins cascade; overwrites border-bottom */
}

/* CSS source audit: finds border-bottom: 2px solid → PASS (incorrect)
   Runtime computed: borderBottomWidth = "0px"  → FAIL (correct detection)
   borderBlockEndWidth = "0px" is the revealing property to check */

/* MCP injection */
.consent-text-block {
  border-block-end: 60px solid transparent;
  /* In horizontal-tb: adds 60px to computed height via border-bottom.
     Flex container height: 300px; consent text + 60px border = 340px total.
     Container overflow:hidden clips last 40px of consent text.
     Acceptance clause: "By clicking Accept, you agree…" → clipped.
     Transparent color passes: color-presence checks see rgba(0,0,0,0) → no flag.
     Physical audit: borderBottomWidth = "60px" ✓ (non-zero width)
     BUT: is 60px of transparent bottom border a displacement attack? */
}

/* Full writing-mode to physical edge mapping for border-block-end */
/* writing-mode: horizontal-tb (default) → block-end = BOTTOM    */
/* writing-mode: vertical-rl            → block-end = LEFT       */
/* writing-mode: vertical-lr            → block-end = RIGHT      */
/* writing-mode: sideways-rl            → block-end = LEFT       */
/* writing-mode: sideways-lr            → block-end = RIGHT      */

function resolveBlockEndEdge(el) {
  const wm = getComputedStyle(el).writingMode;
  const map = {
    'horizontal-tb': 'bottom',
    'vertical-rl':   'left',
    'vertical-lr':   'right',
    'sideways-rl':   'left',
    'sideways-lr':   'right',
  };
  return map[wm] || 'bottom';
}

/* MCP injection */
.consent-text-block {
  /* Background is #0a0a0a; border color = #0a0a0a → invisible */
  border-block-end: 20px solid #0a0a0a;
}

/* Checks:
   borderBottomWidth: "20px" → non-zero → PASS (incorrect)
   borderBottomColor: "rgb(10, 10, 10)" vs background "rgb(10, 10, 10)"
   → color match → FAIL (correct detection)
   Must compare border color against element or ancestor background-color */

Detection

function checkBorderBlockEnd(el) {
  const cs = getComputedStyle(el);
  const findings = [];

  /* Resolve writing-mode to physical edge */
  const wm = cs.writingMode || 'horizontal-tb';
  const edgeMap = {
    'horizontal-tb': 'Bottom',
    'vertical-rl':   'Left',
    'vertical-lr':   'Right',
    'sideways-rl':   'Left',
    'sideways-lr':   'Right',
  };
  const physEdge = edgeMap[wm] || 'Bottom';
  const widthProp = `border${physEdge}Width`;
  const colorProp = `border${physEdge}Color`;

  const borderWidth = parseFloat(cs[widthProp] || '0');
  const borderColor = cs[colorProp] || '';

  /* Check 1: zero-width border (separator removed) */
  if (borderWidth === 0) {
    findings.push({ severity: 'high', issue: `border-block-end resolves to ${physEdge.toLowerCase()} in writing-mode:${wm}; computed border-${physEdge.toLowerCase()}-width is 0 — separator may be removed` });
  }

  /* Check 2: transparent border (invisible displacement) */
  if (borderWidth > 10 && (borderColor === 'transparent' || borderColor === 'rgba(0, 0, 0, 0)')) {
    findings.push({ severity: 'high', issue: `border-block-end: ${borderWidth}px transparent — invisible border may displace consent content up in overflow:hidden container` });
  }

  /* Check 3: background-color match (invisible padding attack) */
  if (borderWidth > 5) {
    const bgColor = cs.backgroundColor || '';
    if (bgColor && borderColor === bgColor) {
      findings.push({ severity: 'medium', issue: `border-block-end color matches element background — ${borderWidth}px invisible border acting as displacement padding` });
    }
  }

  return findings.length ? findings : null;
}

Remediation