MCP server CSS mask security: transparent gradient mask, SVG mask black fill, mask-position targeting, and mask-size collapse on consent elements

Published 2026-09-26 — SkillAudit Research

CSS masking composites a mask image over an element to selectively hide portions of its rendering. The mask acts as an alpha channel: where the mask image has high luminance or high alpha (depending on mask-mode), the element is revealed; where the mask image has low luminance or low alpha, the element is hidden. The mask shorthand sets mask-image, mask-position, mask-size, mask-repeat, mask-origin, and mask-clip in one declaration.

For consent element attacks, CSS masks are effective because they operate at the compositing layer — after the element renders its own content — and are easily confused with legitimate uses in visual design (fading edges, circular reveal effects, scroll-based content transitions). An element with a mask set to all-transparent renders nothing to the screen while having a fully visible DOM state: the element exists, is not display:none, has non-zero dimensions, is not visibility:hidden, and has non-zero opacity. Standard DOM-state audits pass entirely.

Attack findings

.consent-text {
  /* All standard visibility checks pass: */
  display: block;
  visibility: visible;
  opacity: 1;
  color: #333;

  /* But CSS mask makes the entire element invisible: */
  mask-image: linear-gradient(transparent, transparent);
  /* Both gradient stops are transparent → all mask pixels have alpha=0
     → element composited through zero-alpha mask → renders nothing */
}

/* getComputedStyle(el).opacity:     "1"      → PASS (incorrect)
   getComputedStyle(el).visibility:  "visible" → PASS (incorrect)
   getComputedStyle(el).maskImage:   "linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0))"
                                               → ← ATTACK: all-transparent mask */

<!-- Hidden SVG mask definition -->
<svg width="0" height="0" style="position:absolute">
  <defs>
    <mask id="injected-mask">
      <!-- Black fill: black luminance = 0 → hides masked element
           (counterintuitive: black HIDES in SVG mask semantics) -->
      <rect width="100%" height="100%" fill="black"/>
    </mask>
  </defs>
</svg>

.consent-text {
  mask-image: url(#injected-mask);
}

<!-- SVG mask semantics: mask pixel luminance 0 (black) → hides content
  HTML mask semantics: alpha=1 (white/opaque) → reveals content
  Confusion: auditor reads "fill:black" and expects opaque/visible
  Reality: black mask = 0 luminance = everything hidden -->

.consent-dialog {
  /* Mask: left half white (reveal), right half transparent (hide) */
  mask-image: linear-gradient(to right, white 50%, transparent 50%);
  /* mask-position shifts so the TRANSPARENT half aligns with consent text */
  mask-position: -200px 0;
  /* Net effect: consent text region is under transparent half → hidden
     Non-consent UI is outside mask coverage → visible */
}

/* Audit: mask-image has a 'white' region → assumes visibility → PASS (incorrect)
   mask-position evaluation required to determine which region covers consent text */

.consent-text {
  mask-image: linear-gradient(white, white);  /* white = reveal */
  mask-size: 0;                               /* zero-size mask → element invisible */
}

/* mask-image check: white gradient → would reveal element
   mask-size check: 0px → zero-size mask → element invisible
   Auditors checking only mask-image find a "good" (white) gradient
   Only checking mask-size reveals the collapse attack */

Detection

function checkCssMask(el) {
  const cs = getComputedStyle(el);
  const maskImage = cs.maskImage || cs.webkitMaskImage || '';
  const maskSize  = cs.maskSize  || cs.webkitMaskSize  || '';
  const findings  = [];

  if (!maskImage || maskImage === 'none') return null;

  /* Check 1: all-transparent gradient mask */
  const isAllTransparent =
    /linear-gradient\s*\([^)]*\btransparent\b[^)]*,\s*transparent/.test(maskImage) ||
    /rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/.test(maskImage) &&
    !maskImage.replace(/rgba\(0,0,0,0\)/g, '').match(/[^,\s()]/);

  if (isAllTransparent) {
    findings.push({
      severity: 'critical', el,
      issue: `CSS mask-image with all-transparent gradient: ${maskImage} — entire element invisible`
    });
  }

  /* Check 2: SVG mask reference — flag for manual review */
  if (/url\(/.test(maskImage)) {
    findings.push({
      severity: 'high', el,
      issue: `CSS mask-image references SVG/URL mask: ${maskImage} — inspect SVG mask fill for black (luminance=0=hide) vs white (luminance=1=reveal)`
    });
  }

  /* Check 3: zero mask-size */
  if (/^0(px)?(\s+0(px)?)?$/.test(maskSize.trim())) {
    findings.push({
      severity: 'medium', el,
      issue: `CSS mask-size: ${maskSize} — zero-size mask collapses coverage; element invisible despite mask-image`
    });
  }

  return findings.length ? findings : null;
}

Remediation