MCP server CSS fill-opacity security: SVG consent text invisible fill via opacity zero, sub-threshold bypass, CSS vs attribute override, and stroke-only backup

Published 2026-09-26 — SkillAudit Research

SVG's rendering model separates fill color from fill alpha. The fill property defines the paint server (a color, gradient, or pattern). The fill-opacity property defines how opaque that paint is when composited. They are independent properties. An SVG element can have fill: #333 (a dark color) with fill-opacity: 0 (fully transparent alpha) — the fill color appears to exist when auditing the fill property, but nothing is rendered.

This is distinct from fill: transparent, which explicitly sets the fill paint server to a transparent color, and from fill: rgba(0,0,0,0), which encodes zero alpha into the color value itself. An auditor that checks the fill computed value for one of these patterns will find rgb(51, 51, 51) (dark gray) and report the fill as visible — without checking whether fill-opacity has been separately zeroed out.

Attack findings

<text style="
  fill: #2d2d2d;           /* non-transparent fill color */
  fill-opacity: 0;         /* ← zero fill alpha — NOT encoded in fill color */
  stroke: none;            /* no stroke backup */
">
  By clicking Accept, you agree to the above terms.
</text>

<!-- getComputedStyle(el).fill:        "rgb(45, 45, 45)"  → non-transparent → PASS (incorrect)
  getComputedStyle(el).fillOpacity: "0"              → zero → ← MISSED
  getBoundingClientRect(): positive rect             → text exists → PASS (incorrect)
  textContent: non-empty                             → content present → PASS (incorrect)
  Rendered pixels: 0 -->

<text style="
  fill: #000;
  fill-opacity: 0.01;     /* 1% alpha: non-zero → passes >0 check */
  stroke: none;
">
  By clicking Accept, you agree to the above terms.
</text>

<!-- fillOpacity: 0.01 → > 0 → PASS (incorrect)
  Effective color: rgba(0,0,0,0.01)
  On #fff background: contrast ratio ≈ 1.004 : 1
  WCAG 1.4.3 minimum (normal text): 4.5 : 1 — fails by a factor of 450x
  Visual result: imperceptibly faint gray on white — effectively invisible -->

<text style="
  fill: #333;
  fill-opacity: 0;          /* fill invisible */
  stroke: #333;
  stroke-opacity: 0.5;      /* 50% opacity — passes >0 check */
  stroke-width: 0.3;        /* 0.3px — sub-pixel hairline */
">
  By clicking Accept, you agree to the above terms.
</text>

<!-- fillOpacity: 0   → fill invisible (flagged by fill-opacity check)
  strokeOpacity: 0.5 → non-zero → fallback check: "visible via stroke"
  strokeWidth: 0.3px → non-zero → fallback check: "stroke has width"
  Combined: stroke renders at 50% opacity, 0.3px wide
  Visual result: sub-pixel hairline outlines — technically present, effectively illegible -->

<!-- HTML: attribute shows fill-opacity = 1 -->
<text fill-opacity="1">
  By clicking Accept, you agree to the above terms.
</text>

<!-- Stylesheet: CSS overrides attribute -->
.consent-dialog text {
  fill-opacity: 0;          /* overrides attribute via CSS cascade */
}

<!-- el.getAttribute('fill-opacity'):   "1"  → visible → PASS (incorrect)
  getComputedStyle(el).fillOpacity: "0"  → invisible → ATTACK DETECTED
  CSS cascade: author stylesheet > presentation attribute
  Auditors using getAttribute miss CSS-set fill-opacity -->

Detection

function checkFillOpacity(svgRoot) {
  const textEls = svgRoot.querySelectorAll('text, tspan');
  const findings = [];

  for (const el of textEls) {
    if (!el.textContent.trim()) continue;

    const cs = getComputedStyle(el);
    /* Use getComputedStyle — not getAttribute — to catch CSS cascade overrides */
    const fillOpacity   = parseFloat(cs.fillOpacity   || '1');
    const strokeOpacity = parseFloat(cs.strokeOpacity || '1');
    const strokeWidth   = parseFloat(cs.strokeWidth   || '0');

    /* Check 1: fill-opacity exactly 0 */
    if (fillOpacity === 0) {
      /* Is there a visible stroke backup? */
      const strokeVisible = strokeWidth >= 0.5 && strokeOpacity >= 0.3;
      findings.push({
        severity: strokeVisible ? 'medium' : 'high',
        el,
        issue: `SVG text: fill-opacity:0 — fill channel invisible`
             + (strokeVisible
               ? `; stroke present at width:${strokeWidth}px opacity:${strokeOpacity} — check for legibility`
               : `; no readable stroke backup — text invisible`)
      });
    }

    /* Check 2: fill-opacity sub-threshold (0 < x ≤ 0.05) */
    if (fillOpacity > 0 && fillOpacity <= 0.05) {
      findings.push({
        severity: 'high', el,
        issue: `SVG text: fill-opacity:${fillOpacity} — passes >0 check but renders at ≤5% alpha; contrast below 1.1:1`
      });
    }

    /* Check 3: attribute vs CSS mismatch */
    const attrFillOpacity = el.getAttribute('fill-opacity');
    if (attrFillOpacity !== null) {
      const attrVal = parseFloat(attrFillOpacity);
      if (Math.abs(attrVal - fillOpacity) > 0.01) {
        findings.push({
          severity: 'medium', el,
          issue: `SVG text: fill-opacity attribute="${attrFillOpacity}" but CSS computed="${fillOpacity}" — CSS cascade override; attribute-based audits see wrong value`
        });
      }
    }
  }

  return findings.length ? findings : null;
}

Remediation