MCP server CSS stop-opacity security: SVG gradient stop zero alpha, near-zero opacity, word-position targeting, and CSS vs attribute override

Published 2026-09-26 — SkillAudit Research

SVG gradient stops (<stop>) have two properties that together define their rendered color: stop-color (the hue and saturation) and stop-opacity (the alpha channel). These are independent CSS properties. An auditor that checks stop-color for transparency but overlooks stop-opacity may conclude that gradient stops are visible when every stop has zero alpha via stop-opacity.

When an SVG <text> element uses a gradient fill (fill="url(#gradient)"), the text color at each horizontal position is determined by the interpolated stop color and stop opacity at that position. Both properties must be computed via getComputedStyle(stop).stopColor and getComputedStyle(stop).stopOpacity — reading SVG attributes directly misses CSS cascade overrides. This is the alpha-channel complement to the stop-color targeting attack.

Attack findings

<linearGradient id="consent-gradient">
  <stop offset="0%"   stop-color="#2d2d2d"/>   <!-- dark, non-transparent -->
  <stop offset="100%" stop-color="#1a1a1a"/>   <!-- dark, non-transparent -->
</linearGradient>

/* CSS zeros stop-opacity on all stops */
#consent-gradient stop {
  stop-opacity: 0;    /* independent of stop-color; zeros the alpha channel */
}

/* getAttribute('stop-color'): "#2d2d2d", "#1a1a1a" → visible colors → PASS (incorrect)
   getComputedStyle(stop).stopOpacity: "0" → zero alpha → ATTACK DETECTED
   Rendered text: fully transparent — stop-color has non-null value but stop-opacity = 0 */

/* Passes simple non-zero check */
#consent-gradient stop {
  stop-opacity: 0.01;    /* passes: stopOpacity (0.01) > 0 → TRUE */
}

/* Effect:
   stop-color: #2d2d2d (dark gray)
   stop-opacity: 0.01 → effective alpha = 1% = rgba(45, 45, 45, 0.01)
   Against white background: contrast ratio ≈ 1.003:1
   WCAG AA minimum: 3:1 for large text, 4.5:1 for normal text → FAIL

   Detection threshold must be: stopOpacity >= MIN_READABLE_OPACITY
   where MIN_READABLE_OPACITY is determined by contrast calculation, not > 0 */

<linearGradient id="consent-gradient">
  <stop offset="0%"   stop-color="#333" stop-opacity="0"/>  /* framing: hidden */
  <stop offset="44%"  stop-color="#333" stop-opacity="0"/>  /* framing: hidden */
  <stop offset="46%"  stop-color="#333" stop-opacity="1"/>  /* clause: visible */
  <stop offset="100%" stop-color="#333" stop-opacity="1"/>  /* clause: visible */
</linearGradient>

<!-- Text content (LTR, gradient left-to-right):
  0–44%: "By clicking Accept you agree to"  → stop-opacity 0 → invisible
  46–100%: "binding arbitration in Delaware" → stop-opacity 1 → dark, readable

  User sees only the binding clause, not the consent framing
  Detection: check stop-opacity values at each position; flag near-zero in any range -->

<!-- SVG attribute: full opacity -->
<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: zero opacity */
#consent-gradient stop {
  stop-opacity: 0;    /* overrides attribute stop-opacity="1" */
}

/* stop.getAttribute('stop-opacity'):        "1"   → full opacity → PASS (incorrect)
   getComputedStyle(stop).stopOpacity:       "0"   → zero alpha   → ATTACK DETECTED
   CSS author > SVG presentation attribute in cascade; attribute audit is insufficient */

Detection

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

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

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

    const stops = gradient.querySelectorAll('stop');
    let allTransparentViaOpacity = true;

    for (const stop of stops) {
      /* Must use getComputedStyle — attribute may be overridden by CSS */
      const cs = getComputedStyle(stop);
      const cssOpacity = parseFloat(cs.stopOpacity ?? '1');
      const attrOpacity = parseFloat(stop.getAttribute('stop-opacity') ?? '1');

      /* Check for CSS override of attribute */
      if (Math.abs(cssOpacity - attrOpacity) > 0.01) {
        findings.push({
          severity: 'medium', stop,
          issue: `stop-opacity attribute="${attrOpacity}" overridden by CSS computed="${cssOpacity}"`
        });
      }

      /* Check near-zero: passes > 0 but renders near-invisible */
      if (cssOpacity > 0 && cssOpacity < 0.05) {
        findings.push({
          severity: 'high', stop,
          issue: `stop-opacity="${cssOpacity}" passes >0 check but renders at ${(cssOpacity * 100).toFixed(1)}% alpha — effectively invisible`
        });
      }

      if (cssOpacity > 0.05) allTransparentViaOpacity = false;
    }

    if (allTransparentViaOpacity && stops.length > 0) {
      findings.push({
        severity: 'high', el,
        issue: `All gradient stops have near-zero stop-opacity — consent text invisible despite non-transparent stop-color values`
      });
    }

    /* Check position-targeted opacity: compare opacity across stop positions */
    const opacityByPosition = Array.from(stops).map(s => ({
      offset: parseFloat(s.getAttribute('offset') ?? '0'),
      opacity: parseFloat(getComputedStyle(s).stopOpacity ?? '1')
    }));
    const lowPositions  = opacityByPosition.filter(s => s.offset < 0.5 && s.opacity < 0.1);
    const highPositions = opacityByPosition.filter(s => s.offset >= 0.5 && s.opacity > 0.5);
    if (lowPositions.length > 0 && highPositions.length > 0) {
      findings.push({
        severity: 'medium', gradient,
        issue: 'Gradient has near-zero stop-opacity in first half and visible opacity in second half — authorization framing may be hidden while acceptance clause is visible'
      });
    }
  }

  return findings.length ? findings : null;
}

Remediation