MCP server CSS stop-color security: SVG gradient stop transparent consent text, stop-opacity zero, CSS vs attribute override, and precise word-position targeting

Published 2026-09-26 — SkillAudit Research

SVG gradients (<linearGradient> and <radialGradient>) are defined by a series of color stops. Each stop specifies a color via stop-color and an optional alpha via stop-opacity. When an SVG <text> element uses a gradient as its fill (fill="url(#gradient)"), the rendered text takes the color of the gradient at each horizontal (or radial) position along the text element's bounding box.

CSS allows both stop-color and stop-opacity to be set as CSS properties on <stop> elements, overriding their SVG presentation attributes via the cascade. This creates an audit surface similar to the CSS fill-opacity override pattern: an SVG gradient's stop attributes may define correct, visible colors, while CSS rules override them to transparent or background-matching values. An audit tool reading SVG attributes finds the original colors; only computing CSS property values reveals the override.

Attack findings

<svg>
  <defs>
    <linearGradient id="consent-gradient">
      <stop offset="0%" stop-color="#333"/>     <!-- attribute: dark color -->
      <stop offset="100%" stop-color="#111"/>   <!-- attribute: dark color -->
    </linearGradient>
  </defs>
  <text fill="url(#consent-gradient)">
    By clicking Accept, you agree to the above terms.
  </text>
</svg>

/* CSS overrides all stops to transparent */
#consent-gradient stop {
  stop-color: transparent;    /* overrides all stop-color attributes */
}

/* el.getAttribute('stop-color'): "#333", "#111" → visible colors → PASS (incorrect)
   getComputedStyle(stop).stopColor: "rgba(0,0,0,0)" → transparent → ATTACK DETECTED
   text fill: url(#consent-gradient) → reference exists → PASS (incorrect)
   Rendered: invisible — gradient is fully transparent */

<linearGradient id="consent-gradient">
  <stop offset="0%"   stop-color="#ffffff"/>  /* matches white background */
  <stop offset="45%"  stop-color="#ffffff"/>  /* still matching background */
  <stop offset="50%"  stop-color="#222222"/>  /* visible: acceptance clause */
  <stop offset="100%" stop-color="#222222"/>  /* visible: binding terms */
</linearGradient>

<!-- Text layout (LTR, left-to-right gradient):
  0–45% = "By clicking Accept, you agree to" → white on white → invisible
  50-100% = "binding arbitration in Delaware." → dark on white → visible

  User sees: "binding arbitration in Delaware." without the consent framing
  Audit: stopColor "#ffffff" is non-transparent → passes alpha check
  Contrast ratio check: #fff on #fff = 1:1 → fails 4.5:1 → ATTACK DETECTED -->

<linearGradient id="consent-gradient">
  <stop offset="0%"   stop-color="#333"/>    <!-- non-transparent color -->
  <stop offset="100%" stop-color="#111"/>   <!-- non-transparent color -->
</linearGradient>

/* CSS sets stop-opacity to 0 independently */
#consent-gradient stop {
  stop-opacity: 0;    /* zero alpha regardless of stop-color value */
}

/* stop-color audit: "#333", "#111" → non-transparent → PASS (incorrect)
   getComputedStyle(stop).stopOpacity: "0" → zero alpha → ATTACK DETECTED
   stop-color and stop-opacity are separate properties — both must be checked */

<!-- SVG attribute: visible color -->
<linearGradient id="consent-gradient">
  <stop offset="0%"   stop-color="#2d2d2d"  stop-opacity="1"/>
  <stop offset="100%" stop-color="#1a1a1a"  stop-opacity="1"/>
</linearGradient>

/* CSS cascade override: transparent */
#consent-gradient stop {
  stop-color: rgba(0, 0, 0, 0);    /* overrides attribute "#2d2d2d" */
}

/* stop.getAttribute('stop-color'):   "#2d2d2d"           → PASS (incorrect)
   getComputedStyle(stop).stopColor:  "rgba(0, 0, 0, 0)"  → ATTACK DETECTED
   CSS author stylesheet > SVG presentation attribute in cascade */

Detection

function checkGradientStops(svgRoot) {
  const findings = [];

  /* Find all text elements using gradient fills */
  const textEls = svgRoot.querySelectorAll('text, tspan');
  for (const el of textEls) {
    const fillAttr = el.getAttribute('fill') || getComputedStyle(el).fill || '';
    const gradMatch = fillAttr.match(/url\(#([^)]+)\)/);
    if (!gradMatch) continue;

    const gradId = gradMatch[1];
    const gradient = svgRoot.getElementById(gradId);
    if (!gradient) continue;

    const stops = gradient.querySelectorAll('stop');
    let allTransparent = true;
    let anyBackgroundMatch = false;

    for (const stop of stops) {
      /* Read CSS computed values — not SVG attributes */
      const cs = getComputedStyle(stop);
      const color   = cs.stopColor   || stop.getAttribute('stop-color')   || 'black';
      const opacity = parseFloat(cs.stopOpacity || stop.getAttribute('stop-opacity') || '1');

      /* Check CSS vs attribute mismatch */
      const attrColor = stop.getAttribute('stop-color') || '';
      if (attrColor && cs.stopColor && attrColor !== cs.stopColor) {
        findings.push({
          severity: 'medium', stop,
          issue: `stop-color attribute "${attrColor}" overridden by CSS computed "${cs.stopColor}" — attribute audit sees wrong color`
        });
      }

      /* Check stop-opacity separately */
      const attrOpacity = parseFloat(stop.getAttribute('stop-opacity') || '1');
      const cssOpacity = parseFloat(cs.stopOpacity || '1');
      if (Math.abs(attrOpacity - cssOpacity) > 0.01) {
        findings.push({
          severity: 'medium', stop,
          issue: `stop-opacity attribute="${attrOpacity}" overridden by CSS="${cssOpacity}"`
        });
      }

      /* Check if this stop is transparent */
      const isTransparent = opacity === 0 || color === 'transparent' ||
                            color === 'rgba(0, 0, 0, 0)';
      if (!isTransparent) allTransparent = false;
    }

    if (allTransparent && stops.length > 0) {
      findings.push({
        severity: 'critical', el,
        issue: `SVG text uses gradient fill url(#${gradId}) but all gradient stops are transparent — text invisible`
      });
    }
  }

  return findings.length ? findings : null;
}

Remediation